I want to have dropdown select box under Programs menu, but its been overridden, please refer to image attached:
Edited:
Here's my code for select box
<div class="slide" style="width:738px;">
<div class="n_title_black" style="padding-left:0;">PROGRAMS</div>
<div class="inner-main_content3" style="height:420px;padding:10px 0;">
<div style="text-align: right; margin: 0px; padding: 0px; position: absolute; top: 90px; left: -6px; z-index: 9;" id="selectGenre">
Genre:
<select onchange="this.form.submit()" id="filterGenre" name="filterGenre" style="width:220px">
<option selected="selected" value="all">All</option>
<option value="7">Info/Edutainment</option>
<option value="8">News/Investigation</option><option value="12">Life Style</option>
</select>
// php code below to loop video's thumb
</div>
</div>
</div>
For some reason I cannot simply add the box in same with Programs menu, I hope someone here can give a solution on this issue, thanks.
I guess you are not setting proper position property for element
Try this:
<div class="slide" style="width:738px;">
<div class="n_title_black" style="padding-left:0; position:relative;">PROGRAMS</div>
<div class="inner-main_content3" style="height:420px;padding:10px 0;position:ralative;">
<div style="text-align: right; margin: 0px; padding: 0px; position: absolute; top:
10px; left: 0px; z-index: 9;" id="selectGenre">
Genre:
<select onchange="this.form.submit()" id="filterGenre" name="filterGenre" style="width:220px">
<option selected="selected" value="all">All</option>
<option value="7">Info/Edutainment</option>
<option value="8">News/Investigation</option><option value="12">Life Style</option>
</select>
// php code below to loop video's thumb
</div>
</div>
</div>
Related
jsfiddle
Without modifying the html, how can I align it's label to top like in the picture:
<div class="col">
<label for="foo">Select:</label>
<select id="foo" name="select">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="col">
<label for="bar">Select any of the following:</label>
<select id="bar" name="select">
<option value="11">11</option>
<option value="22">22</option>
</select>
</div>
I can align label to the top and select to the bottom if it was in two div blocks using vertical-align, but I wanted to know without modifying the html code how can I align the label to the top and select to the bottom?
Use Display: Table-cell to make both columns have the same height:
div.col {
display: table-cell;
border: 1px solid blue;
font-size: 300%;
width: 300px;
position: relative;
padding-bottom: 40px; /* Space for the 'select'*/
}
select {
position: absolute;
bottom: 0;
left: 0;
}
Demo: (Tested in Chrome) http://jsfiddle.net/cM6Yp/
I am making a title bar for a table. It has to be contained inside a table row just because the rest of the page has been designed for a table (which I cannot change at this stage).
What I want to do is create a block inside the table row that contains some text, a few buttons (as images) and some input boxes and a dropdown selection option.
I've been playing round with divs and floating them which works well enough but the inputs and image buttons are not aligning nicely so I played with using spans instead which works kinda nicer but still not aligning as I need it to. It all needs to fit inside the blue bar and the small white gap between the the blue bar and the grey strip shouldn't be there...
Heres what it looks like at the moment...
Here is my code with the block using divs and its essentially the same with spans
<td colspan='8'> <-- this is the start of the table cell that i have to work inside
<div style="width: 100%; ">
<div class="tableHeadRow" style="float: left; background-color: #002b59; padding: 5px 5px 0px 5px; width: 678px;">
<form method='post' name='tranLookup'>
<input type='hidden' name='dates' value='range' />
<input type='hidden' name='op' value='viewTransactions' />
<span style="margin-right: 10px; color: #ffffff; ">Transaction History</span>
<div class="printerButtonWrapper flow" style="margin-right: 10px; display: inline-block;">
<a id="printButton" href="#toPrint">
<img src="images/accounts.png" alt="Printer View" class="clip printerButton" />
</a>
</div>
<div style="margin-right: 10px; display: inline-block;">
<input placeholder="From date: " type='text' id='fromDate' name='fromDate' class="textbox calText" style='width: 80px;' value="startDate">
<span style="color: #ffffff"> - </span>
<input placeholder="To date: " type='text' id='toDate' name='toDate' class="textbox calText" style='width: 80px;' value="endDate">
</div>
<div style="margin-right: 10px; display: inline-block; ">
<span style="color: #ffffff;">Transactions per page:</span>
<select name='qty' id="transactionQuantity">
<option value='10'>10</option>
<option value='25' selected="selected">25</option>
<option value='50'>50</option>
<option value='100'>100</option>
<option value='200'>200</option>
</select>
</div>
<div class="goWrapper flow" style="cursor: pointer; display: inline-block; ">
<a onclick='document.tranLookup.submit();'><img src='images/accounts.png' alt='Go' class='clip go' /></a>
</div>
</form>
</div>
<div class="blueCornerWrapper flow" style="float: right; display: inline-block; ">
<img src='images/common.png' alt='' class='clip blueCorner' />
</div>
<div style="clear: both;" ></div>
</div></td> <-- heres the end of the table cell
Frustratingly I had this all sorted once but I didn't commit code and I lost it all so now I am trying to get it back to its nice aligned state unfortunately it was a couple months ago now and I cant remember what I did...
Does anyone have some awesome mad skills to help me line these up nicely?
Let's get started by cleaning up your code.
Let's have a fiddle! http://jsfiddle.net/a3985/
Have a play with this. I gave the td a transactionSelection ID. There is no need for a div, the form will do. I have removed the img tags leaving just the links. You should have the images placed in your css like this for example:
#transactionSelection #goSubmit { background: url(image.jpg) no-repeat; }
HTML
<td colspan='8' id="transactionSelection">
<form method='post' name='tranLookup'>
<legend>Transaction History</legend>
<input type='hidden' name='dates' value='range' />
<input type='hidden' name='op' value='viewTransactions' />
<input placeholder="From date: " type='text' id='fromDate' name='fromDate' class="textbox calText" style='width: 80px;' value="startDate">
<input placeholder="To date: " type='text' id='toDate' name='toDate' class="textbox calText" style='width: 80px;' value="endDate">
<label for="transactionQuantity">Transactions per page:</label>
<select name='qty' id="transactionQuantity">
<option value='10'>10</option>
<option value='25' selected="selected">25</option>
<option value='50'>50</option>
<option value='100'>100</option>
<option value='200'>200</option>
</select>
<button onclick='document.tranLookup.submit();' id="goSubmit">Submit</button>
</form>
CSS - Place this in an external sheet if possible or in your head. Because you are dealing with legacy code I would recommend all css being restricted to #transactionSelection which is the id of the td.
#transactionSelection legend, #transactionSelection label, #transactionSelection select { margin: 2px 0 0; float: left; }
#transactionSelection input { float: left; margin: 2px 10px; }
#transactionSelection label { margin-right: 10px; }
#transactionSelection #printButton { display: block; float: left; height: 20px; width: 50px; padding: 2px; margin: 0 20px; background: #F00; }
#transactionSelection #goSubmit { display: block; float: left; height: 20px; width: 50px; padding: 2px; margin: 3px 20px; background: #F00; border: none; float: left; }
This is a good starting point if you would really like to clean this up.
Sam
Before I reveal a solution, I just want to say that it would make things way easier for you(and everyone else) if you wrote your css on a separate sheet. Also, it's best not to use tables anymore, but you probably already knew that ;)
What I did was I used display:inline-block; for the child elements, so that they are treated as text, and I used text-align:center; for the parent div. And to fix your alignment issues, I used vertical-align:middle;. I then gave the div with the blue background a greater height and now it looks good.
See for yourself.<----THIS IS THE FIDDLE
.tableHeadRow{
text-align:center;
height:30px;
}
span,.printerButtonWrapper,#printButton,.clip printButton,input .textbox calText,select #transactionQuantity,img {
display:inline-block;
vertical-align:middle;
}
I have a form that is being filled with dynamically generated dropdowns.
I have set the display property to 'table' on advice in order to keep the container centered even as the elements are added.
The problem I have is that I'm using an input type=image instead of a button to submit the form and this image will not stay in the container when the dynamic dropdowns area added. As soon as the a single dropdown is added the width increase in the div containing the form pushed the 'button' down onto the next line, while I want to keep it inline.
ps I have tried adding display: inline but this isnt working.
<div id="searchBar">
<div id="searchwrapper">
<form name="search_input">
I am looking for a
<div id="sBar1" style="display:inline;">
<select id="search_level" class="selectSearchBar" name="search_level">
<?php
echo "<option>Level</option>";
while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
echo "<option value=".$row['id'].">".$row['level']."</option>";
}
?>
</select>
</div>
<div id="sBar2" class="selectSearchBar"></div>
<div id="sBar3" class="selectSearchBar"></div>
tutor in <input type=text class="searchbox" id="location" value="Location"/>
<input type=image src="images/search_icon.png " class="searchbox_submit" name="searchbox_submit" onclick="searchLocations()" value=""></form>
</div>
</div>
and the corresponding CSS:
#searchBar{
width:940;
margin: 0px auto;
}
#searchwrapper{
display: table;
margin: 0 auto;
min-width:600px;
padding-top: 10px;
background: red;
}
#searchwrapper form {
}
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
width:200px;
height:40px;
border-radius:9px;
font-size: inherit;
}
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
}
.selectSearchBar{
height:40px;
width:137px;
display:inline;
background-image: url('../images/up_down_arrows.png');
background-position: right center;
background-repeat:no-repeat;
margin:3px 1px 0px 0px;
border-radius:9px;
}
This image is what I want i.e. the icon at the end of the row
this is the problem after each select is added dynamically:
If I were doing this, I would start with the following HTML:
<div id="searchBar">
<div id="searchwrapper">
<form name="search_input">I am looking for a
<div id="sBar1" class="selectSearchBar">
<select id="search_level1" class="selectSearchBar" name="search_level">
<option value="1">Option 1</option>
<option value="1">Option 1</option>
<option value="1">Option 1</option>
</select>
</div>
<div id="sBar2" class="selectSearchBar">
<select id="search_level2" class="selectSearchBar" name="search_level">
<option value="1">Option 1</option>
<option value="1">Option 1</option>
<option value="1">Option 1</option>
</select>
</div>
<div id="sBar3" class="selectSearchBar">
<select id="search_level3" class="selectSearchBar" name="search_level">
<option value="1">Option 1</option>
<option value="1">Option 1</option>
<option value="1">Option 1</option>
</select>
</div>tutor in
<input type=text class="searchbox" id="location" value="Location" />
<input type=image src="http://placehold.it/20x20 " class="searchbox_submit" name="searchbox_submit" value="">
</form>
</div>
</div>
On your select elements, make sure the id values are unique.
For the CSS:
#searchBar {
width: 940px;
margin: 0px auto;
border: 1px dotted blue;
text-align: center;
}
#searchwrapper {
min-width: 600px;
padding: 10px 0;
background: red;
display: inline-block;
}
#searchwrapper form {
}
div.selectSearchBar {
display: inline-block;
vertical-align: middle;
}
select.selectSearchBar {
width: 137px;
height: 40px;
border-radius: 9px;
display: inline-block;
}
.searchbox {
width: 200px;
padding: 5px;
border-radius: 9px;
font-size: inherit;
vertical-align: middle;
}
.searchbox_submit {
vertical-align: middle;
}
See working demo at: http://jsfiddle.net/audetwebdesign/Kjby6/
How This Works
The strategy is to keep all the elements in a single line, so you want to use either floats or inline-blocks or inline elements.
Let's start with the two simplest elements, .searchbox and .searchbox_submit, both of with are inline input elements, so no need to do anything, except adjust the vertical positioning with vertical-align: middle (my choice, but please adjust as you see fit).
The div.selectSearchBar is a block level element by default, so set display: inline-block and vertical-align: middle.
For the select.selectSearchBar, specify the height and border radius and use display: inline-block in case you want to add margins or padding or whatever you may need for styling.
Now, all your elements sit a horizontal line and are use vertically-align: middle to place your input elements with respect to the inline text.
These elements are enclosed by #searchwrapper, so I want this box to shrink-to-fit the content so use display: inline-block, add padding for visual formatting.
Finally, to center #searchwrapper, use text-align: center for the #searchBar parent container.
You need to increase the width of the main container, #searchBar (currently 940px) or decrease the width of the "Location" input field just enough so that there is room left for the search icon / submit button. The issue is that the current width isn't enough to fit everything on one line after the additional select dropdown is added.
You can easily decrease the width of the "Location" input since there is a lot of blank space that the text doesn't fill.
This question already has answers here:
Why do the :before and :after pseudo-elements require a 'content' property?
(5 answers)
Closed 7 years ago.
I want to add a help logo at the end of some form fields which opens a tooltip.
Everything is working, but the .helptip icon (http://img1.wsimg.com/shared/img/1/small-help-icon.gif) is coming on the left(merged) with the text. I actually want in on the right of span text, so I did .help-tip:after. But then nothing shows up at all.
Can you spot what's wrong?
<div class="advancedSearchFormSelectField fclear">
<span id="view_format_mis" class="advancedSearchFormlabel help-tip"> Include Columns in Result Set </span>
<select class="advancedSearchFormSelectBox" id="filters_include_columns" multiple="multiple" name="filters[include_columns][]">
<option value="x">X</option>
<option value="y">Y</option>
<option value="z">Z</option>
</select>
</div>
<div class="advancedSearchFormSelectField fclear">
<span id="view_format_mis" class="advancedSearchFormlabel"> Sort Column </span>
<!--No help tip here -->
<select class="advancedSearchFormSelectBox" id="filters_sort_columns" multiple="multiple" name="filters[sort_columns]">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
.help-tip {
/* Merged text at the moment. .help-tip:after not working */
cursor: pointer;
width: 10px;
height: 10px;
background-repeat: no-repeat;
background-image: url("/assets/small-help-icon.gif");
}
.advancedSearchFormSelectField{
width:300px;
margin: 5px;
height: 60px;
float:left;
}
You don't seem to be using a pseudo-element at the moment. Try this setting .help-tip to .help-tip::after and giving is content: "" and display: inline-block:
.help-tip::after {
content: "";
display: inline-block;
cursor: pointer;
width: 10px;
height: 10px;
background-repeat: no-repeat;
background-image: url("/assets/small-help-icon.gif");
}
I have a form layout that I want to display the label aligned left and the form control aligned right. I have been trying to get it to work using a float:right on the form control (in this case a ) and then applying the clearfix class to it but the clearfix does not appear to be working on my select box.
Is there something wrong here or is clearfix not expected to work on a select element?
When I do this however, the select box still extends outside the bottom of the containing div.
My Code:
<style type="text/css">
#category-select {
left: 0px;
top: 0px;
width: 350px;
border: 1px solid #666;
}
select#category {
float: right;
}
select.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
select.clearfix {
zoom: 1;
}
</style>
<![endif]-->
<div id="triage">
<div id="category-select">
Category:
<select class="ipad-dropdown clearfix" id="category" name="category">
<option value="A">A - Emergency
<option value="B">B - Urgent
<option value="C">C - ASAP
<option value="D" selected>D - Standard
</select>
</div>
</div>
If the select element is the tallest thing, why not float the label? You can also take the opportunity to make it actually a label instead of just some text in a div. Here's the CSS:
#category-select {
left: 0px;
top: 0px;
width: 350px;
border: 1px solid #666;
text-align: right;
}
#category-select label {
float: left;
margin: 1px;
}
Here's the HTML:
<div id="triage">
<div id="category-select">
<label for="category">Category:</label>
<select class="ipad-dropdown clearfix" id="category" name="category">
<option value="A">A - Emergency</option>
<option value="B">B - Urgent</option>
<option value="C">C - ASAP</option>
<option value="D" selected>D - Standard</option>
</select>
</div>
</div>
Here's the demo.
Since you're floating the select element, it won't affect the height of the containing div anymore. Try adding some padding to the containing element: http://jsfiddle.net/LZVhN/1/ (also added some relative positioning to the select)