I have the following fiddle:
http://jsfiddle.net/neGJF/
The HTML code is as follows:
<div class="loginbarGrad">
<div style="position:relative; float:right; padding: 11px 65px 0 0;">
<input type="text" placeholder="EMAIL" value="EMAIL" class="singleField" name="kp_email" id="kp_email">
<input type="password" placeholder="PASSWORD" value="PASSWORD" class="singleField" name="kp_password" id="kp_password">
<a class="signIn">Sign In</a>
</div>
</div>
You can see the CSS at the fiddle.
I am trying to increase the box size of the inputs, and also trying to increase the size of the "sign in". I was wondering if someone could explain why when I increase the size of the font, it's not centered vertically within the login bar, and also, why it impacts the alignment of the login/password box? I'd like to be able to have it so that the boxes and sign in are not impacting each other. This may be a basic CSS function but it's eluding me, so I am hoping someone with more experience than I can help explain it.
Thank you!
Why don't you try:
.loginbarGrad > div > * {
vertical-align: middle;
}
The elements within the div within .loginbarGrad will all align to the middle of each other.
you can also float left the inputs and space them out with a bit of margin from the sides
and than you're free to increase the font-size of the .signin text just make sure to add line-height with the same height as the inputs
.signIn { font-size: 24px; line-height: 18px; }
#kp_password , #kp_email { float:left; margin: 0 5px;}
Related
I have 2 inputs, a username and a password. I've aligned them in the middle, but I can't figure out how to push them lower down the screen and stay in the middle. Can anyone send me a reference to do so?
It's hard to tell what exactly you are trying to do without the relevant code, but here's a solution that might work for you:
form {
text-align: center;
}
input {
position: relative;
top: 50px;
}
<form>
<input type="text" placeholder="name" />
<input type="password" placeholder="password" />
</form>
It sounds something you can use Flexbox for. Make the containing div a flexbox and then justify and align to the center.
My label is on one line and text is on the next line. How could I modify the css to make them both on the same line? I have tried several things such as float based on other posts but they still are on different lines.
.indentColumn {
width: 71px;
padding-top: 5%;
}
.labelColumn {
width: 71px;
margin-left: 15%;
}
.inputForm {
margin-left: 30%;
}
<div class="indentColumn">
<div class="labelColumn">
<div class="inputForm">
<span class="secNav">
<label display:inline-block; for="username">#springMessageText("idp.login.username", "User ID:")
</label>
<input class="fieldColumn" display: inline-block; id="username" name="j_username" type="text" size="20" maxlength="64" minlength="6"
value="#if($username)$encoder.encodeForHTML($username)#end">
</span>
</div>
</div>
</div>
Thanks for the help everyone.I removed all the divs, display and also the class in the textbox and now they are on the same line. The main issue seemed to be the class in the textbox because only after I removed that did they appear on the same line.
I also found that there was a form div that was set to 250px that was causing the text field to go onto the next line whenever there was a left-margin. Once I removed that, things started working better.
If you want them on the same line, then put them in a container that is wider than 71 pixels.
There isn't room in 71 pixels for them to fit side by side.
CSS
label{
display:inline-block;
}
and remove <label display:inline-block; ... /> - its wrong
Let's say I have an input field and I make its height:25px. If I increase the font-size inside that text field, although the box size is constant, it appears as it I added a whole lot of padding. When the font size is normal, it looks something like this:
BEFORE
But now when I increase the size of the font, it looks something like extra padding added something this:
AFTER
However, the padding is unchanged when I debug. I tried adding the box-sizing:border-box, but still it is unchanged. I would really appreciate if someone can help me. Thanks.
A simple demonstration can be achieved by just changing the size of the font-size.
<body>
<div>
<input type="text" value="HI"/>
<input type="text" value="HELLO" style="font-size: 900px; height: 30px; width: 100%;"/>
<input type="text" value="HI"/>
</div>
</body>
You can reset the vertical-align propertie .
Defaut is baseline , line- height is equal to font-size if not reset.
example with vertical-align: (added text and reduced some value from your funny example ;) )
input {
vertical-align:middle;
}
/* see div middle center. Notice: the tallest input gives the line-height on the line it stands */
div {
background:linear-gradient(to top,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%) ,linear-gradient(to left,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%);
<div>
<input type="text" value="HI"/> text
<input type="text" value="HELLO" style="font-size: 90px; height: 30px; width:50px;"/> text
<input type="text" value="HI"/>
</div>
I've got an issue that I'd love to solve by using CSS without resorting to statically sizing my labels (but perhaps it isn't possible).
I have two labels per line, one for displaying a "title" and the other for displaying the associated "value". Here's how I'd like it to look:
This is similar to Align labels in form next to input but I'm wanting the second element per line left-aligned instead of the first one to be right-aligned. I tried modifying the accepted answer from that question and set the width of the "title" label, but that has no effect on my output. As I mentioned above, I'd rather not hard-code a width anyways, but I was hoping to get something working before trying to find a good, long-term solution that can account for larger "title" values.
Here's my current CSS (the classes should be self-explanatory):
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
}
.propertyValue {
text-align: left;
}
And my current HTML:
<div>
<div>
<label class="propertyTitle">Hello:</label>
<label class="propertyValue">World</label>
</div>
<div>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyValue">To All of the People in the World</label>
</div>
<div>
<label class="propertyTitle">I Want:</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
The HTML can be modified as well, if that'd make it easier. To conform with best practices, I'd rather not use tables to make this work.
Here's a jsFiddle showing what I have now, what am I missing? Ideally this solution would work for IE8+ and Firefox, so unfortunately HTML5 and CSS3 elements are discouraged.
EDIT
To reiterate after the first two answers came in (that both solve my issue), is there a way to do this without hard-coding a width for my "title" labels?
grouping your divs and labels like so:
<div>
<div class="titleWrap">
<label class="propertyTitle">Hello:</label>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyTitle">I Want:</label>
</div>
<div class="valueWrap">
<label class="propertyValue">World</label>
<label class="propertyValue">To All of the People in the World</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
with the following CSS:
.propertyTitle {
display:block;
text-transform: uppercase;
width: auto;
}
.titleWrap{
display:inline-block;
}
.propertyValue {
display:block;
width:auto;
}
.valueWrap {
display:inline-block;
}
should give you the desired result without having to specify the widths
Check out this jsFiddle
try using display:inline-block on your labels
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
display: inline-block;
}
by default label is an inline element. that's why width property doesn't apply to label.
to apply the width you have to convert the label into a block level element by using display:block.
I hope it clarify the answer.
so you have to use this CSS property in your code.
.propertyTitle {
text-transform: uppercase;
display:inline-block; /*this will make the label a block level element*/
width: 300px;/*Why doesn't this have any effect?*/
}
More modern version is display: inline-flex;
i am trying to remove the white space between two imput fields for all my form elements.
i decreased the height but after that the next label goes up
can you tell me how to remove it
http://jsfiddle.net/DA9gK/18/
<div class="control-group">
<label class="control-label" for="inputEmail">Company Name</label>
<div class="controls">
<input type="text" id="inputEmail">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Contact Name</label>
<div class="controls">
<input type="text" id="inputEmail">
</div>
</div>
I don't think anyone could help You by now. You have big mess here. Update jsfiddle with HTML and CSS windows. Btw - you're writing about padding or margin styles imo in labels. (margin-bottom:0)
I think this should solve your problem, I have answered it there. Thank you. button alignment in form fields
Damn! I apologize for the uncorrect fast answer, ok I have zeroed in on your problem, and the problem lies in the css file that you are importing viz. "http://twitter.github.com/bootstrap/assets/css/bootstrap.css" and your elements are inheriting the style attribute from it, and your white space problem is exactly on 'line no 1945' where its explicitly defined
.form-horizontal .controls {
*display: inline-block;
*padding-left: 20px;
margin-left: 180px;
*margin-left: 0;
so either you have to manually override those or use the good old "!important" attribute.
PS: you have to edit the 'margin-left' attributes value to maybe 160px or something which you are comfortable with.
It's because of the padding and margin on label.control-label. Remove the top padding or bottom margin. (I think removing the margin looks better.)
label.control-label {
margin-bottom: 0;
}