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;
}
Related
I have rows consisting of two elements that I'd like to align by the second element (they're input boxes, and it's nice to have them all line up vertically). The solution I behaves exactly how I want when the elements fit onto one line, I don't want to be using the width of the first element to set the horizontal position. This starts to act weird in small windows or on mobile (when the width of the label is more than 45% of the screen it starts wrapping again).
What would be the proper way to achieve the same result?
FIDDLE
HTML:
<label>Test</label>
<input type="number" value="0">
<br />
<label>Test longer</label>
<input type="number" value="0">
<br />
<label>Test longest text</label>
<input type="number" value="0">
<br />
CSS:
label {
display: inline-block;
float: left;
width: 45%;
text-align: right;
padding: 2px;
margin: 2px;
}
input {
display: inline-block;
float: left;
width: 200px;
padding: 2px;
margin: 2px;
}
You can use flex properties to display rows and columns and remove float
<div class="flex">
<label>Test</label>
<input type="number" value="0">
</div>
<div class="flex">
<label>Test longer</label>
<input type="number" value="0">
</div>
<div class="flex">
<label>Test longest text</label>
<input type="number" value="0">
</div>
in css
.flex {
display:flex;
}
label {
width: 45%;
text-align: right;
padding: 2px;
margin: 2px;
}
input {
width: 200px;
padding: 2px;
margin: 2px;
}
#media(max-width:200px){
.flex{
display:block;
}
}
and use media queries for screen below 200px(or your preference) to make the text and input appear vertically
Currently the page is just two divs sitting side by side inside a containing section. I had two trailing <br> tags on qtr_calc, which were pushing down sem_calc. Shouldn't qtr_calc be able to have as many newlines at the bottom as I like without affecting sem_calc? If not, is there a workaround?
Somebody had a similar issue here, but there no explanation of why this is able to occur and the answer that helped them does not help me.
The divs' html:
<section id="content">
<div id="qtr_calc">
<label for="qtr_cred_hrs">Quarter class credit hours:</label><br />
<input type="text" id="qtr_cred_hours" /><br /><br />
<label for="qtr_grade">Letter grade:</label><br />
<input type="text" id="qtr_grade" /></div>
</div>
<div id="sem_calc">
<label for="sem_cred_hrs">Semester class credit hours:</label><br />
<input type="text" id="sem_cred_hours" /><br /><br />
<label for="sem_grade">Letter grade:</label><br />
<input type="text" id="sem_grade" /></div>
</div>
</section>
The divs' CSS:
#qtr_calc {
float: left;
margin: 3em;
padding: 2em;
border: 1px double #F2F2F2; /* inside border */
outline: 1px solid #BFBFBF; /* outside border */
}
#sem_calc {
float: left;
top: 0;
margin: 3em;
padding: 2em;
border: 1px double #F2F2F2; /* inside border */
outline: 1px solid #BFBFBF; /* outside border */
}
And here's a pastebin with the rest of the page, in case it helps somehow.
You have an extra closing div tag here:
<input type="text" id="qtr_grade" /></div>
Demo
Remove extra closing Div's and top:0; and try to give them width say 20%. That should solve you problem.
In the example below:
I want the textbox to fill all available space. The problem is the dropdown width cannot be fixed, since its elements are not static. I would like to solve this with just css (no javascript if possible).
I have tried the solutions proposed to similar questions without any luck :(
Here is the fiddle: http://jsfiddle.net/ruben_diaz/cAHb8/
Here is the html:
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">General</option>
<option value="2">Fruits</option>
<option value="3">Ice Creams</option>
<option value="4">Candy</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
And here the css:
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-block;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
Updated demo (tested fine in IE7/8/9/10, Firefox, Chrome, Safari)
Float the left and right elements.
In the HTML source code, put both of the floated elements first (this is the most important part).
Give the middle element overflow: hidden; and an implict width of 100%.
Give the text box in the middle element a width of 100%.
.category_dropdown_container {
float: left;
}
input[type="submit"] {
float: right;
...
}
.resizable_text_box {
padding: 0 15px 0 10px;
overflow: hidden;
}
.resizable_text_box input {
width: 100%;
}
<div class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
...
</select>
</div>
<input name="commit" type="submit" value="Ask!" />
<div class="resizable_text_box">
<input id="question_text_box" name="question[what]"
placeholder="Write a query..." type="text" />
</div>
The relatively recent 'flex' display css property solves this problem for you:
All you need to do is change form's display to inline-flex, give .resizable_text_box flex-grow: 100; and give #question_text_box width: 100%
Full example from the OP:
<style>
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-flex;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
flex-grow: 100;
}
#question_text_box {
width: 100%
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
</style>
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">Options</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
Flex-box lets you do what you wanted to do with css for 15 years - its finally here! More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Change some of those <span> elements to <div> elements; then float:left the division around your dropdown; then give the one of the right an overflow:hidden and the input element inside it a width:100%;.
Here's an example. Here it is again with a bigger drop down.
Except that screws up the submit button. So give the #form_wrapper non-static positioning (position:relative) and position the submit button absolutely. See this fiddle and this one.
I'm new to the play framework and am trying to add a form to the top of my page with a simple username and password field and a submit button. I'm using the play form helper, but it won't allow me to have these fields side by side ,instead it always puts them on top of one another. I keep trying to change the CSS, but no luck.
Here's the relevant part of the HTML
<header id="top_header" class=rounded>
<div id="logo">
<h1>#message</h1>
</div>
<div id="login_pane">
<div id="login">
#helper.form(action=routes.Test.testFunction(), 'id->"login_form"){
#helper.inputText(loginForm("username"), 'id->"username", '_label->"Username")
#helper.inputPassword(loginForm("password"), 'id->"password", '_label->"Password")
<input type="submit" value = "Enter" id="login_button">
}
</div>
</div>
</header>
And the CSS
#top_header{
background: yellow;
height: 30px;
}
#logo{
float: left;
background: green;
width: 200px;
}
#login_pane{
float: right;
background: blue;
width: 500px;
}
#login{
float: left;
background: red;
}
#username, #password, #login_button{
display: inline;
}
By the way, I just use the ugly background colours to see where things are positioned.
I've tried putting display: inline just about everywhere but it's having no effect. Has anybody any ideas on how to position the form elements side by side?
If you check the HTML source you can notice that the form-helper generating HTML like this (maybe similar not exactly identical) :
<form action="/test/testFunction" method="GET" id="login_form">
<dl class=" " id="username_field">
<dt><label for="username">Username</label></dt>
<dd>
<input type="text" id="username" name="username" value="" >
</dd>
</dl>
<dl class=" " id="password_field">
<dt><label for="password">Password</label></dt>
<dd>
<input type="password" id="password" name="password" >
</dd>
</dl>
<input type="submit" value = "Enter" id="login_button">
</form>
So, you can define your css based on dl, dd, or dt element to make it displayed side by side. This is simple but not best sample (I only tell you the basic) :
#login_form dl {
padding: 10px;
float: left;
}
#login_form dd {
margin-left: 0px;
}
Hope this useful for you friend.. :)
I am trying to create tableless Form using and tags, im stuck.
I want the form look like this:
I should be able to set the width of textbox, text area and select in CSS.
Make each row a <p> containing a <label> and an <input>, both display: inline-block with preset width. (The <label> should be text-align: right)
The buttons can be float: right.
This is a good walk through: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
check out working example here:
http://jsfiddle.net/bRm3P/2/
<form>
<label>To: <input type="text" /></label>
<label>Subject: <input type="text" /></label>
<label>Message: <textarea></textarea></label>
<div class="submit-container">
<input type="submit" value="submit"/><input type="submit" value="submit"/>
</div>
</form>
<style>
form {
width: 500px;
}
label {
display: block;
text-align: right;
margin-bottom: 4px;
}
label input,label textarea {
border: 1px solid #DEDEDE;
width: 80%;
vertical-align: top;
}
.submit-container {
padding-top: 4px;
text-align: right;
}
</style>
A nice semantic layout would be one of the following:
<ul>
<li><label>To <input></label></li>
...
</ul>
Or with a dl (more common):
<dl>
<dt><label>To</label></dt><dd><input></dd>
...
</dl>
You will find lots of ways to layout the latter if you google for: definition list layout form