how to make the city state zip to align in the same line
i reduced the width but its not working
how to fix it
<div class="">
<label class="" for="">City</label><input style="width: 54px;" type="text">
<label class="" for="">State</label><input style="width: 54px;" type="text">
<label class="" for="">Zip</label><input style="width: 54px;" type="text" >
</div>
http://jsfiddle.net/VXXPC/19/
Your labels are display: block. Use display: inline-block like you have with the fields.
This took me all of about 10 seconds to realise with the browser developer tools. Hitting [F12] in most modern browsers (FF requires installation of FireBug) launches the bundled developer tools. Here you can inspect the offending element(s) and see the CSS that effects the element(s).
Here's an updated fiddle. I've applied a class to the parent div inline-fields. In the CSS I've added:
.inline-fields label {
display: inline-block;
}
Related
This is the part of the HTML file of my Angular project, where I am using a checkbox with an input groups addon
<td
style="width: auto; word-wrap: normal"
class="text-wrap"
>
<fieldset>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div
class="input-group-text"
style="height: 30px"
>
<input
type="checkbox"
id="checkbox-addon1"
class="form-check-input"
/>
</div>
</div>
<input
type="text"
class="form-control"
placeholder="Compare data"
style="height: 30px; width: 80px"
/>
</div>
</fieldset>
</td>
When seeing this on desktop, it is showing in a correct way -
But when the same thing I am seeing in mobile view, I see like this
In mobile view, checkbox and text are not coming in the same line. Can anyone please help me to resolve this issue?
Edit 1:
I have defined the heading of this table column as
<th style="width: 9em" scope="col">Compare data</th>
Edit 2:
Based on what #HAPPY SINGH answered,
I tried using the below part of code, in my scss file
.input-group {
white-space: nowrap;
.form-control {
width: 50px !important;
padding-left: 0%;
padding-right: 0%;
}
}
But as soon as I change from width: 40px, the mobile view breaks again
Yes,
Use this few style CSS and remove inline CSS added in external CSS.
Mobile view media query:
#media only screen and (max-width: 767px) {
.input-group {
white-space: nowrap;
}
.form-control {
width: 40px;
}
}
Use this:
<div class="input-group mb-3" style="white-space: nowrap">
or
<div class="input-group mb-3" style="display:flex">
to disallow wrapping.
On the other hand, it is likely that .input-group already does this. Your elements are contained in a table column, and table will always display all of its columns, even when there is not enough screen space available, which is likely why the layout breaks. Rather than using tables for layout, prefer a flexbox approach instead.
Try this:
<div class="input-group mb-3" style="display: flex;">
I am using css flex on my project but it adds an empty box at the end of the items. How do I remove it?
My code
<div className="form-horizontal">
<div className="form-control">
<label htmlFor="">Name</label>
<input type="text" name="" id="" />
</div>
<div className="form-control">
<label htmlFor="">Email</label>
<input type="text" name="" id="" />
</div>
</div>
CSS
.form-horizontal{
display: flex;
width: 100%;
white-space: pre-wrap;
flex-wrap: wrap;
}
Try this. This should solve your problem
.form-control {
width: 100%;
}
Well the display: flex; will make your child elements inside them have a display of inline, so they will stick to each other, unless you separate them with justify-content or align-items.
Now if you have 2 elements (the child's elements) which their combined width is still less than the width of container box (parent element), well the rest of width missing is still there, just that it's not being used! (Because you need to maintain the aspect/design of the page)
But that doesn't means that you have a new box in your flex-blox. It's just free space, not being used.
Graphic explanation of the problem
Now you can still use that free space there with the justify-content or align items property, or you can add a new child element to the flex-blox!
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;
}
The Problem
I've got a problem where I'm trying to create rows of form inputs. This works OK, however, once the width of the total inputs gets too large, everything starts to wrap. What I would like is for a horizontal scroll-bar to appear inside the field-set and for all form elements for a single service-item div to remain on a single line.
<div style="display: inline-block;" class="horizontal-fields service-item">
<button class="horizontal-fields remove-service-item" style="float: left; margin-right: 5px;">-</button>
<label for="service_name">Name:</label>
<input name="service_name[]" id="service_name" value="" type="text">
<label for="service_description">Description:</label>
<input id="service_description" name="service_description[]" value="" type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label for="service_dsl_fnn[]">FNN:</label>
<input id="service_dsl_fnn" name="service_dsl_fnn[]" size="10" value="" type="text">
<button class="horizontal-fields new-service-item" style="display: inline-block;">+</button>
</div>
<br>
</div>
Current Results
Here is a JSFiddle showing the form in it's current state, I've included all the bare-bones CSS/HTML that I think are relevant: http://jsfiddle.net/FjxqG/3/
You will see that I've managed to get what I want by specifying width: 300% in the horizontal-fields class. However, this is of course not optimal because the width is essentially fixed and not automatically fitting the width of the service-item div.
Of course, this leaves the width much larger than it needs to be, but also always showing a horizontal-scroll, even when it isn't needed.
What I've tried
I've tried using display: inline-block; and whitespace: no-wrap;. However, the former did not seem to do much for me, and the latter only worked for the first few form items, not those inside the service-additional-fields div.
Unfortunately, I've got those latter items in the service-additional-fields div as they are dynamically inserted using jQuery, so although it's possible to take them out, I'd rather leave them in there, as it keeps the JavaScript simpler.
I've tried adapting the solution found here, with little success: http://www.css-lab.com/demos/image-display/side-scroll-gallery.html
Ended up with a similar situation in which the latter form elements were still wrapping.
I've also considered doing something like the jQuery solution found here: Horizontal scroll in DIV with many small DIV's inside (no text)
I guess this would work for me, because I already know that setting the width on horizontal-fields works OK, so using jQuery to find out what that width should be would probably work. However, it feels like I shouldn't need jQuery and it would be kind of a hack. So I'd like to avoid it if reasonably possible.
Thanks!
For some reason the other answer has been deleted and I can't get it back so having to answer again.
Previous answer was -
How about removing the floats and having inline-blocks with auto widths, And then for the .service-additional-fields as inline-block too?
Edited for a fuller answer.
HTML
<fieldset>
<legend>Fourth: Add Services</legend>
<div id="slide-wrap">
<div id="inner-wrap">
<div class="horizontal-fields service-item">
<button class="addField">+</button>
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
</div>
</div>
<div class="horizontal-fields service-item">
<button class="addField">+</button>
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
</div>
</div>
</div>
</div>
</fieldset>
CSS
#slide-wrap {
margin:0 auto;
overflow: auto;
background:#BCC5E1;
border:1px solid #000;
}
#inner-wrap {
float:left;
margin-right:-30000px;/*Be safe with Opera's limited negative margin of 32695px (-999em could cause problems with large font sizes)*/
padding-left:20px;
width: auto;
}
div.horizontal-fields input,
div.horizontal-fields textarea,
div.horizontal-fields select,
div.horizontal-fields label {
width: auto;
}
/* Horizontal fields is the class which is not re-sizing it's with correctly */
.horizontal-fields {
display: block;
}
.service-additional-fields {
display:inline-block;
}
DEMO
http://jsfiddle.net/aLKHJ/1/
Try this approach:
HTML:
<div id="slide-wrap">
<!-- + First row -->
<div class="row">
<!-- All elements here -->
</div>
<!-- - First row -->
<!-- + Second row -->
<div class="row">
<!-- All elements here -->
</div>
<!-- - Second row -->
</div>
CSS:
#slide-wrap {
margin:0 auto;
overflow: auto;
background:#BCC5E1;
border:1px solid #000;
width: 400px; /* for example */
padding-left:20px;
}
div.row {
float:left;
white-space: nowrap;
}
Take it easy, I was really getting confused of inner styles, so I removed them.
JsBin demo
I'm trying to write a contact form however my label widths aren't being forced in Firefox or Chrome - IE seems to be working okay though (for once). Here's my HTML
<form name="" id="" action="" method="post">
<div id="my_form">
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</div>
<div>
<form>
and here's my CSS
#my_form div label{width:200px;display:inline-block;}
any ideas how I can force the label width, they seem to collapse
Try this:
#my_form div label{width:200px; display:block; float:left;}
See this running (http://jsfiddle.net/jrpab/), it works fine in Chrome.
try:
#my_form label{width:200px;display:block; clear:left; float:left; }
#my_form input{display:block; float:left; width:auto;}
After some head-scratching and research, I've found it's because
labels are inline elements, which according to CSS documentation
should ignore width styling. So, as usual, IE is doing it wrong and
Chrome and Firefox are doing it right.
...
set its display property to something other than inline. I've found display: inline-block is the best for achieving what you're going for.
http://doctype.com/firefox-chrome-ignore-widths-my-labels