iSeller Commerce
iSeller POS Retail
iSeller POS F&B
iSeller POS Express
Crosslight
WebUI
ClientUI
What's New
Download Trial
Web Solution
Mobile Solution
Enterprise Solution
Custom Development
Blog
Community
Latest Development Blogs
ForumPostTopic
Browse By Tag
Hi,
I would like to start using CSS to position controls rather than my company's current default of absoute positioning, however I'm having trouble aligning WebCombo with standard ASP.NET / HTML controls.
I'm creating a simple form with one column for field label and a second for the associated control. If I use the following CSS to define the label column, then the WebCombo does not lign up with the other controls.
.labelUsingFloat { display: block; float: left; width: 13em; }
Also, each pair of label and data is surrounded by a div element, which I would expect to cause any subsequent pair of label and data to go to the next line, however this is not the case with a div that contains a WebCombo.
When I format the labels and controls using a table then everything is nicely aligned and looks correct, but I don't want to have to use a table!
Can anybody help? I'm using Visual Studio 2008 with Web UI Studio 2009.
Example page attached.
Hi James,
I have created another CssClass to be used by the WebCombo. Here are the sample code of CssClass:
.borderClass { border-color:#286A9B; border-bottom-style:solid; border-bottom-width:1px; border-left-style:solid; border-left-width:1px; border-right-style:solid; border-right-width:1px; border-top-style:solid; border-top-width:1px; margin-left:3px; margin-bottom:3px; margin-right:3px; margin-top:3px; }
And here is the HTML code for the WebCombo:
<ISWebCombo:WebCombo ID="WebCombo1" runat="server" UseDefaultStyle="true" > <LayoutSettings AllowFloatingText="false" > <framestyle> <Normal CssClass="borderClass"> </Normal> <Over CssClass="borderClass"> </Over> <Active CssClass="borderClass"> </Active> </framestyle> </LayoutSettings> </ISWebCombo:WebCombo>
I hope it helps and please, do not hesitate to ask if you have any other questions. Thank you.
Best Regards,Andi Santoso
Hi Andi,
I thought I'd let you know a colleague of mine came up with a simpler solution - seting "float:left" in the style for the data column in addition to the label column. This avoids the need to set the FrameStyle on the WebCombo. My colleague also noticed that the alignment problem only occurred in IE and not in Firefox.
Cheers,
James
It occurs because on the WebCombo, there is a property called AllowFloatingText and by default it will set to true. I have tried you sample and set the AllowFloatingText to False and it works fine. Here are the sample code:
<ISWebCombo:WebCombo ID="WebCombo1" runat="server" UseDefaultStyle="true" LayoutSettings- AllowFloatingText="False"> </ISWebCombo:WebCombo>
I hope it helps and please do not hesitate to ask if you have any other questions, thank you.
Best Regards,
Andi Santoso
Thanks for your reply - it has solved part of the problem.
The controls that come after the WebCombo now appear on the next line (even though the Visual Studio 2008 designer still wrongly shows them on the same line).
However the left-alignment of the WebCombo is still off by a couple of pixels compared to the other controls. Adding margins to the WebCombo doesn't seem to work too well, and anyway the alignment works fine in a table so I don't think this should be necessary.
I am testing with IE6 as this is still my company's standard. Any further suggestions greatly appreciated.
That works nicely for the float alignment, thanks.
I guess if I want to use a mixture of float-based alignment and table-based alignment I'll have to use different styles for the WebCombos, based on where they are placed.
Thanks,
Glad to hear that it works nicely, please do not hesitate to ask if you have any other questions. Thank you.
Thank you for giving and sharing the information. I believe it will help the other when they encounter the same issue that you had and please, do not hesitate to ask if you have any other questions.
or
Choose this if you're already a member of Intersoft Community Forum. You can link your OpenID account to your existing Intersoft Social ID.
Choose this if you don't have an Intersoft account yet. Your authenticated OpenID will be automatically linked to your new Intersoft account.
Enter your Wordpress Blogname