Solved

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

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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

759 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