asp.net web page missing top and left properties

Question

asp.net web page missing top and left properties

Simon 466

by Designing a web page

in the "View Markup"

is it posible to set the top and left

 <asp:Panel ID="Panel7" runat="server" BackColor="Transparent" Height="858px" Width="2186px" Left="152px" Top="70px" Direction="LeftToRight">

it is not making an error

then in the View Designer

is mising the properteis of "top" and "Left"

how is posible to set the position of a panel

Accepted answer

2 additional answers

Your answer

Answer 1

There is no such thing as a top or left attribute on HTML elements. These are positioning values and are related to the styling of the control. Ideally you should be managing all this in the CSS for your site and not using hard-coded positioning as it isn't responsive.

Having said that, to set the top left position of an element you must apply styling.

<asp:Panel Style="top: 10px; left: 10px"></asp:Panel>

Be aware that Content Security Policies generally do not allow inline CSS because they are vulnerable. Therefore the preference is to put the styling into CSS and then mark the panel as using the CSS class instead.

Answer 2

Simon 466

I tried using your solution (see code below) and got no results.

<asp:ListBox ID="ListBox1" runat="server" Style="Left: 0px; Top: 0px" Height="153px" Width="239px" Rows="8" SelectionMode="Multiple" ToolTip="Testing"></asp:ListBox>

It does not move the Listbox to the top.

Maybe I did not understand your response. Please explain.

Michael Taylor 60,161 Reputation points

2024-03-19T21:47:12.5933333+00:00
You understood correctly but there are a couple of things.

You set the top left to be 0 which is the default so there is no need to render it. Set it to something else.

You originally mentioned a Panel (which is a div) but now you're talking about a ListBox (which is a Select). While it should work in this case, you shouldn't assume what works for one control will work with another. It depends on whether they are structural or rendered.

Element rendering is controlled by the CSS styling applied to it. By default elements are rendered static which means your position has no effect unless the parent (or one of its parents) is positioned differently. You should really read up on how HTML elements are positions to get a full understanding of how this works. In order to get top/left position to work you need to use at relative positioning as well. Otherwise the position attributes are ignored. The browser will then position the element relative and then offset by the given position. As I mentioned earlier, absolute positioning is not really recommended or used in modern web apps for a variety of reasons; one of which is it is inconsistent in browsers.

Finally note that the parent may size itself based upon the child controls (e.g. div) so you may also need to size the parent in order to get the children to position properly.

Here's a very basic example of how to get a listbox to position inside a panel. It isn't perfect, may render differently in browsers and generally isn't recommended but sort of gives you an idea of what to do.

<asp:Panel ID="Panel1" runat="server" style="height: auto; width: auto; background-color: blue;"> <asp:ListBox ID="ListBox1" runat="server" style="position: relative; top: 10px; left: 40px;"> <asp:ListItem>First</asp:ListItem> <asp:ListItem>Second</asp:ListItem> </asp:ListBox> </asp:Panel>
Bruce (SqlWork.com) 77,686 Reputation points Volunteer Moderator

2024-03-19T22:00:46.8266667+00:00

you should learn CSS.

if the element is absolutely positioned, top and left are relative to the containing parent (see definition of containing).

if element position is relative then it top and left are relative to the elements static position.

if the element position is static (default for <select>) then top and left have no impact.

Answer 3

Simon 466

Michael Taylor

Thanks A milion

Share via

asp.net web page missing top and left properties

2 additional answers

Your answer