CODEWITHSUNDEEP
jqueryhtmlcss
Hansal Mehta
Hansal Mehta

Reputation: 195

How to change the style of jquery contextmenu

I am trying to use jquery context menu with the Jqgrid .I am able to get the context menu options on right click but i am not able to change the default styling of the context menu.For example , if my context menu options are greater to some words they are coming down in next line which i dont want..

Here is the HTML..

<div class="contextMenu" id="myMenu1" style="display:none; width:auto;">
    <ul style="width: 200px">
     <li id="Reservation">
            <span class="ui-icon ui-icon-pencil" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Reservation Options</span>
        </li>
        <li id="CheckIn">
            <span class="ui-icon ui-icon-pencil" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">CheckIn</span>
        </li>
    </ul>
</div>

Now in the above context menu , The very first option Reservation Options i am getting in two lines which i dont want.. Please help me to update the css.I tried to increase the width of the ul list but its not working .. Thanks..

Upvotes: 1

Views: 4679

Answers (3)

Konservin
Konservin

Reputation: 1017

contextmenu has a ClassName option: http://swisnl.github.io/jQuery-contextMenu/docs.html#classname

$.contextMenu({
  className: 'contextmenu-customwidth'
});

then use css:

.contextmenu-customwidth {
  width: 31px !important;
  min-width: 30px !important;
}

width only will not do the trick, you'll need min-width, too.

Upvotes: 1

Aamir Shahzad
Aamir Shahzad

Reputation: 6834

Create a new CSS file and add all style to it and include that;

to over-ride inline style you have to use !important;

.contextMenu
{
   /*Your context menu styling here*/
}

.contextMenu ul
{
   width: 500px !important; /*or Your desired width here */
}

.contextMenu ul li
{
   white-space: nowarp;
}

I hope this will help you.

Upvotes: 2

user5296864
user5296864

Reputation:

Just open it's css file and customise accordingly if you have expertise in cascading style.

Upvotes: 0

Related Questions