I am trying to put two components on the same line and have wrapped it like this. I am trying to keep this as reusable as possible and so I am trying to get as general of a solution as possible.
HTML:
<div class="form-group">
<span class="component-parent">
<label for="driversLicense.num">Driver's License #</label>
<input type="text" class="form-control" id="driversLicense.num"></input>
</span>
<span class="component-parent">
<label for="driversLicense.state">State</label>
<select id="driversLicense.state" class="form-control"></select>
</span>
</div>
CSS:
label {
display: block;
}
.component-parent {
display: inline-block;
}
.form-control {
width: 100%;
padding: 6px 12px;
}
The width: 100% is inherited from Bootstrap and if I remove it it cause all kinds of problems with rest of my layout.
The problem is the input is underneath the select and I would like them to have a little bit of space in between them. If I remove width: 100% then it looks correct and if I remove my padding then the two components touch with no space in between them but then my insertion point is in the wrong place.
Here is a fiddle showing the phenomena.
Is there some way to change the CSS of the form-group that will solve this problem? I can add an additional container(s) if need be but I would rather not change the CSS or html of either of the component-parent elements or their children.
It was an issue with the padding you were applying to the select! I added
box-sizing:border-box;
which solved this problem, you will however need to float the spans to clear the gap!
Let me know if you have another question! :) all the best!
DEMO
http://jsfiddle.net/graHw/6/
I ended up adding a new span in between the two component-parent elements. The span has a margin-left that is equal to the horizontal padding.
Here is the new fiddle
Related
I am facing a strange problem. I prepared an html page in jsfiddle and putting same code in one html in below method.
<html>
<style>
jsfiddle css
</style>
jsfiddle html code
</html>
my jsfiddle: jsfiddle
having this as test.html and opening in chrome. It shows perfect in jsfiddle but shows an extra tab (or maybe some whitespaces) before the second item ("Comments:") in div. I am not able to figure out the reason. Please help.
I would suggest you to enhance your code a little to get fields show up they way you desire.
<div class="dtl">
<div>
<b> Name:</b><span class="input"><input class="inputtxt" type="text"></span>
</div>
<div style="clear:both;"></div>
<div>
<b> Comments:</b><span class="input"><input class="inputtxt" type="text"></span>
</div>
</div>
JSFiddle: JSFiddle
Just use this small reset to remove any built-in styles from the browser. This removed any and all built-in spacing in your fiddle.
* { margin: 0; padding: 0; box-sizing: border-box }
Make this changes to your CSS and see if it solves the problem:
/* add these lines */
label {
display:block;
float: left;
}
span.input {
display: block;
float:right; /* ADD THIS LINE */
overflow: hidden;
padding-right: 1px;
padding-left: 1px;
}
and then:
span > input.inputtxt{ /* CHANGE THIS AS WELL */ width: 290px; height:12px; border:none;}
And apply a <label></label> for each input.
<div class="dtl">
<b><label>Name:</label></b>
<span class="input"><input class="inputtxt" type="text" /></span>
<b><label>Comments:</label></b>
<span class="input"><input class="inputtxt" type="text" /></span>
</div>
It seems to get better in the JSFiddle. Try it out.
Check the results: JSFiddle Result
It looks like the jsfiddle has line-height:normal as default and the local html has line-height:1.
The tab comes from the different heights of the input elements, and since you are floating, the second label floats after the first horizontally because there is still vertical space before a new line is needed.
add span.input { line:height:1 } to see consistent results.
I'm using Bootstrap and I'm having trouble placing two divs next to each other. I've tried display: inline and that makes it look even worse. I created a div to hold them both called steven-and-leah and got the same result, however if use a specific type of inline such as inline-flex I get a result which near what I want, but they are too close together and cannot be separated when using that.
I'm sorry if this isn't specific enough, but I don't notice anything that even effects the code.
.steven-and-leah{
display: inline;
}
.team-bx{
width: 500px;
height: 570px;
margin-top: 80px;
border: 5px solid #FFF;
border-radius: 120px;
padding: 20px 0px 20px 0px;
overflow: hidden;
background-color: #111924;
}
You're using bootstrap wrong here. Remember that the strength of Bootstrap is on its grid.
If you want to place two divs next to each other, you simply have to apply a col-£-6 to them (£ being the device you want to target). For example:
<div class="row">
<div class="col-md-6">div number one!</div>
<div class="col-md-6">div number two!</div>
</div>
This will automatically place both divs next to each other as if they were "inline", with the huge plus of them being automatically responsive.
If this is not your question, please reframe it.
You can find great examples in their getting started site
Did you try with this. check the demo
.steven-and-leah > * {
display: inline-block;
}
Demo
You better use grid system if you have specific pattern in mind (as Obed mentioned). But if you want to have a bit of freedom use d-inline
<div class="d-inline p-2 bg-primary">box1</div>
<div class="d-inline p-2 bg-dark">box2</div>
You should manage the spacing and alignment by your own and you should not wrap the divs with class="row" div to allow d-inline to take effect.
Edit: Mistake has been explained. I will look into other ways to build multi-column forms with input-elements, hopefully in a 2016 fashion.
I'm new to HTML/JS/CSS. I did the w3school tutorials and am no stranger to so.com either - but while this is a great side, applying already posted solutions to my problem is rather tricky for a beginner.
Task: building simple websites for basic database access (think of VBA-Forms in Access, if no other means were available). IE11 will be used as Browser in a protected company environment.
Layout-wise there are to be several Rows with Labels in Col1, and one to X input-elemets in Col2 - ColX+1.
Problem: Oddly, labels and inputs behave different, even if assigned to the same class.
"Appending" labels works in the expected way (new labels are "appended" to the right in new columns/new cells).
"Appending" input-elements displayes them in the same row and column as the last one (see code for example. basically: the height of the label-cell in column1 now spans 2 cells in column2).
I understand setting up forms in CSS tables is consideres bad practice.
I am not yet sure if this also applies if i need a multi-row, multi-column (3+) layout. I figure non-tabular solutions get messy rather fast. The Examples i found on w3school and in stackoverflow-comments use at most two columns, one for the label and one for the input-element.
To my undestanding, "display: table-columns" can only be used to format cells with a certain position in each row (like in a spreadsheet), and not to actually "add" a empty column that can be filled.
https://jsfiddle.net/9cjf1465/
The CSS: apart from some formatting, I create a class for forms (table), paragraphs (row), and individual labels/input (cell). Took out most of the formatting-stuff.
<style type="text/css">
div.mydiv {
background-color: #f2f2f2;
padding: 20px;
}
form.myform {
display: table;
}
p.myrow {
display: table-row;
}
/* class can used for both label and input? */
.mycell {
display: table-cell;
}
label {
text-align: left;
vertical-align:middle;
padding: 5px;
}
input{
vertical-align:middle;
width: 100%;
padding: 8px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 2px;
box-sizing: border-box;
}
</style>
The Example-HTML, simplified: Note how Inputs and Labels behave differently as mentioned above - despite being assigned to the same class.
<div class="mydiv">
<form class="myform" id="form1" onsubmit="event.preventDefault();getPnr()">
<p class="myrow">
<label class="mycell" for="pnr">Label 1</label>
<input class="mycell" type="number" id="pnr" placeholder="Pnr" required >
<input class="mycell myimp1" type="submit" id="btn1">
</p>
<p class="myrow">
<label class="mycell" for="pnr">Label 2</label>
<label class="mycell" for="pnr">Label 3</label>
<input class="mycell" type="number" id="pnr" placeholder="Pnr" required >
</p>
</form>
</div>
I hope my question came across right and I kept myself short enough - already lookin forward to get some suggestions!
Cheers,
Martin
As far as i know labels & inputs cannot be treated the same.
Labels are a container element (more info).
Elements which self close, such as inputs, images, etc are not containers and therefore cannot behave like a <td> or have display:table-cell;
This question covers the same area, stating that use of display:table-cell; with an input would be experimental according to W3.org
The problem
I cannot alter the way in whcih the HTML below is output, but I do need to amend the way in which it is displayed. I know I can achieve my desired results with jQuery, but I'd like to do it with pure CSS possible?
What exactly I need to do
I need to show the input from the HTML below, but the label itself is superfluous. The tag can stay or go, I'm not bothered by that, but Username and <br> need to be gone.
Obviousely I cannot use label[for="user_login"]{ display: none; }, as this will fail because it will hide everything within the selector.
The original HTML
<label for="user_login">
Username
<br>
<input id="user_login" class="input" type="text" size="20" value="" name="log">
</label>
The desired HTML
<label for="user_login">
<input id="user_login" class="input" type="text" size="20" value="" name="log">
</label>
jQuery approach
$(document).ready(function(){
var username_label = $('label[for="user_login"]'),
username_input = username_label.find('input');
username_label.html(username_input);
});
Why I don't want to use jQuery
The login for in question is displayed differently depending on screen size. On smaller devices I requre the labels hidden (to save space), while on larger screens the label should still be visible. Using the jQuery approach will remove the labels in both cases.
While I know I can check the screen widht on load, and then use resize event (if necessary), should the screen size change (on a tablet, portrait to landscape for example) the labels could be removed and then not visible when they need to be.
Question
Can I achieve this result (or similar) with pure CSS?
Try this css:
label {
visibility:collapse;
}
label input {
visibility: visible;
}
Here is a jsfiddle:
http://jsfiddle.net/entgqjzk/
I modified the css I found at Hide text node in element, but not children
edit:
This doesn't remove the whitespace as you indicated.
I can't come up with anything better than a combination of jQuery and css, it's not the most beautiful code ever but it does work for this situation in which you don't have control over the html:
http://jsfiddle.net/entgqjzk/2/
The css class "hidden-for-mobile" could be used for example combined with a seperate stylesheet for mobile devices (or pseudo selectors for different screen sizes)
Have you tried pseudo classes? http://css-tricks.com/a-call-for-nth-everything/
Thanks to #geoffreydv for the idea of using visibility.
In conjunction with that, I was able to use the CSS below to effectively hide the whitespace occuped by the text within the label.
body.login #loginform label[for="user_login"],
body.login #loginform label[for="user_pass"]{
display: inline-block;
height: 50px;
position: relative;
visibility: collapse;
width: 300px;
}
body.login #loginform input#user_login,
body.login #loginform input#user_pass{
margin: 0;
position: absolute;
top: 0;
visibility: visible;
width: 300px;
}
Lately i've been through a lot of times on a single situation problem:
I have a text input element in a web formulary, inside a bigger div with defined width.
Inside that bigger div, i'll put a span text like "Name: " and then i'll put the input.
I want the input to auto become as much as wider the space of the div that the span is not using.
The code would be something like this:
<div>
<span>Name:</span>
<input type="text" name="name" />
</div>
And the CSS:
div {
width: 200px;
display: block;
}
span {
display: inline-block;
font: 11px 'Lucida Sans', Verdana, Arial;
}
input {
height: 20px;
width: auto;
display: block;
}
I've been doing some research, but i seem unable to find a precise solution for this problem.
So far i've been skipping this problem by putting a inline style defining a different width for each element. But if i change the font, size, or whatever, it'll explode.
I don't like to build a fortress wall and leave it full of holes for snipers. That's why i'm looking for help :)
If you guys have any suggestion, solution or workaround way, I'd be glad to know. =D Thanks.
Semantically it's better to use label tags for this purpose:
<label>Name:</label>
Concerning your question, take a look at the CSS3 flexible box model: http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
Or if you prefer a video: http://www.youtube.com/watch?v=-OubGOxKa5I
At the time of writing, Mozilla and Webkit support this and there is a fallback for other browsers: https://github.com/doctyper/flexie
Sorry, but it's not possible with that markup. Actually the only way to do it is to shudder use tables (or display: table-cell, etc but that doesn't work in IE7 or earlier). It also generally looks better to have all the inputs aligned, don't you think?
Change display: block to display: inline for input and I think it should work.
Here is an example
http://jsfiddle.net/KYvzM/