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 dynamically change the value of a CSS property inside a stylesheet?

    HTML/CSS - How can I change the spacing or add whitespace so the boxes are equal?

    How to make my CSS responsive

    How to achieve MS word tab function in html/ css?

    How to auto width a form element with CSS?

    CSS: How to use calc(100% - 20px) to get an area to fill up all area OTHER than that of a fixed-width element?

    How to change TextBox class based on input

    How do I align this CSS correctly?

    How to change expand div after click and collapse it after another click?

    How to position text in a div?

    how do i suppose to make the 4 box be responsive?

    How to change and maintain multiple color themes at runtime with css?

    How to mix two image using clipping in css?

    How to make the click logo appear without a href in css/html?

    How to add another two full width sections below (CSS)

    How to make an element remain inline

    How do I make a textarea resize properly when I resize browser window?

    How to over-ride img-width from bootstrap? Set css rule to null?

    How to avoid this hardcoded index.js when use webpack?

    How do I keep parentheses of SASS / SCSS mixin?

    How to make a custom select option menu style without image in CSS?

    How can I create left & right side fixed width elements with a center that fills the remainder?

    How do I make this list not break lines when browser size is changed?

    how to give animation effect on hover using css or jquery on border of division

    How to Prevent My CSS From Clashing With Facebook's CSS?

    How to change CSS of a website depending on whether it is being viewed on mobile or computer? [closed]

    How to test browser performance of specific CSS property?

    How to change ol bullets for clickable images

    How to change a div's position according to data from database

    How to return a “text” in css less?