text-align: right has margin or buffer in Chrome - html

I'm trying to simply align a set of text and <input> elements to the right, so that the left side of the inputs always aligns at the same location (they are the same width, so what's really happening is the right side is aligned to the right side of their container), and the left side of the label text is jagged.
It's not ideal for a large form, but for what I need, it looks better that way.
Here's the HTML and CSS (also at this jsfiddle):
HTML:
<div id="pullthrough-control-panel">
<div class="float-l right-text" id="pullthrough-range-panel">
<h3 class="center-text">Date Range</h3>
Start: <input type="text" name="rangestart" />
<br />
End: <input type="text" name="rangeend" />
</div>
</div>
CSS:
.float-l{
float: left;
}
.right-text{
text-align: right;
}
.center-text{
text-align: center;
}
#pullthrough-control-panel{
height: 6em;
padding: .25em;
}
That's it. Now, the real problem comes into play when I try to go cross-browser with the page. As usual, Firefox works as expected. The problem is with Chrome. The lower input ("End") juts out to the right of the upper one. There's no reason this should be happening.
If you have both browsers, you can check it out at the jsfiddle I posted above.
Is this a bug in Chrome's CSS engine? Is there something happening that I'm not aware of?

you can simply change <br/> to <p> and it will work.
http://jsfiddle.net/Jd7PR/

You're doing it all fine, just move the <br /> in the upper line without spaces after the input:
Start: <input type="text" name="rangestart" /><br />
End: <input type="text" name="rangeend" />
jsFiddle demo
That's it!

Here's my demo for you. Seems like chrome didn't like the </br>
DEMO

Do you need to have both a class and an id on one div? (I don't want to say you shouldn't because I'm not sure about that, but I haven't encountered that before)
You could give each input a class/id and then set the css for that class/id as: float:right; - Alternatively you could use position:absolute; - Personally, I would put both pairs in parent divs and use display:inline; and float:right; on the parent divs.

Related

Center aligning buttons text inside div dynamically?

Tried a lot of solutions I found, but nothing seems to work for me.
I want to center text inside button dynamiclly, no matter the width and height of the button, the text should always be in the center, I'm sure there's a good solution for this. I always find myself struggling with it.
<div class="gform_button">
<input type="submit" class="gform_button" value="Submit" />
</div>
Tried almost everything, I don't understand why the following code doesn't work:
.gform_button{
text-align: center;
vertical-align: middle;
}
If someone please can give me a good explanation of how it works and why the two above lines doesn't centering the text even thou it seems that this is their purpose. I always struggle with centering things.
Thanks in advance!
By default, text inside input[type='submit'] should always be center-aligned (vertically/horizontally). Double-check your styles, maybe you broke the margin/padding of your div/input element.
Please try this:
HTML:
<div class="gform">
<input type="submit" class="gform_button" value="Submit" />
</div>
css:
input.gform_button{ background-color:blue;color:white}
Also jsfiddle for you:
https://jsfiddle.net/bnhf5hg9/5/
<style type="text/css">
.gform_button{
text-align: center;
vertical-align: middle;
padding:3px;
}
</style>
<div>
<input type="submit" class="gform_button" value="Submit" />
</div>

Space appears above form (in Chrome only)

I've got a form, which has a legend and a set of fields. I'm using Bootstrap 2.x to style it. For some reason, space appears above the form, but in Chrome only (it renders fine in IE10 and Firefox). I've pared it back to just the basics to demonstrate the issue I'm having:
<form>
<fieldset>
<legend>Legend</legend>
<div class="control-group">
<!-- This div results in the space appearing above the form -->
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" />
</div>
</div>
</fieldset>
</form>
If I remove the class="control-group" from the div wrapping the input field, the space magically disappears, despite seemingly having nothing to do with this issue. I've checked all the margins and padding of everything in Chrome, and there's nothing, so I don't know where this spacing is coming from. I need to use this class on these field divs, as I'm implementing a horizontal form. I'm pulling my hair out trying to work out how to fix this issue - any ideas? Here's a jsfiddle to demonstrate: http://jsfiddle.net/christhecoder/kDrVH/3/
Any help would be much appreciated!
http://jsfiddle.net/kDrVH/10/
#import url("http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css");
legend+.control-group{
margin-top:0px;
}
you get 20 margin from this: legend+.control-group
This is because bootstrap CSS rules for <legend> has margin-bottom:20px
Just add a CSS rule:
legend {
margin-bottom: 0px;
}
Also you can add this only to your legend label:
<legend style="margin-bottom: 0px;">
// Whatever you want
</legend>
JSFIDDLE DEMO
Instead of
legend+.control-group {
margin-top: 20px;
}
Use this.
It will preserve your current layout and remove space above the form.
legend+.control-group {
padding-top: 20px;
}

