Width problems with select option in WebDialog

tt_su · 28 May 2014, 18:51

hmm.... does an explicit 100% width also work?

Dan Rathbun · 28 May 2014, 21:53

FYI using an inline STYLE attribute, kills the META "MSThemeCompatible" feature that is set in the HEAD section.

IE:
<select ***style="width:250px"*** name="season_select" id="season_select">
causes the select control to render like it is in old Windows 3.x.

The example above that shows using an inline stylesheet with a class to control width, is a much better way to go.

I think that inline STYLE attributes are considered obsolete now.

jolran · 29 May 2014, 06:03

@unknownuser said:

FYI using an inline STYLE attribute, kills the META "MSThemeCompatible" feature that is set in the HEAD section.

Really ? Did not know that. Yet another reason to avoid inline styling.
Dumb question: Do you know if it kills the META just for that particular element or just by using inline style once in the document everything is ruined, if you understand my question.

I mainly use classes because it's easier to switch styling just by toggling class on/off..
It's difficult to overide that if using inline style or ID selectors.

maricanis · 29 May 2014, 07:22

I would avoid any spaces based alignment, because GUI is translated in few languages, and with spaces I can't predict how long it will be in each language.

For styling classes are much better solution, but in example I just wanted to point out that I need some predefined width.

Thanks Dan, I didn't know that inline styles render controls differently than is style is defined in CSS class.
I'm also interested if it kills META for the whole document or just that one control.

Thom, I've just read your link Doctype---Quirks-vs-Standard-vs-Superstandard and it made me completely puzzled. When I include:
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
it renders my GUI completely different then before, and all dialog alignments look crazy.
Must look little bit more into this rendering mode thing.

Is it conflicting in any way with meta tag Dan proposed in one post?
<meta http-equiv="MSThemeCompatible" content="Yes">

jolran · 29 May 2014, 08:00

@unknownuser said:

I would avoid any spaces based alignment, because GUI is translated in few languages

Fine, then.

I would stick to IE=edge in the META. Or set specific version of IE.
I use D3.js and it wont launch otherwise since using CSS3 selectors/HTML5.. If you don't. Then you will have to include Sizzle or Html5 Shiv since any library dependent of CSS3 selectors need IE9(?) and up. For Mac don't know..

tt_su · 29 May 2014, 09:03

@maricanis said:

Thom, I've just read your link Doctype---Quirks-vs-Standard-vs-Superstandard and it made me completely puzzled. When I include:
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
it renders my GUI completely different then before, and all dialog alignments look crazy.
Must look little bit more into this rendering mode thing.

Are you familiar with the different document modes rendering engines use depending whether the HTML is valid or not? That specific section describes that the IE engine, when embedded is much more conservative and will keep on using an older document mode even if you have a newer IE engine installed. This differ from how the browser version of IE picks the render mode.

maricanis · 29 May 2014, 14:54

@tt_su said:

Are you familiar with the different document modes rendering engines use depending whether the HTML is valid or not? That specific section describes that the IE engine, when embedded is much more conservative and will keep on using an older document mode even if you have a newer IE engine installed. This differ from how the browser version of IE picks the render mode.

Frankly, no experience and knowledge about document modes, I've just used the default ones till now.
Any suggested readings on this?
Especially related to embedded vs. browser mode?

Thanks again!

Dan Rathbun · 31 May 2014, 04:35

@maricanis said:

I'm also interested if it kills META for the whole document or just that one control.

You guys might have to search the Microsoft websites for details.

I think changing certain style attributes of control elements will cancel the OS theme styling for that particular element. And then changing other attributes is OK.

You'll just need to experiment.

Some 3rd party wiki blogs seem to indicate that changing background and border at the document level might cancel the theme styling for the entire document, but I have never had a problem setting the WebDialog background color to match the system dialog background color, and still having controls rendered in the OS theme.

eneroth3 · 31 May 2014, 15:58

Another solution would be to stop using IE and use a real web browser for dialogs for a future SU version. Perhaps pack Gecko or something similar. This would also solve some of the the problems with web dialogs being platform dependent.

Dan Rathbun · 31 May 2014, 23:48

Yes I agree, and have already "pushed" adding a GeckoDialog class to the API.

tt_su · 2 Jun 2014, 13:36

@eneroth3 said:

Another solution would be to stop using IE and use a real web browser for dialogs for a future SU version. Perhaps pack Gecko or something similar. This would also solve some of the the problems with web dialogs being platform dependent.

Oh yes! We really want that. Unfortunately it's not that easy. Bloat is a big problem with these embedded browser frameworks. Then there is the technical support.

tt_su · 2 Jun 2014, 13:38

@maricanis said:

Frankly, no experience and knowledge about document modes, I've just used the default ones till now.
Any suggested readings on this?
Especially related to embedded vs. browser mode?

I always make sure I use strict mode (full standard mode) and that mode renders best across different browsers and is the way forward. Everything else, quicks mode, is just legacy war damage from the ancient browser battles .