Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How to dynamically position a panel

Posted on 2011-09-30
2
Medium Priority
?
476 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 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

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

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
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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 …
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

569 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