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

Inner items position

1 Answer 80 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
FEST
Top achievements
Rank 1
FEST asked on 28 Jul 2011, 06:05 PM
Hi forum!

I'm trying to make a 3 division panelbar for the purpose os recreating a simple webmail. The first division is for the user write the message and choose the destinations, the second division is for reading selected messages and the third is for showing the messages with a radgrid and the option to see between received and sent. 
In the first division i have 2 labels ("For:" and "From:"), 2 RadTextBox("From" that has enabled=false and "Message" that has type=Multyline) and 1 RadComboBox(that serves as a "For" selector). I have set their position with property style ( using top left width and height) and i did so with percentage values and pixel values and neither got right. For position i have tried them all and nothing thought position relative putted these items inside the radpanel.
Where i have the items in inside  the respective telerik:raspanelitem then inside items then inside telerik:radpanelitem then inside itemtemplate ( as seen in this demo -> telerik demo of nested controls inside radpanelbar) then inside a div (i also tried without the div).
My RadPanelBar is inside a div witch width and height are static in pixel values, below follows the code of mypanelbar and his superior container
<div style="border-style:inset; width:1093px; height:856px; left:50%; top:130px; margin-left:-546px; position:absolute">
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Height="100%" 
                Skin="Simple" Width="100%" style="position:absolute;">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Escrever Mensagem" 
                        ChildGroupHeight="282px" Expanded="True">
                        <Items>
                            <telerik:RadPanelItem Value="escrever" runat="server">
                                <ItemTemplate>
                                <div style="position:relative">
                                    <telerik:RadTextBox ID="RadTextBox1" runat="server" 
                                        style="z-index: 1; left: 50%; top: 1%; position: relative;" 
                                        Height="277px" TextMode="MultiLine" Width="50%">
                                        <PasswordStrengthSettings ShowIndicator="False" CalculationWeightings="50;15;15;20" PreferredPasswordLength="10" MinimumNumericCharacters="2" RequiresUpperAndLowerCaseCharacters="True" MinimumLowerCaseCharacters="2" MinimumUpperCaseCharacters="2" MinimumSymbolCharacters="2" OnClientPasswordStrengthCalculating="" TextStrengthDescriptions="Very Weak;Weak;Medium;Strong;Very Strong" TextStrengthDescriptionStyles="riStrengthBarL0;riStrengthBarL1;riStrengthBarL2;riStrengthBarL3;riStrengthBarL4;riStrengthBarL5;" IndicatorElementBaseStyle="riStrengthBar" IndicatorElementID=""></PasswordStrengthSettings>
                                    </telerik:RadTextBox>
                                    <asp:Label ID="Label2" runat="server" Text="DE:" 
                                        style="z-index: 1; left: 90%; top: 10%; position: relative"></asp:Label>
                                    <asp:Label ID="Label3" runat="server" Text="PARA:" 
                                        style="z-index: 1; left: 90%; top: 20%; position: relative"></asp:Label>
                                    <telerik:RadTextBox ID="RadTextBox2" runat="server" Width="20%"
                                        style="z-index: 1; left: 80%; top: 10%; position: relative">
                                        <PasswordStrengthSettings ShowIndicator="False" CalculationWeightings="50;15;15;20" PreferredPasswordLength="10" MinimumNumericCharacters="2" RequiresUpperAndLowerCaseCharacters="True" MinimumLowerCaseCharacters="2" MinimumUpperCaseCharacters="2" MinimumSymbolCharacters="2" OnClientPasswordStrengthCalculating="" TextStrengthDescriptions="Very Weak;Weak;Medium;Strong;Very Strong" TextStrengthDescriptionStyles="riStrengthBarL0;riStrengthBarL1;riStrengthBarL2;riStrengthBarL3;riStrengthBarL4;riStrengthBarL5;" IndicatorElementBaseStyle="riStrengthBar" IndicatorElementID=""></PasswordStrengthSettings>
                                    </telerik:RadTextBox>
                                    <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="20%"
                                        style="z-index: 1; left: 80%; top: 20%; position: relative">
                                    </telerik:RadComboBox>
                                    <telerik:RadListBox ID="RadListBox1" runat="server" AllowDelete="True"
                                        style="left: 90%; top: 30%; position: relative; height: 69%; width: 30%;">
                                        <ButtonSettings TransferButtons="All"></ButtonSettings>
                                        <Items>
                                            <telerik:RadListBoxItem runat="server" />
                                        </Items>
                                        <Localization Delete="Remover" />
                                    </telerik:RadListBox>
                                 </div>
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>            
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Ler Mensagem">
                        <Items>
                            <telerik:RadPanelItem Value="ler" runat="server">
                                <ItemTemplate>
                                      
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>        
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Lista de Mensagens" Selected="True" Expanded="True">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
                                  
        </div>

