CODEWITHSUNDEEP
cssangularjsui-select
salamanka44
salamanka44

Reputation: 944

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

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

Thank you in advance !

Upvotes: 3

Views: 4379

Answers (1)

lealceldeiro
lealceldeiro

Reputation: 14958

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)

Upvotes: 2

Related Questions