Search jQuery

jQuery Forum

Dialog body far too small

in Using jQuery UI • 6 years ago

I am using the following (NuGet download ASP.NET)

<link rel="stylesheet" href="Content/themes/base/dialog.css" />

<script>
       $(function () {
           $("#dialog-message").dialog({
               modal: true,
               buttons: {
                   Ok: function () {
                       $(this).dialog("close");
                   }
               }
           });
       });
   </script>

Here is the Div

<div id="dialog-message" title="Download complete">
          <p>
              Your files have downloaded successfully into the My Downloads folder.
          </p>
          <p>
              Currently using <b>36% of your storage space</b>.
          </p>
      </div>

When I run this there is no background to the title and the body of the text is really small in width - probably about a 1/10 the width of the dialog.

Any idea

Replies(7)

jakecigar

Re: Dialog body far too small

6 years ago

It’s a CSS problem. And we can’t tell what is inside Content/themes/base/dialog.css.

As a general rule, you need the CSS that comes with UI or you need to implement most of it yourself.

JΛ̊KE

Darren Ro..

Re: Dialog body far too small

6 years ago

Hi Jake,

Thanks for the prompt reply, here is the dialog CSS that comes with it.

jQuery UI Dialog 1.11.4

.ui-dialog {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-se {
	width: 12px;
	height: 12px;
	right: -5px;
	bottom: -5px;
	background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}

jakecigar

Re: Dialog body far too small

6 years ago

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

The base CSS is needed. With it the page works, without it I get your results.

JΛ̊KE

Darren Ro..

Re: Dialog body far too small

6 years ago

I had literally just tried that, when I added the accordion I did not have to add the base, the close button still says close, can I override this with an x?

Also how would I align the content, sorry for all the questions.

jakecigar