Search code examples
c#jqueryasp.net-corebootstrap-4bootstrap-selectpicker

Bootstrap SelectPicker Extends Past Panel Heading

I am currently using Bootstrap's SelectPicker and am trying to display it inside a panel heading, aligned to the right, next to a few Bootstrap buttons. My problem is that the Bootstrap dropdown is too wide. It extends past where the panel heading ends. I have attempted to change the width to the dropdown, and by using other options such as float: right and drop-down-menu right instead of pull-right, but no cigar. I have attempted to change the CSS for the selectpicker and have tried to change it's position with Jquery, but it remains the same width and does not change. Here is a sample of my code below:

@if (Model.Customers != null && Model.Customers.Any())
        {
            <select name="custDropdown" id="custDropdown" class="selectpicker pull-right" title="Select a Customer...">
                @foreach (var customer in Model.Customers)
                {
                    <option value="@customer.UserName">@customer.FirstName @customer.LastName</option>
                }
            </select>
        }
        else
        {
            <select class="selectpicker pull-right" title="No Users for this Customer" disabled></select>
        }

<div class="panel panel-default">
    <div class="panel-heading">
        Claim Activity
    </div>
</div>

I haven't included my other buttons in this code sample, but they all have the class pull-right associated with them too. I've done a ton of research into this, but I haven't found any useful articles or threads with people trying to do this with a select statement, only with dropdown buttons. I know dropdowns act weirdly in comparison to buttons when trying to apply pull-right to them, but it doesn't make sense to me why it would extend past the panel heading. I know that it doesn't have to do with how long the name is inside of the dropdown. The names being displayed now are relatively short and the width does not change no matter how long or short they are. If anyone has any suggestions or know what I could do to fix this, that would be great. Here is an image for reference of what I'm talking about below: enter image description here

Solution

  • I ended up solving the issue. Turns out, the problem was with the CSS of the SelectPicker. I was just looking in the wrong place when trying to modify the CSS before. The width was set at 100%, and I had to shorten it down to 82.5%.

    .bootstrap-select > .dropdown-toggle {
  width: 82.5%;
  padding-right: 25px;
  z-index: 1;
}