This is a migrated thread and some comments may be shown as answers.

Width in % not working as expected

5 Answers 105 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
improwise
Top achievements
Rank 1
Iron
Iron
improwise asked on 27 Mar 2012, 03:28 PM
Hi, 

We have a RadComboBox with an ItemTemplate. If we specify it like this:

            <ItemTemplate>
                <asp:Panel ID="panelMyPanel" runat="server" Height="55px" 
                    Width="100%">
                    <table align="left" cellpadding="2" cellspacing="2" class="style1">
                        <tr>
                            <td width="50%" bgcolor="#990099">
                                <asp:Label ID="Label370" runat="server"   Text="My text></asp:Label>
                            </td>
                            <td width="50%" bgcolor="#9933FF">
                                <asp:Label ID="Label370" runat="server"   Text="My text></asp:Label>
                            </td>
                        </tr>
                    </table>
                </asp:Panel>
            </ItemTemplate>

It will "drift" for each row (no vertical alignment) despite no text being close to long enough to fill the 50% for each column. If we change to:

            <ItemTemplate>
                <asp:Panel ID="panelMyPanel" runat="server" Height="55px" 
                    Width="600px">
                    <table align="left" cellpadding="2" cellspacing="2" class="style1">
                        <tr>
                            <td width="300px" bgcolor="#990099">
                                <asp:Label ID="Label370" runat="server"   Text="My text></asp:Label>
                            </td>
                            <td width="300px" bgcolor="#9933FF">
                                <asp:Label ID="Label370" runat="server"   Text="My text></asp:Label>
                            </td>
                        </tr>
                    </table>
                </asp:Panel>
            </ItemTemplate> 

It will render correctly.

Shouldn't both work and produce the same result? We prefer to specify width in % instead of PX as that will work even if page skin or similar is changed in the future. 

5 Answers, 1 is accepted

Sort by
0
improwise
Top achievements
Rank 1
Iron
Iron
answered on 27 Mar 2012, 03:32 PM
Seems like it wasn't enough to specify just 100% on the panel but we had to add it to the table also, which seems to solve the problem.
0
improwise
Top achievements
Rank 1
Iron
Iron
answered on 27 Mar 2012, 03:52 PM
Seems like we were to quick to celebrate, as soon as we added the HeaderTemplate it broke again but this time between ItemTemplate and HeaderTemplate. After some more investigation we guess that the reason for this was probably the scrollbar being inserted as we have to many rows to fit in "one screen". So we had to set the outer panel to a fixed width, and all the other could remain as percent. Is this a bug or expected behavior?
0
Ivana
Telerik team
answered on 30 Mar 2012, 12:20 PM
Hello Patrick,

This is shown very well when I test it locally:
<telerik:RadComboBox ID="RadComboBox1" runat="server">
    <HeaderTemplate>
        <asp:Panel ID="panelMyPanel" runat="server"  Width="100%">
            <table width="100%">
                <tr>
                    <td width="50%">
                        Column1
                    </td>
                    <td width="50%">
                        Column2
                    </td>
                </tr>
            </table>
        </asp:Panel>
    </HeaderTemplate>
    <ItemTemplate>
        <asp:Panel ID="panelMyPanel" runat="server" Height="55px" Width="100%">
            <table align="left" cellpadding="2" cellspacing="2" class="style1" width="100%">
                <tr>
                    <td width="50%" bgcolor="#990099">
                        <asp:Label ID="Label370" runat="server" Text="My text"></asp:Label>
                    </td>
                    <td width="50%" bgcolor="#9933FF">
                        <asp:Label ID="Label371" runat="server" Text="My text"></asp:Label>
                    </td>
                </tr>
            </table>
        </asp:Panel>
    </ItemTemplate>
    <Items>
        <telerik:RadComboBoxItem Text="item1" />
        <telerik:RadComboBoxItem Text="item2" />
        <telerik:RadComboBoxItem Text="item3" />
        <telerik:RadComboBoxItem Text="item4" />
        <telerik:RadComboBoxItem Text="item5" />
        <telerik:RadComboBoxItem Text="item6" />
    </Items>
</telerik:RadComboBox>

Greetings,
Ivana
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
improwise
Top achievements
Rank 1
Iron
Iron
answered on 30 Mar 2012, 12:24 PM
Sorry, I don't understand what you mean, what is "shown very well"?
0
Ivana
Telerik team
answered on 04 Apr 2012, 12:32 PM
Hi Patrik,

I am sorry, I meant displayed. You could refer to the png file attached to my previous post to see how RadComboBox is displayed when I test the markup from the same post locally.
Is this the appearance that you want to achieve?

Greetings,
Ivana
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
ComboBox
Asked by
improwise
Top achievements
Rank 1
Iron
Iron
Answers by
improwise
Top achievements
Rank 1
Iron
Iron
Ivana
Telerik team
Share this question
or