?
Solved

How to dynamically position a panel

Posted on 2011-09-30
2
Medium Priority
?
467 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 2000 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

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

765 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