Solved

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

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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Read about why website design really matters in today's demanding market.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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)

707 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now