Tip #18: Did you know…How to absolute position controls on copy paste or drag drop from Toolbox?


To absolute position any control on your designer, you select the control and then select the following menu option: Format  –> Position… ->Position style ->Absolute.

Sometimes you may want the controls to be absolutely positioned on the design surface as soon as you drag drop control from the tool box or as soon as you copy paste on designer.

Here is how you enable this:

Go to Tools –> Options –>HTML Designer –>CSS Styling

And check “Change positioning to absolute for controls using Toolbox, paste or drag and drop” as show below in the picture.

ToolsOptions

Now, if you switch to Design View and drag drop a button control, the designer will automatically add style=”position: absolute” to the control. This control can then be dragged on the design surface by grabbing the white tab (asp:button#Button1) and placed where required.

Absolutely positioned button control with the white tab:

AbsolutelyPositionedButtonControl

Reshmi Mangalore

SDET, Web Development Tools

Update 11/28/2011:

This image shows where to drag, and it shows it works for both label and validation controls.

Comments (18)

  1. Ruben Verborgh says:

    Thanks for the tip. However… do we really want to do that? It doesn’t look like best practice to me.

  2. My latest in a series of the weekly, or more often, summary of interesting links I come across related to Visual Studio. Greg Duncan has posted a list of PDC sessions and downloads for their videos and presentations . He also went to the trouble of writing

  3. George says:

    Thanks.

    The first line was what I needed, the tutorial I am using did not mention the format menu…I was looking in the properties and wrapping with <DIV/>’s.

  4. Sal says:

    Thanks,

    Though what are good practices for placement of controls within the deisgner

  5. Latest on Tips and Tricks Blog. Tip #13: Did you know… How to get the browser agent using ASP.NET Ajax

  6. narayana says:

    i did what u say but still control is not placing absolute position plz say solution

  7. lucky says:

    your the best.u r really provide what i want.

                                thank you

  8. Krishna Sagar says:

    very nice. I thought there is no option in 2008 edition like that.

  9. Sanjay says:

    Thank u , Its working fine but  its not working Label control can u plz tell me whats the reason…

  10. Sanjay says:

    Thank u , Its working fine but  its not working Label control can u plz tell me whats the reason…

  11. sanjay says:

    Thank u , Its working fine ….   But  its not working with Label control can u plz tell me whats the reason…

  12. Van says:

    Hi, Sanjay.

    I tried this with Visual Studio 2010 SP1, and it seems to work fine.  Mind you, the control is not positioned where you drop it (for any control) but once dropped you can move it where you want it to be.  When I set Tools/Option as shown and drop a Label on the designer, I get:

    <asp:Label ID="Label1" runat="server" style="z-index: 1; left: 326px; top: 211px; position: absolute" Text="Label"></asp:Label>

    What HTML do you get?  Specifically, what is not working?

  13. nidhi says:

    absolute positioning isn't getting enable foe the label. can you please help me out

  14. WebDevTools says:

    Hi, nidhi, as Van commented, label works.  Make sure when you drag and drop for absolute positioning, you are dragging the top white tab (asp:button#Button1) of the control, not the control itself.

  15. anil reddy.b says:

    Thank u , Its working fine but  its not working Label control can u plz tell me whats the reason…

  16. Gnuroe says:

    What about the Validation controls????

    I can't move it at all……….

  17. WebDevTools says:

    Hi, anil and Gnuroe, I added a picture in the end of the blog to show it works for label and validation controls.

  18. dani says:

    Thanks a lot. I was searching for this many times. This is very much use full for my project