By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,187 Members | 1,070 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,187 IT Pros & Developers. It's quick & easy.

How to place ascx control where you want it?

yarbrough40
100+
P: 320
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_button]


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_button]


I'm thinking it is just not possible - is there anyway way to put a panel horizontally next to another control?
Dec 19 '10 #1
Share this Question
Share on Google+
3 Replies


100+
P: 270
put both the controls inside a table
td
Feb 14 '11 #2

CroCrew
Expert 100+
P: 563
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~

Expand|Select|Wrap|Line Numbers
  1. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default1" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head id="Head1" runat="server">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <form id="form1" runat="server">
  9.             <div style="position: absolute; top: 10px; left: 10px;">
  10.                 <asp:panel ID="Panel1" runat="server" Height="200px" Width="200px"></asp:panel>
  11.             </div>
  12.             <div style="position: absolute; top: 10px; left: 220px;">
  13.                 <asp:panel ID="Panel2" runat="server" Height="200px" Width="200px"></asp:panel>
  14.             </div>
  15.         </form>
  16.     </body>
  17. </html>
  18.  
  19.  
Feb 16 '11 #3

Frinavale
Expert Mod 5K+
P: 9,731
<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:
Expand|Select|Wrap|Line Numbers
  1. <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
Feb 16 '11 #4

Post your reply

Sign in to post your reply or Sign up for a free account.