0

I have a menu I would like to style to look "better".

Here is an image of the menu: https://i.stack.imgur.com/QWUda.jpg

Here is the html currently:

<button type="button" class="ui-multiselect ui-widget ui-state-default ui-corner-all customClass customClassTwo" aria-haspopup="true" tabindex="0" style="width: 120px;">
<span>
    <span class="ellipsis_text" style="90px">Text to limit goes here</span>
</span>
</button>

And here are the styles associated with the element:

border-collapse: collapse;
color: rgb(103,103,103);
cursor: default;
display: inline;
font-family: Arial, 'Helvetica Neue', 'Helvetica sans-serif';
font-size: 12px;
font-weight: normal;
height: auto
letter-spacing: normal;
line-height: normal;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
white-space: pre;
width: auto
word-break: break-all;
word-spacing: 0px;
word-wrap: break-word;

It is a multiselect menu with a filter and it is initialized as such:

$(function() {

    $("#Id").multiselect({
        height: 500,
        minWidth: 280,
        multiple: false,
        selectedList: 1
    }).multiselectfilter({
        width: 300
    });

    $( "#Id" ).attr("name", "Id");
});

Preferentially I would like the menu to cut the text off a little bit before the arrow in the menu and not display the top of the text that would be on the new line as you can see in the picture.

If anyone has any ideas that'd be great. Pre stack over flow searches included searches on styling menus and using javascript to limit the amount of characters shown but those did not provide any results applicable.

Cheers

user3075327
  • 1
  • 1

1 Answers1

0

giving the button a height and a width, and set the over flow to none will do what you want

button { 
    overflow: none;
    height: 50px;
    width: 10px;
}

http://jsfiddle.net/jH5b6/

user3037493
  • 312
  • 2
  • 8