Solved

Best way to implement <div> to design a well-organized search area?

Posted on 2014-10-20
4
226 Views
Last Modified: 2014-10-20
Hi, I am working on a search page with two textboxes and four dropdowns with a submit button.

I have spent awhile learning all the specifications of code, but haven't spent very much time on the layout dynamic aspect of webpages. What is the best way to add some life to my view with <div>? Thank you.

Here is my current form in my View:

    <form id="testData">
    <div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <h3>Test Number</h3>                
                @Html.TextBox("searchTestNumber")
                  
            </div>
            <div class="col-xs-3 col-sm-3 col-md-6 col-lg-6">
                <h3>Project</h3>
                @Html.TextBox("searchProject")
            </div>
        </div>
        <div class="row">
            <br/>
            <br/>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <h3>Test Type</h3>
                @Html.DropDownList("testTypes", "All Test Types -->")
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">                    
                    <h3>Test Engineer</h3>
                    @Html.DropDownList("engineers", "All Engineers -->")
                </div>
            </div>
        <div class="row">
            <br />
            <br />
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <h3>Select Technician</h3>
                @Html.DropDownList("technicians", "All Technicians -->")
            </div>  
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <h3>Select Test Stall</h3>
                @Html.DropDownList("testStalls", "All Test Stalls -->")
            </div>          
        </div>      
        <br/>
        <br/>
    <div class="btn-group">
        <button type="submit" class="btn btn-success" value="filter" name="searchQuery">Search!</button>
    </div>   
            </div>      
    </form> 
}

Open in new window


Screenshot of current look:
screenshot of search pageThanks!
0
Comment
Question by:newbie-netter
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40392601
add some life
What do you mean?
0
 

Author Comment

by:newbie-netter
ID: 40392617
I would like to bring the dropdowns closer, and basically make it look not as widely spaced and empty. I would like it more user friendly..
0
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 40392624
Look at Boostrap inline forms using a form group

http://getbootstrap.com/css/#forms-inline

This depends on the page layout a bit
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 250 total points
ID: 40392627
To begin with that is a very 20th approach to form layout.  

The form element has its own layout elements <fieldset> and <label> not <div> and <h3>

As for "add some life", I have no idea what you are looking for, and in any case the styling should fit in with the website where the form is being used.

This might help for some form styling Ideas

Cd&
0

Featured Post

Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question