drs drs - 1 year ago 185
AngularJS Question

Why does the ngDialog div block expand to full-width when removing the CSS width parameter?

I am using ngDialog in AngularJS to create pop-up dialogs in my webapp. ngDialog provides CSS that contains a width parameter. If I override the paramater with

width: initial
, the block expands to be full-width. I would expect (and desire) it to take up the minimum size necessary to show its contents.

Here is a minimally working ngDialog exmaple on jsfiddle. Click on the text to open the dialog and see it expand to full-width.

How can I adjust the css so that the div is just large enough to fit its contents?

Answer Source

Becuase the css by default is:

.ngdialog.ngdialog-theme-plain .ngdialog-content {
   max-width: 100%;
   width: 450px;

If you override the width: 450px, then as a div - a block level element - it defaults to full width.

You can change it to display: inline-block to make it "just fit"

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download