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 get all blue background divs to align to the left and get all the red divs to align to the right using the css float property?

    css rules multi class, how to match two out of many

    How to Javascript to load a css file only for one specific page?

    How to get rid of scroll bars/arrows in Wordpress, when using font style called 'Pre'

    CSS Horizontal Menu is showing list bullets

    How to reffer in CSS to an input which has class attached to?

    How do I properly use display:block on this menu?

    How to fit these divs inside a div to occupy whole horizontal width

    How to detect which button is clicked in javascript?

    How to refactor CSS based on HTML class

    How to solve css double hover issue? Making an image map

    how to make a h2 background image 'dynamic' in height as well

    How to align specific element to the right using :last-child pseudo

    How to use particular CSS styles based on screen size / device

    How can I use CSS `resize` to resize an element to a height/width less than initial height/width on Chrome?

    How do nested vertical margin collapses work?

    Both DIV Popups Shown Instead of One

    How to absolutely position element against page rather than floated parent?

    How to center nav using CSS/HTML? [closed]

    How to handle this CSS issue with Wordpress?

    HTML/CSS - How to set text (e.g. 'Quote of the Day') to change automatically on page load/reload?

    How to make agile layout?

    How to align Navbar at bottom of window, but have content under this in CSS?

    how to make a div toggle background-position “onclick” while keeping hover

    How can I change CSS style definition to make border on specific div

    How to change table width using css

    How to change the background color of a non selected cell in JavaFx 8 table view

    Logo not showing on top of header img

    How to switch visibility of an HTML div in css for overlaying

    How to do caption hover effect on a background?