Edgar Navasardyan Edgar Navasardyan - 4 months ago 23
CSS Question

Changing bootstrap-select element width and removing borders

I have successfully created css files for vanilla Bootstrap, selectize, etc.
But now I am having tough times trying to modify default css for Bootstrap-select. Specifically, I am trying to


  1. Remove the border of the element

  2. Change the width of the element so that it fits into the column with given width



As for now, the second column for some reason overlaps the first column. This error goes away if you remove the
th.zeon-fixed-narrow-column {width: 1.5em;}
.
The think is that I don't want to remove it, I DO WANT the first column to be as narrow as 1.5em !

Here's my jsFiddle



table {
table-layout: fixed;
}

th.zeon-fixed-narrow-column {
width: 1.5em;
}

.zeon-selectpicker{
border:none !important;
width: 1.5em;
}

.zeon-selectpicker:focus{
background-color:red;
}

table {
table-layout: fixed;
}

th.zeon-fixed-narrow-column {
width: 1.5em;
}

.zeon-selectpicker{
border:none !important;
width: 1.5em;
}

.zeon-selectpicker:focus{
background-color:red;
}




Answer

If I understand you correctly. You want the width of the dropdown to be equal to your table header right?

To achieve this add this to your css:

.bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
  width:100%;
}

on default the above bootstrap-select class has a fixed width of 220px. You can see the result here: JSFIDDLE.

If this is not what you want please tell me, I will try to help you