I want to set select and link in one line, but select is upper.
<div data-role="fieldcontain">
<a id="back" href='#' data-role="button" data-inline="true" class="ui-btn-left" data-theme="b" data-icon='arrow-l'>Back</a>
<select name="menu" id="menu" data-inline="true" data-theme="b" data-native-menu="false">
<option value="menu" selected="true">Menu</option>
<option value="index.html">Home</option>
<option value="services.html">Services</option>
<option value="technology.html">Technologies</option>
<option value="how_we_work.html">How we work</option>
<option value="about.html">About Us</option>
<option value="careers.html">Careers</option>
<option value="contacts.html">Contacts</option>
</select>
</div>
What can I do?
Thanks
It works fine for me in FF8. What browser are you using?
Try setting your <select> to display: inline in your CSS. The <a> is inline by default, so doesn't need setting.
select#menu {
display: inline;
}
Related
I have three dropdowns in my page, two of them are shown perfectly while the other one is not appearing, and when looking at the element in page it gets loaded with the "style="display: none;" value even if I'm forcing it with style="display: inline;".
Here's the code:
<div class="dropdown">
<div id="myBrokenDropdown" class="dropdown-content">
<select class='filter' id="notWorkingOne">
<option value=""> Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
<!--select button-->
<div id="select1" class="dropdown-content">
<select class='filter' id="select1Works" data-col="1">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
<div id="select2" class="dropdown-content">
<select class='filter' id="select2Works" data-col="5">
<option value=""> Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
</div>
Also, in jquery I can hide/Show the two dropdowns with the following code:
$('#select1Works').hide();
$('#select2Works').hide();
$('#notWorkingOne').hide();
$(document).ready(function() {
$("input[type='radio']").on('change', function() {
$("#select1Works").toggle($("[name=radioButton]").index(this) === 0);
$("#select2Works").val("").trigger("change");
$("#select2Works").toggle($("[name=radioButton]").index(this) === 1);
$("#select1Works").val("").trigger("change");
if ($('#select1Works').is(':visible') || $('#select2Works').is(':visible')) {
$('#notWorkingOne').show();
}
})
});
Why is the "myBrokenDropdown" not showing?
Thank you very much
It was an issue with a selector in my actual code, I missed a '#'.
I have a select element in my form. When i zoom in or zoom out my browser ,the select element gets resized and changes its position. Kindy help me out. I will attach the code also.
<div class="form-group">
<select class="form-control" style="height:50px;" id="search_color">
<option value=" " hidden>Color</option>
<option value="0">Red</option>
<option value="1">Green</option>
<option value="2">Blue</option>
<option value="3">Yellow</option>
<option value="4">Orange</option>
<option value="5">Purple</option>
<option value="6">Grey</option>
<option value="7">Multicolor</option>
</select>
</div>
Basically, bootstrap classes have some behavior that varies depending on the size of the screen. In your case, You can actually apply a basic HTML center tag to override bootstrap class behavior and retain your dropdown option to the center of the screen.
Try this one:
<div class="form-group">
<center>
<select class="form-control" style="height:50px;" id="search_color">
<option value=" " hidden>Color</option>
<option value="0">Red</option>
<option value="1">Green</option>
<option value="2">Blue</option>
<option value="3">Yellow</option>
<option value="4">Orange</option>
<option value="5">Purple</option>
<option value="6">Grey</option>
<option value="7">Multicolor</option>
</select>
</center>
</div>
<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>
<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>