Placing DIV in form, can't set minimum width and height - html

I have the following html snippet:
<form name="foo">
<fieldset>
<legend>Legend Here</legend>
<label for="the_date">Date: </label><input type="text" name="the_date" id="the_date">
<select class="show_when_needed" id="event_state">
<option value="-1" selected="selected">N/A</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<div class="foobar" style="display: inline; border: 1px black; min-width: 20px; min-height: 15px; background: blue;"></div>
<button type="button" name="go_next" id="go_next">Go!</button>
</fieldset>
<hr />
<button type="button" id="save_object">Save Object</button>
</form>
I am trying to have the div show inline, and set a minimum width (to force it to show on screen).
The HTML above is not achieving that goal. How do I correct it so that the div appears alongside the select option control?
[[Additional Info]]
I have tried this on the latest versions of FF and Chrome - both fail to display correctly.

You need to give the element a display: inline-block, you can't set width or height of an inline element because it behaves just like a <span> or a <strong> would, taking only the space it needs.
Take a look at this updated snippet with display: inline-block

change from display: inline; to display: block;.
<form name="foo">
<fieldset>
<legend>Legend Here</legend>
<label for="the_date">Date: </label><input type="text" name="the_date" id="the_date">
<select class="show_when_needed" id="event_state">
<option value="-1" selected="selected">N/A</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<div class="foobar" style="display: block; border: 1px black; min-width: 20px; min-height: 15px; background: blue;"></div>
<button type="button" name="go_next" id="go_next">Go!</button>
</fieldset>
<hr />
<button type="button" id="save_object">Save Object</button>
</form>

Related

How to place to divs with drop down lists in them next to each other?

<div style="width: 100%; overflow: hidden;">
<div style="margin-left: 100px; width: 600px; float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
<div style=" margin-left: 350px; width: 600px; float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
<div style="margin-left: 620px; width: 600px; float: left;">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
</div>
I want the three divs with the drop down lists to be next to each other horizontally. I have tried using float, inline and inline block. How can it be done in HTML.
Use inline-block and put properly your all divs.
Here is an example:
.selection {
display: inline-block;
}
h1{
display: inline-block;
font-size: 14px;
}
<div>
<div class="selection">
<h1>Select Option</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="selection">
<h1>Select Option</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="selection">
<h1>Select Option</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div style="float:left">
dropdown1
</div>
<div style="float:left">
dropdown2
</div>
<div style="float:left">
dropdown3
</div>
This will definitely work.
Problem in your code is over width. Better is you give width into % instead of px.
First of all, your code is really badly formatted.
Your are using 7 Div but you are missing 2 Div closing tags. Close the Div tags properly.
You are also fixing the width of all 3 divisions, so if the screen size is smaller than the combined width of the 3 div, your div's will no longer be displayed horizontally. Give width relative like width:30%.
Also remove margin from the elements. Use Padding instead to give space between div's.
<html>
<body>
<div style="width: 100%; overflow: hidden;">
<div style=" width: 33%;float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div style="float: left;width: 33%;">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div style=" float: left;width: 33%;">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
</div>
</body>
</html>
Problem is with your code you have 3 unclosed div tags and a lot of left margin plus try to use width and margin both in %
[Check pen] (http://codepen.io/anon/pen/gPzJpr)
for your html
<div class="container">
<div id="firstDiv">
<h1>Select the appropriate version</h1>
<select class="" name="">
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div id="secondDiv">
<h1>Select the appropriate version</h1>
<select class="" name="">
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div id="thirdDiv">
<h1>Select the appropriate version</h1>
<select class="" name="">
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
</div>
for your css:
div{
display: inline-block;
position: relative;
margin: 5px;
padding: 15px;
}
#firstDiv{
background-color: #ccc;
}
#secondDiv{
background-color: #eee;
}
#thirdDiv{
background-color: #aaa;
}
Just like what #Maihan Nijat said, use external CSS to make it easier for you to debug.
I made a few changes to your code. The absolute easiest way to solve this problem is to ensure that the width of each element could fit next to each other on the screen. Not only does this require that the text is not too large, but also that the width you explicitly define does not overflow.
The simple solution to your problem is to place display: inline-block; on the elements which you would like side by side.
.left {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="left">
<div class="description">
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="left">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="left">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</body>
</html>

show menu list inline in html

How can i show below select list inline.
Currently the lists are just stacking one over another.
<div id="menuBar">
<form>
<select ng-model="selectOperation">
<option value="showtable">View table data</option>
<option value="inserttable">Insert table data</option>
</select>
<input type="submit" value="Submit">
</form>
<form ng-submit="formSubmit()">
<select ng-model="textbox">
<option value="emp">EMP</option>
<option value="dept">DEPT</option>
<option value="bonus">BONUS</option>
<option value="salgrade">SALGRADE</option>
</select>
<input type="submit" value="OK">
</form>
</div>
example here
http://fiddle.jshell.net/p6Lgn7bg/
Add:
form {
display: inline-block;
}
to your css. Alternatively, if you'd like to target just this form, use:
#menuBar form {
display: inline-block;
}
Your original code was close, you just have to target the form elements instead of the whole form.

