Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2014-10-20
4
Medium Priority
?
227 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 1000 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 1000 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
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)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

721 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