positioning a web user control
-
how to position a web user control.i have changed the layout of the page to flowlayout.still i cannot place the control properly.also while making the web user control the controls that i was adding to it could not be positioned by me.they just kept on sticking to the left hand side of the page
-
how to position a web user control.i have changed the layout of the page to flowlayout.still i cannot place the control properly.also while making the web user control the controls that i was adding to it could not be positioned by me.they just kept on sticking to the left hand side of the page
Pretty much the same way you would position any other control. Either specify a top and left in the style or put it into a table/div
-
how to position a web user control.i have changed the layout of the page to flowlayout.still i cannot place the control properly.also while making the web user control the controls that i was adding to it could not be positioned by me.they just kept on sticking to the left hand side of the page
Anonymous wrote: how to position a web user control.i have changed the layout of the page to flowlayout.still i cannot place the control properly The web user control by default does not support the absolute positioning, so if the web page uses the GridLayout, you cannot move the user control. If you switch the layout to the FlowLayout, the designer will arrange the controls on the web page in the order they appear, and you are not able to freely move the element. For more information, you can see the pageLayout Property[^] In this case, if you want to move the user control in the design view while the web page uses the GridLayout, you simply add the
styleattribute for the control....style="Z-INDEX: 101; LEFT: 216px; POSITION: absolute; TOP: 224px"...
Now you can move it in the designer as you would with other web standard controls. However, the style attribute does not affect when the web page is viewed in the browser. So to make it work you can place a container like the Grid Layout Panel in the Html tab of the Toolbox in the user control. And you can add a public property called Style for the web user control. When the user edit this property, the user control in turn edits the style property of the panel accordingly. Anonymous wrote: while making the web user control the controls that i was adding to it could not be positioned by me.they just kept on sticking to the left hand side of the page Because the web user control only supports the FormLayout, but not the GridLayout, so if you want to position the child controls in the user control, you can use the Html Grid Layout Panel as a container and place all the controls in there.
-
Anonymous wrote: how to position a web user control.i have changed the layout of the page to flowlayout.still i cannot place the control properly The web user control by default does not support the absolute positioning, so if the web page uses the GridLayout, you cannot move the user control. If you switch the layout to the FlowLayout, the designer will arrange the controls on the web page in the order they appear, and you are not able to freely move the element. For more information, you can see the pageLayout Property[^] In this case, if you want to move the user control in the design view while the web page uses the GridLayout, you simply add the
styleattribute for the control....style="Z-INDEX: 101; LEFT: 216px; POSITION: absolute; TOP: 224px"...
Now you can move it in the designer as you would with other web standard controls. However, the style attribute does not affect when the web page is viewed in the browser. So to make it work you can place a container like the Grid Layout Panel in the Html tab of the Toolbox in the user control. And you can add a public property called Style for the web user control. When the user edit this property, the user control in turn edits the style property of the panel accordingly. Anonymous wrote: while making the web user control the controls that i was adding to it could not be positioned by me.they just kept on sticking to the left hand side of the page Because the web user control only supports the FormLayout, but not the GridLayout, so if you want to position the child controls in the user control, you can use the Html Grid Layout Panel as a container and place all the controls in there.
thank u minh, ur solution has solved my problem to quite an extent.however there is 1 trouble for me.i have put all the controls of the web user control in a panel.i also added the style property to the web user control tags so i was able to move them freely.but like u said it wont effect when the browser will render the page.what it is doing is rendering the web user control according to the panel as aligned in the web user control.so if i position the panel at 50,50 the web user control will appear at the exact location on the web page that i m using it on.so how do i pass the positioning location from the web page that i m using the web user control on to the actual web user control.also i may be required to use more than 1 web user control on the same page. more dash than cash!!! -- modified at 9:23 Friday 7th October, 2005
-
thank u minh, ur solution has solved my problem to quite an extent.however there is 1 trouble for me.i have put all the controls of the web user control in a panel.i also added the style property to the web user control tags so i was able to move them freely.but like u said it wont effect when the browser will render the page.what it is doing is rendering the web user control according to the panel as aligned in the web user control.so if i position the panel at 50,50 the web user control will appear at the exact location on the web page that i m using it on.so how do i pass the positioning location from the web page that i m using the web user control on to the actual web user control.also i may be required to use more than 1 web user control on the same page. more dash than cash!!! -- modified at 9:23 Friday 7th October, 2005
Assume you are using a grid layout panel
gridLayoutPanelas a container in the web user control, also you define a public propertyStylefor the control. The sample code to pass the style value of the control to the div element looks something like:...
protected System.Web.UI.HtmlControls.HtmlGenericControl gridLayoutPanel;public string Style
{
get
{
return gridLayoutPanel.Attributes["style"];
}
set
{
gridLayoutPanel.Attributes["style"] = value;
}
}
...chitranjan gohil wrote: i may be required to use more than 1 web user control on the same page. You can place many user controls on the same web page like you do with other asp.net controls.
-
Assume you are using a grid layout panel
gridLayoutPanelas a container in the web user control, also you define a public propertyStylefor the control. The sample code to pass the style value of the control to the div element looks something like:...
protected System.Web.UI.HtmlControls.HtmlGenericControl gridLayoutPanel;public string Style
{
get
{
return gridLayoutPanel.Attributes["style"];
}
set
{
gridLayoutPanel.Attributes["style"] = value;
}
}
...chitranjan gohil wrote: i may be required to use more than 1 web user control on the same page. You can place many user controls on the same web page like you do with other asp.net controls.
i think there is a problem here.say i have put a web user control on my web page.lets assume that i have passed the co-ordinates to the actual web user control somehow(which i havent figured out how to).so they shall be written to the stlye tag of the web user control.now if i use another web user control i'll be required to pass different co-ordinates to the web user control.now this will overwrite the previous co-ordinates.the positioning of a web user control on a web page is straightly dependant on the position of the panel as on the original web user control. regards, chitranjan more dash than cash!!!
-
i think there is a problem here.say i have put a web user control on my web page.lets assume that i have passed the co-ordinates to the actual web user control somehow(which i havent figured out how to).so they shall be written to the stlye tag of the web user control.now if i use another web user control i'll be required to pass different co-ordinates to the web user control.now this will overwrite the previous co-ordinates.the positioning of a web user control on a web page is straightly dependant on the position of the panel as on the original web user control. regards, chitranjan more dash than cash!!!
-
What does your web user control look like? How do you use multiple user controls in the web page? Code snippets could help.
the html of my web user control <%@ Register TagPrefix="jwgecc" Namespace="Janus.Web.GridEX.EditControls.CalendarCombo" Assembly="Janus.Web.GridEX" %> <%@ Control Language="vb" AutoEventWireup="false" Codebehind="DateTimePicker.ascx.vb" Inherits="TabStripTrial.DateTimePicker" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %> the code behind the web user control Public Class DateTimePicker Inherits System.Web.UI.UserControl #Region " Web Form Designer Generated Code " 'This call is required by the Web Form Designer. Private Sub InitializeComponent() End Sub Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox Protected WithEvents Calendar1 As System.Web.UI.WebControls.Calendar Protected WithEvents ImageButton1 As System.Web.UI.WebControls.ImageButton Protected WithEvents Button1 As System.Web.UI.WebControls.Button Protected WithEvents Panel1 As System.Web.UI.WebControls.Panel 'System.Web.UI.HtmlControls.HtmlGenericControl gridLayoutPanel 'NOTE: The following placeholder declaration is required by the Web Form Designer. 'Do not delete or move it. Private designerPlaceholderDeclaration As System.Object Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init 'CODEGEN: This method call is required by the Web Form Designer 'Do not modify it using the code editor. InitializeComponent() End Sub #End Region Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 'Put user code to initialize the page here If Not Page.IsPostBack Then TextBox1.Text = Now.Date End If End Sub Private Sub ImageButton1_Click(ByVal sender As System.Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click Calendar1.Visible = True Button1.Visible = True End Sub
-
the html of my web user control <%@ Register TagPrefix="jwgecc" Namespace="Janus.Web.GridEX.EditControls.CalendarCombo" Assembly="Janus.Web.GridEX" %> <%@ Control Language="vb" AutoEventWireup="false" Codebehind="DateTimePicker.ascx.vb" Inherits="TabStripTrial.DateTimePicker" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %> the code behind the web user control Public Class DateTimePicker Inherits System.Web.UI.UserControl #Region " Web Form Designer Generated Code " 'This call is required by the Web Form Designer. Private Sub InitializeComponent() End Sub Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox Protected WithEvents Calendar1 As System.Web.UI.WebControls.Calendar Protected WithEvents ImageButton1 As System.Web.UI.WebControls.ImageButton Protected WithEvents Button1 As System.Web.UI.WebControls.Button Protected WithEvents Panel1 As System.Web.UI.WebControls.Panel 'System.Web.UI.HtmlControls.HtmlGenericControl gridLayoutPanel 'NOTE: The following placeholder declaration is required by the Web Form Designer. 'Do not delete or move it. Private designerPlaceholderDeclaration As System.Object Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init 'CODEGEN: This method call is required by the Web Form Designer 'Do not modify it using the code editor. InitializeComponent() End Sub #End Region Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 'Put user code to initialize the page here If Not Page.IsPostBack Then TextBox1.Text = Now.Date End If End Sub Private Sub ImageButton1_Click(ByVal sender As System.Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click Calendar1.Visible = True Button1.Visible = True End Sub
-
Don't you define a public property called
Stylein the user control that is resposible for editing thestyleattribute of thegridLayoutPanelcontrol?ok i'll do that but what if i place 2 web user controls?which controls position settings will apply to the position of the grid panel in the actual web user control.even though i can have 2 web user controls on the web page with each control having a different position they r not rendered accordingly in the web page because of the positioning of the panel in the actual web user control. more dash than cash!!!
-
ok i'll do that but what if i place 2 web user controls?which controls position settings will apply to the position of the grid panel in the actual web user control.even though i can have 2 web user controls on the web page with each control having a different position they r not rendered accordingly in the web page because of the positioning of the panel in the actual web user control. more dash than cash!!!
May I suggest you to implement the public Style property in the web user control first? Then try to see what is going on when you place two web user controls that have different positions in a single web page. If you don't define such a public style property to override the style attribute of the grid layout panel in the user control, I can't be sure it will be working when the web page is viewed in the brower.