Inner items position

2 posts, 0 answers
  1. FEST
    FEST avatar
    31 posts
    Member since:
    Jul 2011

    Posted 28 Jul 2011 Link to this post

    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>
  2. FEST
    FEST avatar
    31 posts
    Member since:
    Jul 2011

    Posted 29 Jul 2011 Link to this post

    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>
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top