Solved

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

Posted on 2014-10-20
4
224 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
  • 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

820 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