CSS to override jquery UI at a specific situation

Question

Can somebody help me override the jquery UI css?

I need to get something like below image

enter image description here

and I got

enter image description here

If not possible, then probably help me out

getting spaces between each panels like in the 1st picture
and no border for the panel content as it is in the 1st image.

My Panel (only 1 of them)

<div title="Repository Properties" class="class">
    <table style="width:100%; align:left;">
        <tbody>
            <tr>
                <th class="thPanel" align="left">Home</th>
                <td align="left">test</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.thPanel
{
    font-size:11px;
    width:22%;
}
.class
{
    font-size:15px;
    border-style:none;
}

Any help would be great! Thanks

UPDATE

If I add the below css, it works, but it also affects all the other ui stuff on the page, which i don't want, any help?

.ui-widget-content{border-style:none;}

Jake Feasel · Accepted Answer · 2011-11-15 06:02:31Z

2

Try adding this to your .class style:

padding: 10px 0;

answered Nov 15, 2011 at 6:02

Jake Feasel

17k5 gold badges55 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AabinGunz Over a year ago

Still no luck with the no border thing (panel content)

Jake Feasel Over a year ago

Try inspecting the element and seeing which other classes are applied to it. If there is one more specific to this UI element, try applying border-style: none !important; to that class instead of .ui-widget-content.

Cory Danielson · Accepted Answer · 2011-11-15 06:04:57Z

2

.thPanel
{
    font-size: 11px !important;
    width:22% !important;
}
.class
{
    font-size:15px !important;
    border-style:none !important;
}

This may do the trick. It's the "important directive", and it specifies that the CSS style you are applying has importance over all other CSS styles on that attribute of the element.

answered Nov 15, 2011 at 6:04

Cory Danielson

14.5k4 gold badges47 silver badges52 bronze badges

1 Comment

Greg Pettit Over a year ago

I'm not sure that it's the existing CSS he wanted help with, though I could be wrong. In any event, using !important is almost never needed. Increased specificity and/or just having the "overrides" later in the CSS should be all it takes.

Collectives™ on Stack Overflow

CSS to override jquery UI at a specific situation

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related