Intersoft Community - WebCombo - Problem with CSS Positioning

Problem with CSS Positioning

andi@intersoftpt.com — Thu, 07 Jan 2010 20:49:32 GMT

Hi James,

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.

Best Regards,

Andi Santoso

Problem with CSS Positioning

jamesmh2000 — Thu, 07 Jan 2010 12:30:00 GMT

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

Problem with CSS Positioning

andi@intersoftpt.com — Mon, 04 Jan 2010 20:27:11 GMT

Hi James,

Glad to hear that it works nicely, please do not hesitate to ask if you have any other questions. Thank you.

Best Regards,

Andi Santoso

Problem with CSS Positioning

jamesmh2000 — Mon, 04 Jan 2010 07:52:34 GMT

Hi Andi,

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,

James

Problem with CSS Positioning

andi@intersoftpt.com — Mon, 04 Jan 2010 01:31:05 GMT

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

Problem with CSS Positioning

jamesmh2000 — Tue, 29 Dec 2009 09:01:46 GMT

Hi Andi,

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.

Cheers,

James

Problem with CSS Positioning

andi@intersoftpt.com — Mon, 28 Dec 2009 23:11:13 GMT

Hi 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

Problem with CSS Positioning

jamesmh2000 — Mon, 28 Dec 2009 13:40:23 GMT

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.