PDA

View Full Version : Opera dialog position


Geraint
23 Aug 2007, 3:37 AM
Hello community. This is my first post and intended to show you a problem that drove me nearly crazy until now - and to say "thank you" to Jack and the ext-community for this wonderful framework.

I have a medium sized application, that uses ext a lot and worked well in every major browser - until I updated from ext 0.3 to the latest 1.1. After applying all the needed changes to the code I was happy to see the app working again, but only in IE and Firefox - while the 0.3 version worked in Opera, too.

Dialogs, I try to open, i.e. from a button click, didn't show up in Opera, even if the "modal" mask properly covered the whole screen. They were rendered anywhere around -10000 in X and Y position. I double and triple checked the code and searched the net and tried to get some useful information out of Opera (but there's no Visual Studio Analyzer or Firebug nor even a Wenkman around ...) but but to no effect.

After two days of pain, I started to build a minimal page to isolate the error and step by step, I ended up with some special CSS. To clarify, every page in my application is surrounded by a HTML <form ....> tag which opens after the <body> and is closed before </body>.

And in some earlier stage (using Ext 0.3) I added the "from { display:inline; }" property to my CSS - which broke the code to calculate the position in Opera right after the update. The "display:inline" isn't there beacause of Ext, I used wanted to get rid of some bad layouts in one or the other browser, caused by the rendering of <form-tags just like block level elements.

So, what's the matter? Maybe someone finds this post helpful (if it is indexed by the search engine spiders) and maybe something in Ext can be altered to get the position calculation right in Ext 1.X like it was in 0.3 even if theres a <form-Tag with "display:inline".

Thanks for your patience
Geraint
mystix
23 Aug 2007, 4:02 AM
you're saying that some legacy CSS you added to fix yui-ext 0.33 rendering issues is causing Ext 1.1 to break in Opera?

why is this a bug in Ext 1.1? :-/

if you remove your pre-1.0 CSS patch form {display:inline;}, do dialogs still break in Opera?
Geraint
23 Aug 2007, 4:18 AM
you're saying that some legacy CSS you added to fix yui-ext 0.33 rendering issues is causing Ext 1.1 to break in Opera?

Don't get me wrong. I added the "display:inline" for forms in no way because of Ext (or yui-ext) that's why it was so difficult to find the place, just because I never thought about this small line in my CSS after seeing the behaviour in Opera.

The reason I posted here is, that it worked in yui-ext and doesn't do in Ext rigth now. If it's the wrong forum, please move or close this thread and I apologize.

To illustrate the reason for adding display:inline to forms, try Problems with extra vertical space after forms (http://www.cs.tut.fi/~jkorpela/forms/extraspace.html) in different browsers. But I don't mind about the extra space now, I'm glad to have the dialogs working in Opera again ;)

Regards
Geraint
mystix
23 Aug 2007, 5:00 AM
aahhh.. that thread helped clear things up. thanks for the link. :)

i'll move this to the general discussions forum since this isn't an Ext bug.
Geraint
23 Aug 2007, 6:24 AM
i'll move this to the general discussions forum since this isn't an Ext bug.
Even if one can say, that
"dialogs in Opera inside form tags with 'display:inline' doesn't show up correctly"?

Just curious - but sure, my initial intention to post this thread was'nt to get it fixed, but to post a workaround for other desperate users. ;)

Regards
Geraint
mystix
23 Aug 2007, 7:25 AM
actually, you're the first ever to report this. :)

and this is really the first time i'm seeing this css to deal with that inexplicable extra space before / after <form> tags. most ppl (like me) just ignore it cos it doesn't present any visual problems (unless of course your form happens to be really short and the inclusion of that extra inexplicable white space before / after the form so happens to cause really ugly scrollbars to appear).
jon.whitcraft
23 Aug 2007, 12:32 PM
Make sure you have include in the reset.css file or just something like this in your css.



form { margin: 0; padding: 0; }
Geraint
23 Aug 2007, 9:19 PM
actually, you're the first ever to report this.
Sometimes, someone is always the first at something ;)


Make sure you have include in the reset.css file or just something like this in your css.
Thank you for the tip, I read the article(s) about this topic, too. And I'm not here because of CSS tips - please keep this in mind. I thought, Ext is on topic around, isn't it?

But let me clarify my "Bug" posting once more (just for the record, I'll shut up on this afterwards).

The reason, that I added this CSS had nothing to do with yui-ext (and doesn't matter anyway, does it?)
yui-ext 0.3 worked fine even in Opera (tested on 9.x) - with this style set
After un upgrade to Ext 1.1 the calculation for the dialogs in Opera fails - with this style set


That looks to me, as there was a code once in a time, that was able to handle this style setting. In Ext 1.1. this code was changed and (somehow, depends on your point of view) broken.

Regards
Geraint
mystix
23 Aug 2007, 10:26 PM
it's alright. you don't have to shut up. honest :D
(and yes, i do understand the css you added was to solve a general problem with extra vertical white space appearing after normal html forms. ;) )

i just dug through the old reset-min.css from yui-ext0.33 and the current reset-min.css from 1.1 and both of them include the css mentioned by @jon above.

considering only reset-min.css, here are the differences between the old and the new:


html {margin:0;padding:0;} /* added in 1.1's reset-min.css */

fieldset,img{border:0;} /* was in yui-ext0.33's reset-min.css */
img,body,html{border:0;} /* currently in 1.1's reset-min.css */


just out of curiousity, in your old code, if you remove the form {display:inline} css and include reset-min.css / yui-ext.css instead, does any extra vertical space still appear after the form? the reason why i wasn't seeing any extra vertical space in my own forms was probably because i was using ext-all.css all along :"> (my bad)
Geraint
23 Aug 2007, 10:47 PM
it's alright. you don't have to shut up. honest
You asked for it 8-|


the reason why i wasn't seeing any extra vertical space in my own forms was probably because i was using ext-all.css all along
Or your browser doesn't add the space by itself.

FireFox doesn't - IE7 and Opera do. (It's easy to see in the above example (http://www.cs.tut.fi/~jkorpela/forms/extraspace.html)).
I didn't check the margin-approach with the form, as the display-tweak was inserted by default (reused code) from another project and is not as important as the attention, this little line gets in this discussion ;).
The only difference was - that now Ext (or yui-ext) were added and so... *insert whole story again*

Anyway, I still hope this thread is some sort of advice for other people, dealing with the same issue.

Regards
Geraint
mystix
23 Aug 2007, 11:01 PM
B)

just tried your link in IE6 and yes, there's extra whitespace. :">

saved the source from that page, added margin: 0; to that page's existing css, and voila. :>

my turn to shut up ;)

p.s. thanks for the discussion :)