How does one override the JQuery UI styles?


Tags: jquery,css,jquery-ui,jquery-ui-draggable

Problem :

I'm using JQuery UI sortable, which seems to force the sortable elements to have display: block.

However, I would like these elements to have display: inline-block.

I've tried using this css: .item { display: inline-block !important; }

But it does not work (as evidenced by the computed styles in Chrome's console).

I've also tried using the following jquery statement: $('.item').css({display: 'inline-block'})

But that does not work either.

How can I override the JQuery UI styles?



Solution :

The solution was to set float:none, which allowed the desired display style of inline-block to manifest. Then I had to set vertical-align: top to make the elements align at their tops. The total css:

.item {
    float:none;
    display:inline-block;
    vertical-align:top;
}

    CSS Howto..

    How to configure opacity based CSS overlay to not effect spacing of surrounding elements?

    How to center div the whole screen page using css

    How-to mix fixed and percentage heights/width using css without javascript

    How do I create two columns using CSS?

    How to assign custom CSS to Sharepoint site

    Foundation CSS Framework, how to change triangle on accodion

    How to attach for every Array-Element in jQuery different Animationeffects? And animate one by one forwards and backwards with 2 Buttons(back&next)?

    How to write a:hover in inline CSS?

    how to change padding of last element of li in css

    How to make a transparent overlay on image [duplicate]

    How to hide elements with css using checkboxes: different outputs according to element id or class?

    How to change font-color for disabled input?

    How to use CSS float without hiding parts of a DIV

    CSS how to place an image to the right of variable width text on roll over?

    How to overlap two SVG vectors without using inline SVG?

    how to position a css sprite as background for another class

    How to check for text created by CSS?

    How do I detect that facebook app is loading page to change CSS?

    How to remove or reset CSS style using JS?

    How do I center my search form within a div?

    Responsive CSS layout - how to stretch the background overlay

    How can i prevent divs from moving while resizing the page

    How to make css menu width impossible to change when zooming or changing resolution?

    How to have an asp.net ajax control automatically reference css files

    How to show two rows of div in single div

    How to show red border at Invalid Input Box after clicking Submit button with angularjs

    On textbox focus, how can you change the background color of the element prior to it with only CSS?

    How to add CSS class to CQ dialog box

    How to restrict zoom of webpage to stretch when iPhone and Android in landscape orientation?

    How to implement a navbar with HTML / CSS