Solved

How to dynamically position a panel

Posted on 2011-09-30
2
463 Views
Last Modified: 2012-05-12
In the below, I would like the Panel, pnlChoice, to show directly after the content in DateTimeLabel2.  The issue that I have is that the content in DateTimeLable2 can vary in length, so I need to somehow dynamically position the panel.

thanks
<asp:UpdatePanel  runat="server" id="UpdatePanel2">           
            <ContentTemplate>
              
            <div style=" border-style:solid; border-width:1px;"><div style=" background-color:#f5f8fa; border-style:solid;
border-color:#f5f8fa;
border-width:30px;">
              <div><asp:Label runat="server"  id="DateTimeLabel2" /></div>
         
                <asp:Panel ID="pnlChoice" runat="server">
                </asp:Panel> <br /></div></div><br />
                  <p style="display:none" id="para">jjj</p>
                <asp:Button runat="server" id="UpdateButton2"   OnClientClick="SendForm()" onclick="UpdateButton_Click" text="Update"  Style="background-image: url(images/imagebutton.png); background-repeat: no-repeat; font-size:medium; color:White" BackColor="Transparent" 
            BorderStyle="None" ClientIDMode="Static" ForeColor="Transparent" Height="41px" Width="101px" />&nbsp;&nbsp;
            <asp:Button ID="btncontinue" runat="server" Text="SUBMIT" 
                    Style="background-image: url(images/imagebutton.png); background-repeat: no-repeat; font-size:medium; color:White" BackColor="Transparent" 
            BorderStyle="None" ForeColor="Transparent" Height="41px" Width="101px" 
                    Visible="False" onclick="Button1_Click" />

            </ContentTemplate>  
</asp:UpdatePanel>

Open in new window

0
Comment
Question by:d2fox
2 Comments
 
LVL 2

Expert Comment

by:ramkihardy
ID: 36890937
If you want to position the panel below the label datetime2...
Good Idea for this is assign the position of the panel like this
pnlChoice.y = DateTimeLable2.Length+10;
This will work fine
regards
Ramki
0
 
LVL 12

Accepted Solution

by:
jagssidurala earned 500 total points
ID: 36893106
Change the code as below

<asp:UpdatePanel  runat="server" id="UpdatePanel2">          
            <ContentTemplate>
             
<div style=" border-style:solid; border-width:1px;">
<div style=" background-color:#f5f8fa; border-style:solid;
border-color:#f5f8fa;
border-width:30px;width:X;float:left">
              <div style="width:X;float:left"><asp:Label runat="server"  id="DateTimeLabel2" /></div>        
                <asp:Panel ID="pnlChoice" runat="server">
                </asp:Panel> <br />
</div>
</div>
<br />
<p style="display:none" id="para">jjj</p>
<asp:Button runat="server" id="UpdateButton2"   OnClientClick="SendForm()" onclick="UpdateButton_Click" text="Update"  Style="background-image: url(images/imagebutton.png); background-repeat: no-repeat; font-size:medium; color:White" BackColor="Transparent"
            BorderStyle="None" ClientIDMode="Static" ForeColor="Transparent" Height="41px" Width="101px" />
&nbsp;&nbsp;
<asp:Button ID="btncontinue" runat="server" Text="SUBMIT"
                    Style="background-image: url(images/imagebutton.png); background-repeat: no-repeat; font-size:medium; color:White" BackColor="Transparent"
            BorderStyle="None" ForeColor="Transparent" Height="41px" Width="101px"
                    Visible="False" onclick="Button1_Click" />
            </ContentTemplate>  
</asp:UpdatePanel>      


Put the width of main div width and label container div width should be same. set width as per your design
0

Featured Post

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question