1 Answer, 1 is accepted

Sort by
0
FEST
Top achievements
Rank 1
answered on 29 Jul 2011, 12:23 PM
Hi forum!
Since i got no answers i im driven to think i may have not putted my problem the right way, I put here a bit of code that it only needs to be ealocated inside a form of a new web ajax page. You'll see thta the objects that are suposly inside the radpanelitem are not and instead they position is relative to the div witch is what i dont want to.

<div style="border-style:inset; width:1093px; height:856px; left:50%; top:130px; margin-left:-546px; position:absolute;">
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Height="100%" 
        Width="100%" style="position:absolute;">
        <Items>
            <telerik:RadPanelItem runat="server" ChildGroupHeight="285px" Text="Escrever" Width="100%" style="position:static;">
                <Items>
                    <telerik:RadPanelItem runat="server" Height="285px" style="position:relative;">
                        <ContentTemplate>
                            <asp:Label ID="Label2" runat="server" Text="DE:" style=" top:40px; left:10px; position:absolute;" Font-Bold="True"></asp:Label>
                            <asp:Label ID="Label3" runat="server" Text="PARA:" style=" top:70px; left:10px; position:absolute;" Font-Bold="True"></asp:Label>
                            <asp:Label ID="Label4" runat="server" Text="MENSAGEM:" style=" top:40px; left:470px; position:absolute;" Font-Bold="True"></asp:Label>
                            <telerik:RadTextBox ID="RadTextBox1" Enabled="false" runat="server" style=" top:40px; left:50px; position:absolute;" Width="300px"></telerik:RadTextBox>
                            <telerik:RadComboBox ID="RadComboBox1" runat="server" MarkFirstMatch="True" ShowMoreResultsBox="True" Width="300px"
                            style=" top:70px; left:50px; position:absolute;" LoadingMessage="A carregar..." AllowCustomText="True" DropDownWidth="300px"></telerik:RadComboBox>
                            <telerik:RadTextBox ID="RadTextBox2" runat="server" style="position:absolute; left:546px; top:40px;" width="500px" Height="240px" TextMode="MultiLine">
                            </telerik:RadTextBox>
                            <telerik:RadListBox ID="RadListBox1" runat="server" style="position:absolute; top:100px; left:50px;" Width="300px" Height="143px" SelectionMode="Multiple" AllowDelete="True" Localization-Delete="Remover">
                            </telerik:RadListBox>
                        </ContentTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" ChildGroupHeight="33%" Text="Ler"  Width="100%" style="position:relative;">
                <Items>
                    <telerik:RadPanelItem runat="server" Height="285px" style="position:relative;">
                        <ContentTemplate>
                        </ContentTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" ChildGroupHeight="33%" Text="Seleccionar"  Width="100%" style="position:relative;">
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>                   
</div>
Tags
PanelBar
Asked by
FEST
Top achievements
Rank 1
Answers by
FEST
Top achievements
Rank 1
Share this question
or