Eugeniusz Rink Posted March 7, 2020 Share Posted March 7, 2020 Hello I use TUniDBListBox and Bootstrap 4 Card in my mobile application. However, I have a problem for the Card to be in full screen width. Below is the code used in the project. What am I doing wrong? My code: function beforeInit(sender, config) { config.loadingText='Proszę czekać. Pobieram dane...'; config.grouped=false; config.selectedCls=''; config.itemTpl=new Ext.XTemplate( '<div class="card-body shadow w-auto">'+ '{[this.getReady(values)]}{4} {3}</span>'+ '<div class="panel-body mt-sm-40">'+ '<p class="text-info">Index: {0}</p>'+ '<p class="text-primary font-weight-bold">{1}</p>'+ '<p class="">Cena: {2} zł. J.M.: {3}</p>'+ '</div>', { getReady: function(values) { if(values[4]<=0)return '<span class="badge badge-pill badge-danger float-right">'; else return '<span class="badge badge-pill badge-primary float-right">'; } } ); } Link to comment Share on other sites More sharing options...
Freeman35 Posted March 8, 2020 Share Posted March 8, 2020 Hi, maybe problem can your card-body not in <class=card> https://getbootstrap.com/docs/4.0/components/card/ <div class="card" style="width: 18rem;"> Link to comment Share on other sites More sharing options...
Eugeniusz Rink Posted March 17, 2020 Author Share Posted March 17, 2020 Freeman35 thank you for the hint. I have corrected the code as below. However, I did not get the automatic alignment effect depending on the screen size. function beforeInit(sender, config) { config.loadingText='Proszę czekać. Pobieram dane...'; config.grouped=false; config.selectedCls=''; config.itemTpl=new Ext.XTemplate( '<div class="card-body shadow" style="width: 20rem;">'+ '{[this.getReady(values)]}{4} {3}</span>'+ '<p class="text-info">Index: {0}</p>'+ '<p class="text-primary font-weight-bold">{1}</p>'+ '<p class="">Cena: {2} zł. J.M.: {3}</p>'+ '</div>', { getReady: function(values) { if(values[4]<=0)return '<span class="badge badge-pill badge-danger float-right">'; else return '<span class="badge badge-pill badge-primary float-right">'; } } ); } 2 Link to comment Share on other sites More sharing options...
Freeman35 Posted March 18, 2020 Share Posted March 18, 2020 maybe use percented in width. and look to bootstarp class s .align-iten-sm-center, .align-item-md-center, .justify-content-xl-center, .justify-content-lg-center, .justify-content-xs-center etc. and TUniDBListBox has card class? 'cos its a parent node in html. <div class="card" style="width: 18rem;"> ..... its on https://getbootstrap.com/docs/4.0/components/card/ follow examples on this link, then compare yours. I mean, look in browser "View Page Source" or press F12 and follow nodes and theme class's etc. regards Link to comment Share on other sites More sharing options...
picyka Posted March 18, 2020 Share Posted March 18, 2020 very good desgin! Link to comment Share on other sites More sharing options...
Eugeniusz Rink Posted March 27, 2020 Author Share Posted March 27, 2020 Picyka TNX ;-) Link to comment Share on other sites More sharing options...
Recommended Posts