CODEWITHSUNDEEP
asp.nethtmlcss
Hcabnettek
Hcabnettek

Reputation: 12928

How can I make two textboxes appear as one?

<asp:TextBox id="txtComment" runat="server" Columns="50" MaxLength="50" />
<asp:TextBox id="txtComment2" runat="server" Columns="50" MaxLength="50" />

I have the two textboxes above on a web form. How can I mash them together and make them appear as one text box?

Upvotes: 0

Views: 871

Answers (5)

Chris Kloberdanz
Chris Kloberdanz

Reputation: 4536

I guess I am curious as to why you would want to do this. As Thomas mentioned, it seems to go against usability. Are you looking for something like TextArea

Upvotes: 0

Skeolan
Skeolan

Reputation: 4478

Assuming what you actually want is an imperceptible difference between the first and second fields: why not make one textbox, and split it server-side; e.g.

<asp:TextBox id="txtComment" runat="server" Columns="50" MaxLength="50" Visible="false" />
<asp:TextBox id="txtComment2" runat="server" Columns="50" MaxLength="50" Visible="false"/>
<asp:TextBox id="shownTxtComment" runat="server" Columns="100" MaxLength="100"/>

private void splitComment()
{
txtComment.Text = String.Left(shownTxtComment.Text, 49); //first 50 characters
txtComment2.Text = String.Mid(shownTxtComment.Text, 50); //characters 51 thru end
}

call splitComment() in your postback function, and you'll keep the hidden fields up-to-date on every postback.

You might also consider doing the same thing client-side with javascript.

*a cleaner approach would be to remove the txtComment2 web control altogether, set txtComment length to 100, and simply split/handle the substrings on the server, but since it's not altogether clear why you actually want two separate textboxes to look like one textbox, I can't say whether that addresses your need.

Upvotes: 0

Shankar R10N
Shankar R10N

Reputation: 4966

Did you try making a user control or custom control ? Ideally, create a user control with both your text-boxes and apply the following styling so that they appear together.

First Text box

border-right-width: 0 px

Second Text box

border-left-width: 0 px

Upvotes: 2

Wilkins
Wilkins

Reputation: 800

#txtComment, #txtComment2 {margin:0;padding:0; display-inline; border:none}

Upvotes: 0

Brent Keller
Brent Keller

Reputation: 1435

You can try putting them right next to each other on the page and styling their borders so they either have no border or the touching sides have no borders.

Upvotes: 1

Related Questions