CSS Custom JQuery ui-dialog

Question

I need to add a 2 pixel border around the JQuery ui-dialog.

Could anyone help on what to modify please?

Thanks

Matt Ball · Accepted Answer · 2011-04-18 14:36:11Z

10

Change the CSS rule for .ui-widget-content:

.ui-widget-content {
    border: 2px solid #DDD;
}

The least intrusive way to do this is to add that rule to your site's stylesheet (e.g. don't change the jQuery UI CSS file), and make sure that the jQuery UI CSS file is loaded first.

answered Apr 18, 2011 at 14:36

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

Comments

idarke · Accepted Answer · 2012-08-08 14:17:39Z

2

To put a border around the dialog box, but not any other widget type, do this:

.ui-widget-content.ui-dialog
{
   border: 2px solid #DDD;
}

answered Aug 8, 2012 at 14:17

idarke

392 bronze badges

Comments

Chris · Accepted Answer · 2013-07-05 18:14:07Z

0

In 'jquery-ui.css' add a border to the dialog style:

.ui-dialog {
    position: relative; 
    padding: .2em; 
    width: 300px; 
    border: 2px solid white;
}

edited Jul 5, 2013 at 18:14

Chris

46.7k17 gold badges140 silver badges160 bronze badges

answered Apr 18, 2011 at 14:53

ChrisThompson

2,00813 silver badges17 bronze badges

1 Comment

Satch3000 Over a year ago

Tried it but it didn't work. My current code is: .ui-dialog {position: absolute; padding: .2em; width: 300px; overflow: hidden;}

Collectives™ on Stack Overflow

CSS Custom JQuery ui-dialog

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related