Intersoft Community - WebCombo - custom css width not working under ie8

custom css width not working under ie8

handy@intersoftpt.com — Mon, 27 Dec 2010 20:09:51 GMT

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

Those collection of properties are enough for user to customize their own style.

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

custom css width not working under ie8

lybax — Thu, 23 Dec 2010 04:09:45 GMT

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

custom css width not working under ie8

MarTin — Wed, 22 Dec 2010 04:40:12 GMT

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.

custom css width not working under ie8

lybax — Tue, 21 Dec 2010 08:34:04 GMT

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:

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

custom css width not working under ie8

MarTin — Wed, 08 Dec 2010 04:00:17 GMT

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-

custom css width not working under ie8

lybax — Fri, 03 Dec 2010 11:28:20 GMT

Hi there!

As IS WebCombo does not provide a CssClass in the main control, as overriding LayoutSettings styles (e.g. FrameStyle) using CssClass breaks the default design, we decided to set WebCombo.Width to 100% and define the actual (expected) width in a parent div element.

This solution (workaround) was rather satisfying on IE7 and FF (a bit less), but is not working anymore on IE8. Setting Width="100%" displays the WebCombo with a size of 150px. Without setting the Width, its size is 200px (hardcoded in inner controls!!!).

So my question is: What can I do?

Why is the WebCombo designed with hardcoded style (absolute, width, font-size)?
Why isn't there any way to properly override style using css class without breaking default style and without redefining all default style?
Some default css class are available (e.g. WC4-F-N), but not on all div: why?
Why is the WebCombo HTML structure (div elements) so weird and complicated?

I'm scratching my head for hours finding a "workable" bastard solution using "!important" css keyword everywere I can, in order to ignore IS hardcoded style (e.g. width:auto !important; height:inherit !important), but I'm stuck in this poor design... please help me!

</DIV></DIV>

</TR></TBODY></TABLE>

We are working on a project for more than a year using IS solution and we still hope there will be a clean solution for all our workaround we needed. And I'm not talking about WebGrids...

This becomes URGENT!

Thank you for your feedback and help.

Nico