Give a line break without using <br/>

I have a button over my div.
<button id="showmenu" type="button">Show menu</button>
<div class="sidebarmenu">
Some code
</div>
The div is displayed right below the button. I want the button to be displayed with a line break. I know it is a bad practice to use <br/>. How do I give space without it?
With css:
.sidebarmenu{
margin-top: 20px;
}
Live example: http://jsfiddle.net/BhsYx/
You can use
#showmenu{
margin-bottom:10px;
}
Demo
The right way to make a line break is to use <br>.
To put some space between block elements though, you can use CSS properties like margin (external) or padding (internal). But margin is not line break. <br> means line break, and renders as an empty space. Margins are another way to render empty space, but this is not equivalent because it does not impact the same things.
You could make it a block level element...
button{
display: block;
}
see fiddle: http://jsfiddle.net/dwBG4/
You can try this :
<button id="showmenu" type="button">Show menu</button>
<div class="sidebarmenu" style="margin-top:20px" >
Some code
</div>
You can display block your button
button{display:block}
Not exactly bad practice in your given scenario really. It's only bad practice when you see something like:
<div>
</div>
<br />
<br />
<input />
<br />
<br />
But you're wanting to use it to control text, so use it! This reminds me of when you see people hating on tables, yet use display: table and display: table-cell on a divs!

Show input right after label

I need to show (within a div tag) a label and right next to the label an input. I am using bootstrap css and my code is as follows:
<div class="row">
<div class="span3">
<div class="control-group">
<label class="control-label" for="txtInput">Enter Text:</label>
<div class="controls">
<input id="txtId" class="input-medium" name="txtInput" />
</div>
</div>
</div>
</div>
No matter what I do there is a space between the label ("Enter Text:") and the left margin of Input.
How do I change the HTML or CSS to accomplish this? TIA
To adjust the position of only your input field you should be able to just apply the "position" CSS property of that element. Once you set that "position" property as relative you can move the element's position relative to its initial starting location using top,bottom,left, and right.
In the below example I moved your input field 5 pixels to the left of where it normally would be.
<style>
.controls{
position:relative;
left:-5px;
}
</style>
Try removing any whitespace between the elements. For example:
<label class="control-label" for="txtInput">Enter Text:</label><div class="controls"><input id="txtId" class="input-medium" name="txtInput" /></div>
Then, just remove the margin or padding of the div or input, if you want them to be placed right next to each other. The whitespace between them is rendered, so you'll have to remove it. Another approach I've seen is (but never used) is to put an HTML comment between the elements instead, like this:
<label class="control-label" for="txtInput">Enter Text:</label><!--
--><div class="controls"><!--
--><input id="txtId" class="input-medium" name="txtInput" />
</div>
See if either of those help. I recently ran into this problem where I was getting unexpected whitespace between my labels and inputs, and I couldn't remove it without using negative margin, which I didn't like. The solution I found was to remove the whitespace as in the first example. It doesn't look too pretty in the code, but it works.
Good luck!
You could put a negative margin on input-medium to force it to be closer to the label:
div.controls {
display:inline;
}
.input-medium {
margin-left:-4px;
}

Float left causes my input label to be on top instead v-align middle

I'm sure there are a lot of people with this problem, but I can't find a proper solution. That is basically is the problem. I've got a form with two pairs of label and field.
HTML:
<label for="Account">Inlognaam:</label>
<input class="field" id="Account" name="Account" type="
<br />
<label for="Wachtwoord">Wachtwoord:</label>
<input class="field" id="Wachtwoord" name="Wachtwoord" type="password" />
CSS:
label {
width: 150px;
float: left;
text-align: left;
}
So the problem is: when I don't use the 'float:left;' the input field will be not nice structured. BUT the label is going top-aligned. How can this be fixed?
An example is visible here: http://jsfiddle.net/ptKEh/9/ (comment float:left; to see what I mean)
EDIT::
Another thing... The input fields are in Chrome correct but in IE9 (9.0.8) the second field is a little shorter.
instead of floating the labels just use display: inline-block;
it will preserve the vertical alignment and it works even on IE6 and 7
I would recommend using padding to move the text down to be inline. This will only work with 1 line of text for the label and is cross browser capable.
I have put together an example jsfiddle http://jsfiddle.net/ptKEh/11/