Results 1 to 5 of 5

Thread: Keep label and text box on the same line

  1. #1

    Thread Starter
    Super Moderator FunkyDexter's Avatar
    Join Date
    Apr 2005
    Location
    An obscure body in the SK system. The inhabitants call it Earth
    Posts
    7,612

    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?
    You can depend upon the Americans to do the right thing. But only after they have exhausted every other possibility - Winston Churchill

    Hadoop actually sounds more like the way they greet each other in Yorkshire - Inferrd

  2. #2
    INXSIVE Bruce Fox's Avatar
    Join Date
    Sep 2001
    Location
    Melbourne, Australia
    Posts
    7,425

    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?
    Handy References:
    MSDN Library
    ADO Tutorial Excel Tutorial MZTools (VB6)

    • Please pull down the Thread Tools menu and click the 'Mark Thread Resolved' button, or alternately edit your original post and add "Resolved" or place a in the subject when your question(s) have been answered.
    • Please use code tags [highlight=vb] your code goes here between the tags [/highlight] when posting code.

  3. #3
    Frenzied Member Lightning's Avatar
    Join Date
    Oct 2002
    Location
    Eygelshoven
    Posts
    1,611

    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
    VB6 & C# (WCF LINQ) mostly


    If you need help with a WPF/WCF question post in the NEW WPF & WCF forum and we will try help the best we can

    My site

    My blog, couding troubles and solutions

    Free online tools

  4. #4

    Thread Starter
    Super Moderator FunkyDexter's Avatar
    Join Date
    Apr 2005
    Location
    An obscure body in the SK system. The inhabitants call it Earth
    Posts
    7,612

    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.
    You can depend upon the Americans to do the right thing. But only after they have exhausted every other possibility - Winston Churchill

    Hadoop actually sounds more like the way they greet each other in Yorkshire - Inferrd

  5. #5
    Superbly Moderated NeedSomeAnswers's Avatar
    Join Date
    Jun 2002
    Location
    Manchester uk
    Posts
    2,623

    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>&nbsp;<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
  •  



Click Here to Expand Forum to Full Width