Login
Latest Development Blogs
Forum Topics Post
Browse By Tag
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?
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 id="wcTest_f" class="WC4-F-N" style="POSITION: relative; WIDTH: 200px; FLOAT: left; VERTICAL-ALIGN: middle; OVERFLOW: hidden">
<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>
<DIV style="WIDTH: 179px; HEIGHT: 18px; OVERFLOW: hidden">
<INPUT id="wcTest_text" class="WC4-TB-N" style="PADDING-LEFT: 2px; WIDTH: 100%" name="wcTest_text" autocomplete="off" value="" />
</DIV></DIV>
<TABLE style="DISPLAY: none" id="wcTest_udata">
<TBODY><TR class="WC4-Row-N" dataValue="Col1Row1">
<TD style="WIDTH: 200px" class="WC4-C" noWrap="noWrap"><NOBR>Col1Row1</NOBR></TD>
</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
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.
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
Here is the answer to your questions.
WebCombo control is not hardcoded design. You can simply configure its width from the property provided in the WebCombo.NET Designer.
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.
It is probably because other div does not require to have css class for its styles.
Could you clarify in which parts does the WebCombo's HTML structure look weird and complicated?
Hope this helps.
Thank you.
Regards,-Martin-
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?
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,
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?
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!