I'm not great with CSS, but I want to create two select lists with a button panel between them to control the movement of selected items back and forth. I want it to look like this:
+----------------------+-+ +----------------------+-+
| | | ___ | | |
| | | |_>_| | | |
| | | ___ | | |
| | | |_<_| | | |
| | | | | |
|______________________|_| |______________________|_|
I have the following HTML:
<div id='recipientSelection'>
<div class='clientsBox'>
<select id='allClients' size='5'>
<option>dfsdfs</option>
<option>sdfsdfds</option>
<option>fsdfsdfsdfsdf</option>
<option>dsf dsfsdfsdf</option>
<option>afaf</option>
<option>t</option>
<option>sdgfhgsfh</option>
</select>
</div>
<div id='clientButtons'>
<input type='button' id='appendButton' value='>' />
<input type='button' id='removeButton' value='<' />
</div>
<div class='clientsBox'>
<select id='chosenClients' size='5'>
<option>dfsdfs</option>
<option>sdfsdfds</option>
<option>fsdfsdfsdfsdf</option>
<option>dsf dsfsdfsdf</option>
<option>afaf</option>
<option>t</option>
<option>sdgfhgsfh</option>
</select>
</div>
</div>
And the following CSS:
div#recipientSelection {
margin-left: 50px;
width: 90%;
}
select#allClients {
width: 25%;
}
select#chosenClients {
width: 25%;
}
div.clientsBox {
display: inline;
}
div#clientButtons {
display: inline;
width: 15%;
}
input#appendButton {
display: block;
}
input#removeButton {
display: block;
}
If I make the buttons block elements, their containing div starts acting like it's a block element too. I want the buttons to be block elements relative to each other, but I want the button panel to flow inline with the selects. I suspect there's something important I don't understand here. Help?
Block-level elements are not allowed within inline elements
Usually one would float the three boxes one after the other keeping them blocks
div.clientsBox {
float: left;
}
div#clientButtons {
float: left;
width: 15%;
}
I was able to accomplish the desired look with the following code. Not sure if you were trying to stay away from floats or what not, but this does work
CSS:
div#recipientSelection {
margin-left: 50px;
width: 90%;
}
select#allClients {
width: 100%;
}
select#chosenClients {
width: 100%;
}
div.clientsBox {
float:left;
width: 30%;
}
div#clientButtons {
float:left;
width: 4%;
margin-left:20px;
}
HTML
<div id='recipientSelection'>
<div class='clientsBox' style="clear:left;">
<select id='allClients' size='5'>
<option>dfsdfs</option>
<option>sdfsdfds</option>
<option>fsdfsdfsdfsdf</option>
<option>dsf dsfsdfsdf</option>
<option>afaf</option>
<option>t</option>
<option>sdgfhgsfh</option>
</select>
</div>
<div id='clientButtons'>
<input type='button' id='appendButton' value='>' /><br />
<input type='button' id='removeButton' value='<' />
</div>
<div class='clientsBox' style="clear:right;">
<select id='chosenClients' size='5'>
<option>dfsdfs</option>
<option>sdfsdfds</option>
<option>fsdfsdfsdfsdf</option>
<option>dsf dsfsdfsdf</option>
<option>afaf</option>
<option>t</option>
<option>sdgfhgsfh</option>
</select>
</div>
</div>
<html>
<head>
<style>
#recipientSelection{width:300px}
.clientsBox{width:40%}
#clientButtons{width:20%}
.clientsBox,
#clientButtons{display:block;float:left}
#clientButtons{text-align:center}
</style>
</head>
<body>
<div id='recipientSelection'>
<div class='clientsBox'>
<select id='allClients' size='5'>
<option>dfsdfs</option>
<option>sdfsdfds</option>
<option>fsdfsdfsdfsdf</option>
<option>dsf dsfsdfsdf</option>
<option>afaf</option>
<option>t</option>
<option>sdgfhgsfh</option>
</select>
</div>
<div id='clientButtons'>
<input type='button' id='appendButton' value='>' />
<input type='button' id='removeButton' value='<' />
</div>
<div class='clientsBox'>
<select id='chosenClients' size='5'>
<option>dfsdfs</option>
<option>sdfsdfds</option>
<option>fsdfsdfsdfsdf</option>
<option>dsf dsfsdfsdf</option>
<option>afaf</option>
<option>t</option>
<option>sdgfhgsfh</option>
</select>
</div>
</div>
</body>
</html>
There is a CSS property display: inline-block, but is is not supported by all browsers.
With this slightly updated code
<div id='recipientSelection'>
<div id='allClients'>
<select size='5'>
<option>dfsdfs</option>
<option>sdfsdfds</option>
<option>fsdfsdfsdfsdf</option>
<option>dsf dsfsdfsdf</option>
<option>afaf</option>
<option>t</option>
<option>sdgfhgsfh</option>
</select>
</div>
<div id='chosenClients'>
<select size='5'>
<option>dfsdfs</option>
<option>sdfsdfds</option>
<option>fsdfsdfsdfsdf</option>
<option>dsf dsfsdfsdf</option>
<option>afaf</option>
<option>t</option>
<option>sdgfhgsfh</option>
</select>
</div>
<div id='clientButtons'>
<input type='button' id='appendButton' value='>' /><br/>
<input type='button' id='removeButton' value='<' />
</div>
<div style="clear: both"></div>
</div>
You can use this valid CSS to show what you want
div#recipientSelection { width: 90%; margin: 0 auto; text-align: center; }
div#allClients { width: 25%; float: left; }
div#chosenClients { width: 25%; float: right; }
div#allClients select, div#chosenClients select { width: 100%; }
div#clientButtons { display: block; width: 15%; text-align: center; margin: 0 auto; }
Related
I need to put two select types side by side which re in different forms
Float and span are not working, I have also tried position-property but of no use.
Below is the HTML code,
form.aui .field-group {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 4px 0 4px 145px;
position: fixed;
left: 50%;
margin: 1px 0;
width: 100%
}
<div class="xyz-page-panel">
<div class="xyz-page-panel-inner">
<section class="xyz-page-panel-content">
<div id="searchType">
<form class="xyz">
<div class="field-group">
<label for="one-two-id">Search Type </label>
<select name="searchType" class="select long-field" id="one-two-id">
<option value="one">one</option>
<option value="two">two</option>
</select>
</div>
</form>
</div>
<div>
<form class="xyz">
<div class="field-group">
<label for="search-options-id">Search field </label>
<select class="select long-field" id="productName">
<option value="one">one</option>
<option value="two">two</option>
</select>
</div>
</form>
</div>
</section>
</div>
</div>
By using
.xyz-page-panel-content {
display: flex;
}
It's important that you recognize the elements in your structure that are siblings. In your case it's
<div class="xyz-page-panel">
<div class="xyz-page-panel-inner">
<section class="xyz-page-panel-content">
<!-- sibling 1 -->
<div id="searchType">
<!-- ... -->
</div>
<!-- sibling 2 -->
<div>
<!-- ... -->
</div>
</section>
</div>
</div>
For display: flex to work, you must assign this rule to the parent element of those who are meant to be next to each other. If those are not siblings, you have to use some other strategy or change the HTML structure.
You could use float instead by floating the siblings. I don't like using float for layout purposes like these, so I don't show it in action.
.xyz-page-panel-content > * {
float: left ;
}
form.aui .field-group {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 4px 0 4px 145px;
position: fixed;
left: 50%;
margin: 1px 0;
width: 100%
}
.xyz-page-panel-content {
display: flex;
}
<div class="xyz-page-panel">
<div class="xyz-page-panel-inner">
<section class="xyz-page-panel-content">
<div id="searchType">
<form class="xyz">
<div class="field-group">
<label for="one-two-id">Search Type </label>
<select name="searchType" class="select long-field" id="one-two-id">
<option value="one">one</option>
<option value="two">two</option>
</select>
</div>
</form>
</div>
<div>
<form class="xyz">
<div class="field-group">
<label for="search-options-id">Search field </label>
<select class="select long-field" id="productName">
<option value="one">one</option>
<option value="two">two</option>
</select>
</div>
</form>
</div>
</section>
</div>
</div>
Try to float the divs outside the form tags. This should work.
#searchType {
float:left;
}
Like this
I have three elements in my div dropdown list, input date and button they are all in on div , i want all of them to be in the same line , not under each other
<div id="cont">
Status :
<select id="dropdown">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
<!-- Date Picker -->
<p>Date:
<input type="text" id="datepicker">
</p>
<button type="submit" id="searchBtn" value="">Search</button>
</div>
Use CSS with display: inline-block
.inline {
display: inline-block;
}
<div id="cont">
Status:
<select id="dropdown" class="inline">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
<!-- Date Picker -->
<p class="inline">Date:
<input type="text" id="datepicker">
</p>
<button type="submit" id="searchBtn" value="" class="inline">Search</button>
</div>
Although the above works, it's better practice to put the specific elements in a span tag. Like so ...
.inline {
display: inline-block;
}
<div id="cont">
<span class="inline">Status:
<select id="dropdown">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
</span>
<!-- Date Picker -->
<span class="inline">
<p>Date: <input type="text" id="datepicker"></p>
</span>
<span class="inline">
<button type="submit" id="searchBtn" value="">Search</button>
</span>
</div>
You can add the display: inline-block property to the divs. This will make them get rendered inline with the content, but they keep their block properties, so you can still set their width and height for example.
Example:
.inline {
display: inline-block;
width: 50px;
height: 20px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
<div class="inline" id="red"></div>
<div class="inline" id="blue"></div>
<div class="inline" id="green"></div>
My favourite tutorial site about the topic: http://learnlayout.com/inline-block.html
This can be used for every element, which supports the display property. Some elements are even set to this by default, like the span element.
https://jsfiddle.net/v9qxobaf/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<style media="screen">
#cont {
margin-left: -20px;
}
.status, .date, .button {
float: left;
padding-left: 20px;
}
</style>
<body>
<div id="cont">
<div class="status">
<label>Status: </label>
<select id="dropdown">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
</div>
<div class="date">
<!-- Date Picker -->
<span> Date: <input type="text" id="datepicker"></span>
</div>
<div class="button">
<button type="submit" id="searchBtn" value="">Search</button>
</div>
</div>
</body>
</html>
wrap each in a div and display: inline-block.
I have this table which has some data (input & select etc...), When any option is not selected, the spacing is correct in all browsers, but when I click on the select the spacing will be changed only in Safari and Chrome but it won't change in Firefox.
Chrome BEFORE clicking on Select
Chrome AFTER clicking on Select
Firefox BEFORE&AFTER clicking on Select
I did not include any code because it works fine in Firefox, and I thought maybe it's some css issue regarding browsers which I should put in my styles, but if needed I will also put my codes.
UPDATE
I added also the codes:
Working jsFiddle
.rTableCell,
.rTableHead {
xfloat: left;
height: 36px;
overflow: hidden;
padding: 3px 3%;
width: 150px;
vertical-align: middle;
line-height: 120%;
display: table-cell;
}
.rTableCellId {
width: 52px;
}
.rTableCellVal {
width: 90px;
vertical-align: middle;
}
<div class="rTable">
<div class="rTableRow" style="color:#797979">
<div class="rTableCell rTableCellId ndLabel">835</div>
<div class="rTableCell ndLabel" style="width:240px;">Visits on the website that end with the purchase</div>
<div class="rTableCell ndLabel" style="width:160px;">LP thank you</div>
<div class="rTableCell rTableCellSrc ndLabel">GA</div>
<div class="rTableCell rTableCellUrlLoc" style="width:180px">
<input id="campaignStructureList0.dataSourceModelList0.urlLocation" name="campaignStructureList[0].dataSourceModelList[0].urlLocation" style="width: 145px;" class="ndInbox" type="text" value="" />
</div>
<div style="margin-top:7px; width: 150px" class="rTableCell rTableCellVal">
<select id="campaignGoalId" name="campaignStructureList[0].dataSourceModelList[0].goalId" style="width:100%">
<option value="">--- Select1 ---</option>
<option value="">--- Select2 ---</option>
</select>
</div>
</div>
<br />
</div>
One option is to set the select's containing div to position:relative;, and the select itself to position: absolute; That takes it out of the flow and thus prevents the resizing of elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.rTableCell,
.rTableHead {
xfloat: left;
height: 36px;
overflow: hidden;
padding: 3px 3%;
width: 150px;
vertical-align: middle;
line-height: 120%;
display: table-cell;
}
.rTableCellId {
width: 52px;
}
.rTableCellVal {
width: 90px;
vertical-align: middle;
}
.rTableCell {position: relative;}
.rTableCell select {position: absolute; left: 20px; top: 12px;}
</style>
</head>
<body>
<div class="rTable">
<div class="rTableRow" style="color:#797979">
<div class="rTableCell rTableCellId ndLabel">835</div>
<div class="rTableCell ndLabel" style="width:240px;">Visits on the website that end with the purchase</div>
<div class="rTableCell ndLabel" style="width:160px;">LP thank you</div>
<div class="rTableCell rTableCellSrc ndLabel">GA</div>
<div class="rTableCell rTableCellUrlLoc" style="width:180px">
<input id="campaignStructureList0.dataSourceModelList0.urlLocation" name="campaignStructureList[0].dataSourceModelList[0].urlLocation" style="width: 145px;" class="ndInbox" type="text" value="" />
</div>
<div style="margin-top:7px; width: 150px; " class="rTableCell rTableCellVal">
<select id="campaignGoalId" name="campaignStructureList[0].dataSourceModelList[0].goalId" >
<option value="">--- Select1 ---</option>
<option value="">--- Select2 ---</option>
</select>
</div>
</div>
<br />
</div>
</body>
</html>
A bit hackish, but if you're not opposed to using a little JavaScript, you can drop down the select on load and immediately close it back up.
window.onload=function(){
var sel = document.getElementById('campaignGoalId');
sel.size=sel.options.length;
sel.size = 1;
}
.rTableCell,
.rTableHead {
xfloat: left;
height: 36px;
overflow: hidden;
padding: 3px 3%;
width: 150px;
vertical-align: middle;
line-height: 120%;
display: table-cell;
}
.rTableCellId {
width: 52px;
}
.rTableCellVal {
width: 90px;
vertical-align: middle;
}
<div class="rTable">
<div class="rTableRow" style="color:#797979">
<div class="rTableCell rTableCellId ndLabel">835</div>
<div class="rTableCell ndLabel" style="width:240px;">Visits on the website that end with the purchase</div>
<div class="rTableCell ndLabel" style="width:160px;">LP thank you</div>
<div class="rTableCell rTableCellSrc ndLabel">GA</div>
<div class="rTableCell rTableCellUrlLoc" style="width:180px">
<input id="campaignStructureList0.dataSourceModelList0.urlLocation" name="campaignStructureList[0].dataSourceModelList[0].urlLocation" style="width: 145px;" class="ndInbox" type="text" value="" />
</div>
<div style="margin-top:7px; width: 150px" class="rTableCell rTableCellVal">
<select id="campaignGoalId" name="campaignStructureList[0].dataSourceModelList[0].goalId" style="width:100%">
<option value="">--- Select1 ---</option>
<option value="">--- Select2 ---</option>
</select>
</div>
</div>
</div>
Here's my code:
<div class="row">
<div class="col-md-12 table">
<div class="middle">Title XPTO</div>
<div class="middle">Display:</div>
<select class="form-control">
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
</div>
CSS:
.table {
display: table !important;
}
.middle {
display: table-cell !important;
vertical-align: middle;
}
DEMO: https://jsfiddle.net/jkf2L49e/
I want to put the text "Display:" nearest to the select element. And the select must be right (position) as possible. What is the best way to do this and make it responsive?
You should also make the <select> part of the table layout too, so just wrap it with another <div>. The markup would be like this:
<div class="col-md-12 table">
<div class="left">Title XPTO</div>
<div class="middle">Display:</div>
<div class="right">
<select class="form-control">
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
</div>
To align the text to the right, you can simply use text-align:right in the middle cell. The CSS would be like this (with tweaks that asked in the comments below).
.table {
display: table;
}
.table > div {
display: table-cell;
vertical-align: middle;
white-space: nowrap;
}
.table .middle {
text-align: right;
width: 100%;
}
.table select {
width: auto;
}
Updated demo - https://jsfiddle.net/jkf2L49e/4/
Try this complete code:
.table {
display: table !important;
}
.middle {
display: table-cell !important;
vertical-align: middle;
}
.text-right{
text-align:right;
}
Now add this class to the div that contains the text "Display"
<div class="row">
<div class="col-md-12 table">
<div class="middle">Title XPTO</div>
<div class="middle text-right">Display:</div>
<select class="form-control">
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
Try following complete code. It would be best solutions.
<html>
.wrapper
{
width:100%;
}
.leftdiv{
width: 90%;
float:left;
}
.rightdiv{
width:8%;
float:right;
}
Title XPTO
<div class="rightdiv">Display:
<select>
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
</div>
Mark answer as right answer if helpful to you.
i'm trying to create a page structure, but i have a problem with position of div.
I have 2 div (purple) into a div parent (red). And after parent div, another div (green). I want to have the green div bottom the red one.
But the browser show me the purple div not into the red one (their parent), and so the green div is not under the red and purple divs, but only under the red one.
I make a snippet to show you:
div#form {
background: red;
}
div#search {
background: yellow;
}
div.accostati {
float: left;
margin: 5px;
background: purple;
}
div#test {
background: green;
}
<div id="form">
<p> CERCA GOMME </p>
<div id="label-search" class="accostati">
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
</div>
<div class="accostati">
<form name="cercaGommeCasa" action="gommeincasa.php" method="POST">
<select name="marca">
<option value="1">1</option>
</select><br>
<select name="modello">
<option value="2">2</option>
</select> <br>
<input type="submit" value="CERCA">
</form>
</div>
</div>
<div id="test">
riga1 <br>
riga2 <br>
riga3 <br>
</div>
Have you any idea how to show the purple div into the red one, in order to have green div under both purple and red divs...
Thank you!
Add overflow:auto to div#form:
div#form {
background: red;
overflow:auto;
}
div#form {
background: red;
overflow:auto;
}
div#search {
background: yellow;
}
div.accostati {
float: left;
margin: 5px;
background: purple;
}
div#test {
background: green;
}
<div id="form">
<p> CERCA GOMME </p>
<div id="label-search" class="accostati">
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
</div>
<div class="accostati">
<form name="cercaGommeCasa" action="gommeincasa.php" method="POST">
<select name="marca">
<option value="1">1</option>
</select><br>
<select name="modello">
<option value="2">2</option>
</select> <br>
<input type="submit" value="CERCA">
</form>
</div>
</div>
<div id="test">
riga1 <br>
riga2 <br>
riga3 <br>
</div>
You can use display: inline-block for both those divs
Like this
div#form {
background: red;
display: inline-block;
}
div.accostati {
display: inline-block;
margin: 5px;
background: purple;
}
div#form {
background: red;
display: inline-block;
}
div#search {
background: yellow;
}
div.accostati {
display: inline-block;
margin: 5px;
background: purple;
}
div#test {
background: green;
}
<div id="form">
<p> CERCA GOMME </p>
<div id="label-search" class="accostati">
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
</div>
<div class="accostati">
<form name="cercaGommeCasa" action="gommeincasa.php" method="POST">
<select name="marca">
<option value="1">1</option>
</select><br>
<select name="modello">
<option value="2">2</option>
</select> <br>
<input type="submit" value="CERCA">
</form>
</div>
</div>
<div id="test">
riga1 <br>
riga2 <br>
riga3 <br>
</div>