TUniDBListBox + Bootstrap 4 Card

[Eugeniusz Rink]

 

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">';           
        }
    }
);
}

 

[Freeman35]

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;">

[Eugeniusz Rink]

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">';           
        }
    }
);
}



 

 

[Freeman35]

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

[picyka]

very good desgin!

[Eugeniusz Rink]

Picyka TNX ;-)