Hello Nico,

Here is the answer to your questions.

• Why is the WebCombo designed with hardcoded style (absolute, width, font-size)?

WebCombo control is not hardcoded design. You can simply configure its width from the property provided in the WebCombo.NET Designer.

• Why isn't there any way to properly override style using css class without breaking default style and without redefining all default style?

I apologize for any inconvenience this problem may have caused you. For the current version, you need to redefine all default styles since the combo is designated with its default style initially. However, we are going to enhance the combo in the next version. We are going to implement and provide a property that allows user to override style using Css class without having to redefine all default styles. It is more like AllowDefaultStyleMerging property available in WebGrid.

• Some default css class are available (e.g. WC4-F-N), but not on all div: why?

It is probably because other div does not require to have css class for its styles.

• Why is the WebCombo HTML structure (div elements) so weird and complicated?

Could you clarify in which parts does the WebCombo's HTML structure look weird and complicated?

Hope this helps.

Thank you.

Regards,
-Martin-

• Why is the WebCombo designed with hardcoded style (absolute, width, font-size)?

WebCombo control is not hardcoded design. You can simply configure its width from the property provided in the WebCombo.NET Designer.

Yeah, and what if I want to configure the width in CSS?
If you look using Developer Tools for instance (HTML display), you see that the main dropdown DIV has its width hardcoded (see my original post).

And if I override it in CSS, it does not work as it IS hardcoded...
So how can I set the width in CSS?

• Why is the WebCombo HTML structure (div elements) so weird and complicated?

Could you clarify in which parts does the WebCombo's HTML structure look weird and complicated?

It's a bit complicated to explain... but if you take the 2 DIVs inside the main dropdown DIV:

<DIV id="wcTest_search" class="WC4-DD-N" hideFocus style="TEXT-ALIGN: center; FILTER: ; FLOAT: right; OVERFLOW: hidden; opacity: 1; MozOpacity: 1; KhtmlOpacity: 1"></DIV>

<DIV hideFocus style="POSITION: absolute; FONT-FAMILY: Webdings; COLOR: black; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: default; RIGHT: 1px">6</DIV>

I don't understand why the "wcTest_search" DIV does not contain the second DIV (the symbol "6" = arrow), as it is supposed to be the DIV for the dropdown button (arrow). And I don't understand why this second DIV's position is absolute?

Anyway the most important problem here is to configure dropdown's WIDTH in CSS.
As explained in my original post, it used to work on IE7 setting IS control width to 100% and setting width in a global DIV CSS class.
But it does not work in IE8 anymore... what can I do?

Thank you and best regards,

Nico

Hello Nico,

Regarding your issue, I need to discuss with the development team to be investigated further.

Do you have any working simple sample that replicates your issue?

Thank you.

I just noticed there are a lot of posts regarding webcombo compatibility issues on IE8.

So no wonder why I get different displays between IE7 and IE8...

Concerning a simple working sample that replicates my issue:
Just put a simple webcombo from your samples into a DIV element and set the webcombo's width to 100% and the DIV's width to let say 500px, then compare between IE7 and IE8.

Good luck!

Nico

Hello Nico,

You can use custom CSS to configure WebCombo style without no issue. But, there are some major styles that could not be changed due to design or function purpose. Those are very basic style which should not be changed.
E.g some of the styles are used for properties function purpose which can only work in XHTML doctype or etc.

However, WebCombo still allow user to configure its style freely, except some basics styles. You can see that we provide some WebCombo style sample in our WebCombo sample. 
For easy customization, please set UseDefaultStyle as false. Then, you can customize WebCombo style with your own custom CSS. Below are the list of properties that allow user to customize its style.

• HeaderStyle
• DropDownStyle
• TextBoxStyle
• ResultFrameStyle
• ColumnStyle
• FrameStyle
• MoreButtonStyle
• StatusBoxStyle
• ResultBoxStyle
• RowStyle
• SelectedRowStyle

About the last differences display between IE7 and IE8, that is a browser behaviour.
In IE8, some properties need to be turned off manually.
For this case, please try to turn off AllowFloatingText under LayoutSettings properties.
You can see that there is no differences between the layout now.

Regards,
Handy