Solved

How to dynamically position a panel

Posted on 2011-09-30
2
465 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 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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

726 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