How to place ascx control where you want it?

[yarbrough40]

Perhaps this is an easily answered question which is why I can't find a Google answer for it. I created an ASCX Control that consists of a panel control and that's it. I am trying to make this panel into a custom button. Being that it is a panel I am subject to the fact that it renders as a div which creates a problem. I would like to position this panel-button in the parent aspx page like a regular button which can be placed anywhere like next to a regular button like below:

[asp_button1] [ascx_panel_butt on]


however the page won't let you do this because the ascx control has a panel in it so it snaps to its own horizontal space like below:


[asp_button1]
[ascx_panel_butt on]


I'm thinking it is just not possible - is there anyway way to put a panel horizontally next to another control?

[NitinSawant]

put both the controls inside a table
td

[CroCrew]

I would stay away from using Tables to control placement of objects on pages.

Look into using <Div> tags and positioning them. Below is an example:

Happy Coding,
CroCrew~

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div style="position: absolute; top: 10px; left: 10px;">
                <asp:panel ID="Panel1" runat="server" Height="200px" Width="200px"></asp:panel>
            </div>
            <div style="position: absolute; top: 10px; left: 220px;">
                <asp:panel ID="Panel2" runat="server" Height="200px" Width="200px"></asp:panel>
            </div>
        </form>
    </body>
</html>

[Frinavale]

<div> elements (aka asp.net Panels) are rendered as "Block Elements". That means that the <div> is placed on the next line (within the flow of the page) and anything that comes after the <div> is placed on the line under it.

You can change the display style of the div to get around this. Change it from "block" to "inline" or "relative" or something :)

Like so:

<asp:panel ID="Panel1" runat="server" style="display:inline;"></asp:panel>

Since you have your panel within a User Control, I suggest exposing the style property of the panel to the calling code using a Property :)

Likewise, you could use the CssClass property of the Panel to set the css-class of the <div> element. But this would require you actually creating a css class (which isn't a bad thing actually!)

I suggest that you look into which display style would best suit your scenario.

-Frinny