-
Feb 24th, 2015, 12:11 PM
#1
Keep label and text box on the same line
I have the following snippet to offer a filter on a Leads screen:-
Code:
@using (Html.BeginForm())
{
<p> Surname: @Html.TextBox("SurnameSearch")
Forename: @Html.TextBox("ForenameSearch")
Address: @Html.TextBox("AddressSearch")
Postcode: @Html.TextBox("PostcodeSearch")
<br />
Marketing Category: @Html.DropDownList("MarketingCategoryID", String.Empty)
Source Type: @Html.DropDownList("SourceTypeID", String.Empty)
Source Account: @Html.DropDownList("SourceAccountID", String.Empty)
Source: @Html.DropDownList("SourceID", string.Empty)
<br />
<input type="submit" value="Filter" />
</p>
}
The problem is that, depending on the width of the screen, the labels (e.g. "Postcode") do not always appear on the same line as the text box/dropdown they refer to. Is there a way of ensuring that, when it needs to "flow" an element down to the next line, it flows the label and the input control together?
The best argument against democracy is a five minute conversation with the average voter - Winston Churchill
Hadoop actually sounds more like the way they greet each other in Yorkshire - Inferrd
-
Feb 24th, 2015, 09:10 PM
#2
Re: Keep label and text box on the same line
If you can, set a min width. IE. Possibly a <div> and CSS and seting a Min width of the parent container to prevent the wrap see here?
-
Mar 2nd, 2015, 02:02 PM
#3
Re: Keep label and text box on the same line
You could put every label with its input in one div, where the div has display:inline-block. That way both element stay together
-
Mar 3rd, 2015, 02:42 AM
#4
Re: Keep label and text box on the same line
Hmm, that sounds promising, thanks. I'm working on the membership part of the system at the moment (which is slowly turning me grey ) but I'll be coming back to this soon and I'll give it a try.
Still open to further suggestions if anyone has any.
The best argument against democracy is a five minute conversation with the average voter - Winston Churchill
Hadoop actually sounds more like the way they greet each other in Yorkshire - Inferrd
-
Mar 3rd, 2015, 03:47 AM
#5
Re: Keep label and text box on the same line
You could put every label with its input in one div, where the div has display:inline-block.
Yep that works, i use that method. Here is an example that i am using it to keep a label and Telerik radcombobox on the same line, so the label immediately precedes the combo.
html
Code:
<div id="ClientSelect" class="ClientSelect"><label id="clientLabel" class="lblClientMatter">Client</label> <telerik:RadDropDownList ID="ClientDropDown" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ClientDropDown_SelectedIndexChanged"></telerik:RadDropDownList>
</div>
Style
Code:
#ClientSelect
{
position: relative;
display:inline-block;
}
Please Mark your Thread "Resolved", if the query is solved & Rate those who have helped you
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|