Bootstrap Dropdown Disable resizing of button

Question

All, I am trying to disable the resizing of the dropdown button and hide the overflow of text.

My current application has a bootstrap dropdown with some rather large options available for selection. I would like to..

Keep the selection button at a specific width.
hide any over flow that happens when the user selects a text option large in size.

I can set the width of the button itself, but whenever I select a selection that has a large length, the text overflows outside of the button.

HTML

<div class="btn-group dropdown">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Select Values <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Some Very Large Value</a></li>
        <li><a href="#">Some Very Large Value Some Very Large Value</a></li>
        <li><a href="#">Some Very Large Value Some Very Large Value Some Very Large Value</a></li>
      </ul>
    </div>

JavaScript

$(document).ready(function () {
            //Makes the selected value show at the top of the dropdown box
            $(".dropdown-menu li a").click(function () {
                $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
                $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
            });
        });

jsFiddle

Thanks!

Jorge Mejia · Accepted Answer · 2016-10-19 17:24:04Z

1

You can do something like this: Find all your li elements and check the length of the text and adjust the length

 $('.dropdown-menu').find('li').each(function(){
      console.log( $(this).text().length );
      if($(this).text().length >= 10){
           $(this).text($(this).text().substring(0, 11) + '...')
      }
  });

jsfiddle example

edited Oct 19, 2016 at 17:24

answered Oct 19, 2016 at 16:50

Jorge Mejia

1,1611 gold badge11 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jimmie Barnett Over a year ago

Beautiful, not quit the answer, but i was able to use this approach and apply the substring value to the button. thanks

Collectives™ on Stack Overflow

Bootstrap Dropdown Disable resizing of button

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related