"Something" violates this jqueryui dialog. What is it?

I don't want to be vague, but I'm not sure what is going on.

This code works:

this.J.button_update.click(function () { self.J.dialog_hold.dialog({ resizable: false, modal: true, width: 305, height: 360 }); }); 

It produces:

enter image description here

As you can see, there is a lot of space on the right border. What you may not notice is that all my content is turned off by about 5 pixels. To fix this, I thought I would simply reduce the width of the jquery dialog by 5 pixels as follows:

  width: 300, // decreased by 5 

However, for some reason this breaks the dialogue. He produces this:

enter image description here

How to fix the problem?

The following is a scenario of the problem:

+7
javascript jquery html css
source share
2 answers

Go into developer mode in firefox and check the element one by one for its width and other properties. This will help you find the problem.

+3
source share

It turns out that the file_input element was not detected by the browser item inspector for Firefox. I do not know why. Since the transparency was set to 0, it is not visible. A complicating factor is that it cannot be verified. More precisely, only part of the element is checked. I found this by deleting the elements until the dialog is β€œunbroken”. Then I turned the opacity for this element to see that it breaks the dialogue.

This lengthy process could be shortened if the DOM inspector detects a violating element.

I am going to write this as an error with respect to the DOM inspector, since it only selects part of the file, even if it detects another part. Very misleading.

+1
source share

All Articles