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.
Related
How can I specify the position of the label to be above the dropdown menu?
E.g.
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit" value="Submit">
</form>
Is there any style argument in <label for="cars">Choose a car:</label> that would place it above the menu?
Thank you!
Because label is an inline element, you can't give it a size unless you change its display option to block or inline-block
<label for="cars" style="display:block;">Choose a car:</label>
MSDN explaination.
So far it worked this way:
Style should include display: inline-block and width: 10em; and the label tag should close after the select tag.
<form action="/action_page.php">
<label for="cars" style="display: inline-block; width: 10em;">Choose a car:
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select></label>
<input type="submit" value="Submit">
</form>
See here
I am still looking for a more thorough explanation to learn from!
Here's what I mean.
<div class="drop-down">
<form action="/action-page.php">
<label for="cars">Choose a Japanese car:</label>
<select id="cars" name="cars">
<option value="Toyota">Toyota</option>
<option value="Honda">Honda</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Suzuki">Suzuki</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
<option value="Mazda">Mazda</option>
</select>
<input type="submit">
</form>
</div>
and CSS:
.drop-down {
background-color:white;
padding:20px;
display:inline-block;
padding-right:70px;
padding-left:70px;
font-size:20px;
}
Now, the font-size applies to only the first child-element, which is the label element. Why is it that it doesn't apply to the rest of the child-elements, i.e. the select and input?
I have to separately target them to change their font-size. I thought that, if I target the parent element, the changes are going to cascade down to all the texts within the parent element, yet it only cascades down to the first child element.
Why is that?
Browser has it's own stylesheet (called user agent stylesheet).
If you inspect your input and select elements, you would see that browser overrides your style, since it has higher specificity:
Simply adding
input, select{
font-size: inherit;
}
solves the problem.
It would be good idea to add css reboot like this or write your own in separate file. That would solve common problems and make styles less browser-opinionated.
You can do it by defining a separate CSS for select.
select {
font-size:20px;
}
if you want the same style for both you can add it in style like .drop-down, select {} but it will make it worse as there is padding in your style for the label. it will be applied to the options also this will make your dropdown larger.
.drop-down {
background-color:white;
padding:20px;
display:inline-block;
padding-right:70px;
padding-left:70px;
font-size:20px;
}
select {
font-size:20px;
}
<div class="drop-down">
<form action="/action-page.php">
<label for="cars">Choose a Japanese car:</label>
<select id="cars" name="cars">
<option value="Toyota">Toyota</option>
<option value="Honda">Honda</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Suzuki">Suzuki</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
<option value="Mazda">Mazda</option>
</select>
<input type="submit">
</form>
</div>
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>
<select id="Semester">
<option value="Fall">Fall</option>
<option value="Spring">Spring</option>
<option value="Summer">Summer</option>
</select>
<select id="Year">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<p>
<input class="submit" value="Submit" type="submit" />
</p>
I have this code, which, on StackOverflow is on one line (except for the button). On our CMS, however, each select element shows up on a different line like this:
What can I do to force these all on to one line?
Add display: inline-block to all your elements to make them display in one line:
<select id="Semester" style="display: inline-block;">
<option value="Fall">Fall</option>
<option value="Spring">Spring</option>
<option value="Summer">Summer</option>
</select>
<select id="Year" style="display: inline-block;">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<p style="display: inline-block;">
<input class="submit" value="Submit" type="submit" />
</p>
To me, the best solution is also display: inline-block.
However, if you don't have access to the html template files on your CMS, you can try to insert the following on your .css file:
#Semester, #Year, #Year + p { display: inline-block;}
If it still doesn't work, try adding !important just before the last ;
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>