How do I make this search form appear correctly on IE6 - IE8?

I'm working on an app and part of the project requirements is that the entire site be compatible with IE6 - IE8. So far, the rest of the website looks good on older browsers except for this search form I created.
This is what it looks like on modern browsers, and is what it's supposed to look like in general: ,
...but this is what it looks like on IE6: .
Does anyone have some experience with trying to make table-less layouts work on older browsers, or has run into a similar issue in the past? Basically I have containers holding each label / input, and need them to display next to each other in three's per row, with the label and input next to each other ass seen on the first image.
Below is the code regarding these elements.
EDIT: I added a few more things to both the html and css for easier deployment on your own computers.
Thanks for any help you can provide!
HTML
<div class="mid">
<h2>Search and filter by:</h2>
<!-- 1st Row Starts -->
<form action="" method="post" id="main-search-form"> <!-- containing form for search -->
<div id="search-container" align="center">
<div class="search" align="center">
<form>
<label>Keywords</label>
<input type="text" name="keywords" value="" id="keywords" placeholder="enter search terms here...">
</form>
</div>
<div class="search" align="center">
<label>Category</label>
<select>
<option value="" disabled selected>Select Category</option>
<option value="">Category 1</option>
<option value="">Category 2</option>
<option value="">Category 3</option>
<option value="">Category 4</option>
<option value="">Category 5</option>
</select>
</div>
<div class="search" align="center">
<label>Service</label>
<select>
<option value="" disabled selected>Select Service</option>
<option value="food">Food and Nutrition Support</option>
<option value="shelter">Shelter and Care</option>
<option value="protection">Protection</option>
<option value="healthcare">Healthcare</option>
<option value="pyschosocial">Psychosocial Support Services</option>
<option value="education">Formal and informal education</option>
<option value="legal">Legal Services</option>
<option value="other">Other Services</option>
</select>
</div>
</div> <!-- //.search-container -->
<!-- // 1st Row -->
<!-- 2nd Row Starts -->
<div id="search-container" align="center">
<div class="search" align="center">
<label>Age</label>
<select>
<option value="" disabled selected>Select Age</option>
<option value="">Age 1-3</option>
<option value="">Age 4-10</option>
<option value="">Age 11-14</option>
<option value="">Age 15-18</option>
</select>
</div>
<div class="search" align="center">
<label>Gender</label>
<select>
<option value="" disabled selected>Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="search" align="center">
<label>Region</label>
<select>
<option value="" disabled selected>Select Region</option>
<option value="">Category 1</option>
<option value="">Category 2</option>
<option value="">Category 3</option>
<option value="">Category 4</option>
<option value="">Category 5</option>
</select>
</div>
</div><!-- //.search-container -->
<!-- // 2nd Row -->
<!-- 3rd Row Starts Here -->
<div class="search-container" align="center">
<div class="search" align="center">
<form class="checkbox">
<label>Day</label>
<input type="checkbox" name="monday" value="Monday">M
<input type="checkbox" name="tuesday" value="Tuesday">T
<input type="checkbox" name="wednesday" value="Wednesday">W
<input type="checkbox" name="thursday" value="Thursday">R
<input type="checkbox" name="friday" value="Friday">F
<input type="checkbox" name="saturday" value="Saturday" >Sa
<input type="checkbox" name="sunday" value="Tuesday">Su
</form>
</div>
</div>
</form>
</div>
CSS
.mid {background: #258db1; color: #fff; padding: 20px 0 30px 0;}
.mid h2 {color: #fff; text-align: center;}
.mid h2, .mid h3, .mid p, .footnote p {color:#fff;}
/* SEARCH */
#main-search-form {width: 100%;}
.search {min-width: 250px; display: inline; margin:0; position:relative;}
.search select {background: #fff; height: 40px; width: 150px; margin-bottom: 30px; margin-right: 30px; position:relative; display: inline;}
.search option, {padding: 10px; position:relative; display: inline;}
.search, .search label {display: inline;}
.search input#keywords {display: inline; position: relative; min-width: 250px; background: #fff; margin-right: 20px;}
.search .checkbox input {display: inline; position: relative; width: 15px!important; height: 15px!important; margin-left: 10px!important; margin-right: 2px!important;}
.search .checkbox label {display: inline; position: relative; margin-right: 10px;}
#media (max-width: 959px) {
.search {disply: block; clear:both;}
.search input, .search select, .search input#keywords {display:block; margin-bottom: 20px; margin-top: 8px; width: 60%!important; margin-left:30px;}
.search, .search label, .search input#keywords {display: block; clear:both;}
}
Remove align='center' attribute in #search

Hide text after div using css

Here is my Div:
<div id="show" class="dataTables_length">
Show
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
entries
</div>
I want to hide this show and entries text how should I hide this using css? Not using javascript or jquery.
.someClass {
display: none;
}
Tried this? I am sure this would do it!
Where it would be this:
<span class="someClass">Show</span>
<!-- select statement here -->
<span class="someClass">Enteries</span>
I thought you wanted to hide whole of it!
Try this:
<div id="show" class="dataTables_length">
<span class="hidden">Show</span>
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
<span class="hidden">entries</span>
</div>
With CSS:
span.hidden {
display: none;
}
Despite so many answers and comments, you don't seem to be ready to accept the fact that the text needs to be wrapped in span. And that too using only css!
So, you can do a faux hide like this: http://jsfiddle.net/abhitalks/R7Yt4/1/
CSS:
div#show {
background-color: #ccc;
color: #ccc;
}
div#show::selection {
color: #ccc;
}
div#show > select {
color: #fff;
}
You can warp a span around the items you want to hide, and the hide this.
For example
<span class="hide">Show</span>
and css:
.hide{display:none;}
Your full html will look like this:
<div id="show" class="dataTables_length">
<span class="hide">Show</span>
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
<span class="hide">entries</span>
</div>
<div id="show" class="dataTables_length">
<span style="visibility:hidden">Show </span>
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
<span style="visibility:hidden"> entries </span>
</div>

How to change the size input boxes?

I've got the following input boxes in my website but I don't know how to change their width and height. Ben searching but can't find anything, seems strange though if you can't.
Any other styling code or a link to akk the properties are greatly appreciated!
HTML
<input type="text" id="FontTextBox">
<input type="number" id="FontSizeBox">
<select id="FontStyle">
<option value="1">Arial</option>
<option value="2">Comic Sans MS</option>
<option value="3">Courier New</option>
<option value="4">Georgia</option>
<option value="5">Impact</option>
</select>
Simply use CSS style - width and height:
<input type="text" id="FontTextBox" style="width: 100px; height: 100px;">
<input type="number" id="FontSizeBox" style="width: 100px; height: 100px;">
<select id="FontStyle" style="width: 100px; height: 100px;">
<option value="1">Arial</option>
<option value="2">Comic Sans MS</option>
<option value="3">Courier New</option>
<option value="4">Georgia</option>
<option value="5">Impact</option>
</select>