Button padding when using data-width="fit" is incorrect.

[caseyjhol]

Originally reported by @mdczaplicki (snapappointments/bootstrap-select#1135 (comment)):

This is how it looks using BS4 and with these attributes: htmlAttributes: new { @class = "selectpicker", multiple = "multiple", data_width = "fit", title = "Select roles" }
Kinda too high I think. Also padding is broken IMO.

Removing "fit" makes it look good.

Demo: https://plnkr.co/edit/AYv6YSnrk5WwNgtSh6N0?p=preview

[krystyna93]

@caseyjhol Thanks for the solution to this.

@caseyjhol Is this the same solution that I can do if the 'tick' icon overlaps a dropdown option item that is too short?

Thanks.

[caseyjhol]

@krystyna93 Can you create a new issue with details on how to recreate the overlap problem?

[krystyna93]

@caseyjhol this is the issue I am having trouble with.
As you can see the first dropdown option is obscured by the tick icon, when the selectpicker has a data-width="fit" applied to it:

<select class="selectpicker" multiple title="Choose condiments" data-size="10" data-width="fit">
          <option>all ages</option>
          <option>18+</option>
          <option>17</option>
          <option>16</option>
          <option>15</option>
          <option>14</option>
</select>

I wish to keep the data-width="fit", for my layout purposes, so is there a way I can tweak the css for this?

[caseyjhol]

@krystyna93 Hrmmm...it's working properly for me (at least with the latest version in the dist folder on the v1.13.0-dev branch). https://plnkr.co/edit/g45uxyIeMcV0mRIl6NbN?p=preview. Are you sure it's not related to something with the CSS on your end?

[krystyna93]

@caseyjhol Ah okay. I tried using the new beta version, and it seems to be working now. Thanks.

[krystyna93]

@caseyjhol I have another issue now, that I cant seem why it would display like so:

The dropdown arrow is not positioned correctly...?

   <form>
      <div class="row">
         <div class="col-md-2">
           <div class="form-group">
                <select class="selectpicker form-control" multiple title="All Ages">
                <option>All Ages</option>
                <option>18+</option>
                <option>17</option>
                <option>16</option>
              </select>                  
        </div>
      </div>

      <div class="col-md-2">
          <div class="form-group">
              <select class="selectpicker form-control" multiple title="All Ages">
                  <option>All Ages</option>
                  <option>18+</option>
                  <option>17</option>
                  <option>16</option>
                </select>                  
          </div>
        </div>
    
    </div>  
  </form>

I have the beta version bootstrap-select.css and bootstrap-select.js with bootstrap v4.0.0

[caseyjhol]

Released in v1.13.0!

This issue was moved by caseyjhol to snapappointments/bootstrap-select#2066.