Member Avatar for vuyiswamb

Good Day All

I have a Dynaically created a Textbox and i have a Dynamically created DIV. So what i want to do is to Find the Position of the Textbox and and Dynamically when this textbox is created , please a Div just next to this textbox. So my plan was to find the position of the textbox and next to it using the position of the textbox and calculate the position of a Div.

Thanks

  • 4 Contributors
  • 6 Replies
  • 288 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by vuyiswamb

Dani AI

Generated

Given created the TextBox and DIV in code‑behind, there are two reliable patterns that answer the original goal (place a DIV next to a dynamically created textbox): prefer layout/CSS (server-side) or measure-and-place (client-side). 's placeholder idea and ' client-side suggestion are both valid — the choice depends on whether the adjacent DIV must be absolutely positioned or can participate in normal flow.

The CSS/server-side pattern (recommended when possible) creates a small wrapper and lets the browser handle placement. This avoids brittle pixel math and stays responsive:

<style>
.wrapper { display: inline-flex; align-items: center; gap:8px; }
.adjDiv  { /* style for the box next to the textbox */ }
</style>
// create in Page_Init so IDs stay stable across postbacks
var wrapper = new Panel(); wrapper.CssClass = "wrapper";
var tb = new TextBox(); tb.ID = "dynTextBox1";
var adj = new Panel(); adj.CssClass = "adjDiv";
adj.Controls.Add(new LiteralControl("Adjacent content"));
wrapper.Controls.Add(tb); wrapper.Controls.Add(adj);
PlaceHolder1.Controls.Add(wrapper);

If absolute placement is required (overlay or floating away from normal flow), use client-side measurement with getBoundingClientRect(). Replace SERVER_CLIENT_ID with the control's client id (emit it from server code or use ClientIDMode=Static):

window.addEventListener('load', function() {
  var tb = document.getElementById('SERVER_CLIENT_ID');
  if (!tb) return;
  var r = tb.getBoundingClientRect();
  var d = document.createElement('div');
  d.className = 'adjDiv';
  d.style.position = 'absolute';
  d.style.left = (r.right + window.pageXOffset) + 'px';
  d.style.top  = (r.top   + window.pageYOffset) + 'px';
  d.innerText = 'Adjacent content';
  document.body.appendChild(d);
});

Important notes/troubleshooting:

  • Recreate dynamic controls in Page_Init on every request so ClientID stays predictable and viewstate/events work.
  • For UpdatePanel partial postbacks, register or re-run positioning script with ScriptManager.
  • Prefer CSS/flex/inline-block for maintainability; absolute positioning breaks on small screens and when the page scrolls.
    This ties ' and 's advice into concrete patterns for WebForms server-side control creation and client-side placement.

Recommended Answers

All 6 Replies

Member Avatar for hericles

Wouldn't this be more easily done using javascript if you just need to display the div? Does your text box or div have server-side code attached to it which makes client side inappropriate?

Member Avatar for dnanetwork

are generating dynamic textbox using javascript or from code behind...?

Member Avatar for vuyiswamb

i do it from code Behind

Member Avatar for Tellalca

Why not use placeholders?

Member Avatar for hericles

I'd be tempted to do this client side in javascript. If need be you can call a function at the bottom of the page (to ensure everything has finished loading) and alter the position of the div if necessary.

Of course, you could make this work (probably, I haven't tried it) through good use of CSS and applying the right class to the div and text box when you create them

Member Avatar for vuyiswamb

hi guys i used another way. so for now its fine.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.