How to change the stylesheet of this ui-select element? (angular)

Question

I wrote a little program in angular using an ui-select element. The problem is that the search bar is really too long and I didn't find how to reduce it. Usually, we have some "width" properties that you can change for that but the css code is too complicated and I didn't find how to manage that. What I want to do is to save three bars at the same line.

I copied the sample from the official page of the ui-select, so it contains a lot of things in css that I didn't understand and I don't know much about css or bootstrap...

The style element in the index.html is this one :

  <style>
    body {
      padding: 15px;
    }

    .select2 > .select2-choice.ui-select-match {
      /* Because of the inclusion of Bootstrap */
      height: 29px;
    }

    .selectize-control > .selectize-dropdown {
      top: 36px;
    }
  </style>
</head>

And they included a huge select.css file in their sample that you can find in my plunker : http://plnkr.co/edit/kuryoI5osBtRihYAeoVH?p=preview

Can you show me how can I reduce the width of th search bar?
Can you PLEASE show me how to remove all the unecessary line from the select.css included in the plunker that are not used in my example ?? I don't know how can I do that efficiently. I'm afraid to delete important elements and I really got lost in that huge css file.

Thank you in advance !

salamanka44, have you considered [accepting](https://stackoverflow.com/help/someone-answers) my answer if it was useful to you? — lealceldeiro, Nov 22 '17 at 14:04

lealceldeiro · Answer 1 · 2016-11-27T18:50:54.883

Edited 2 (How to use the col-xx-nn) properties with bootstrap

The xx indicates in which view you want the property to be applied:

xs : extra-small devices

sm: small devices

md: medium devices

lg: lg devices

The nn indicates how many column the element will occupy (total is 12). Please see http://getbootstrap.com/getting-started/ for reading the full docuemntation.

And this is how your code would be...

<div class="row">
     <!--First ui-select-->
    <div class="col-md-4"> <!--1/3 of 12 -->
      <ui-select ng-model="selectedItem">
       <!--ui-content-here--->
      </ui-select>
    </div>
    <!--Second ui-select-->
    <div class="col-md-4"> <!--1/3 of 12 -->
      <ui-select ng-model="selectedItem">
         <!--ui-content-here--->
      </ui-select>
    </div>
    <!--Third ui-select-->
    <div class="col-md-4"> <!--1/3 of 12 -->
      <ui-select ng-model="selectedItem">
         <!--ui-content-here--->
      </ui-select>
    </div>
</div>

Edited

Include a custom css and put these rules. Make sure to include this after the ui-select css files in order to overwrite its rules:

.ui-select-container {
    max-width: 200px; /*put the desired width here!*/
}

.ui-select-bootstrap > .ui-select-match > .btn {
    max-width: 200px; /*put the desired width here!*/
}

.ui-select-bootstrap > .ui-select-choices {
    max-width: 200px; /*put the desired width here!*/
    overflow-x: scroll;
}

.ui-select-container .form-control {
    max-width: 200px;  /*put the desired width here!*/
}

Check this working plunker http://plnkr.co/edit/GN8i5PeFebS7Bo04GiUt?p=preview

In this plunker the rules are in myOwnCss.css file and I needed to add another custom rule in order to get this done properly because some of the other default styling of the ui-select. See below

/**some additional styling in order to get
the demonstration working properly (very possibly not needed for you)*/
.ui-select-bootstrap .ui-select-choices-row.active > a {
  color: black;
  background-color: white;
}

Important!:

Please, be aware that if you have an option with a name too long (it takes more than you desired width, 200px in this case) it won't be show completely in the selected option, and besides you have to scroll over the x axis in order to read it completely in the dropdown list.
When you create a ui-select item, it will generate a div for all its content, and with three bars, all those divs will probably be shown, one below the others. (TIP: you can solve this using bootstrap classes: col-md-4 for every div which wraps every ui-select)

Can you tell me how can I change the select.css file please? Because it's too long and I think that it contains a lot of useless lines for that example. Please — salamanka44, Nov 27 '16 at 08:11
Can you tell please how can I use the limiTo filter in that plunker code. I didn't manage how to use it. Thanks ! — salamanka44, Nov 27 '16 at 09:06
Please, see my answer edited. Hope it helps! Give some feedback :) — lealceldeiro, Nov 27 '16 at 17:31
can you please how to use the "col-md-4" class to have the tree ui-select items at the same line? (not at each line alone). I'm not good at bootstrap, it will be my last question ! Thank you — salamanka44, Nov 27 '16 at 18:05
See my answer and plnkr edited. Notice that if you're seeing the html content in a small or medium device the bars might actually be placed one below the other. That shouldn't happen in a medium or a large device. Hope it helped! — lealceldeiro, Nov 27 '16 at 18:53

How to change the stylesheet of this ui-select element? (angular)

1 Answers1