Just curious if there is a way to get a tighter layout with bootstrap.
Why is there so much space between the text elements?
Is it all just to accomodate pads, phones, etc?
Is there any way to choose a tighter style for the entire page to default to?
I also think the edit boxes themsselves are too large. There is too much wasted space between the text and the edge of the box.
Why aren't they a bit tighter?
These edits have been added after attempting to use code in answer from NetworkNerd
I have added the following to my stylesheet.
input[type=text]{
padding-top:0px; padding-bottom:0px;
margin-bottom:0px; /* Reduced from whatever it currently is */
margin-top:0px; /* Reduced from whatever it currently is */
height:24px;
}
Those additions make my form look like the following:
You can see that things got a bit tighter, but that is only because of the height:24px style.
The other changes do not seem to have any affect on the look.
By the way, the stylesheet which includes this change is the last one included.
Labels Are Not Aligned
Also, notice that now that I've changed that the labels are not aligned with their associated text input.
Still Too Much Margin Between Text Boxes
And there still seems to be too much margin space between the text boxes.
HTML Code Snippet For Title
Here's a snippet of the HTML which shows the HTML with the applied Bootstrap styles.
This was all just copied from samples on the bootstrap site.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="titleText" class="col-sm-2 control-label">Title</label>
<div class="col-sm-6">
<input id="titleText" class="form-control" type="text" ng-model="book.title" />
</div>
</div>
Bootstrap doesn't recommend editing bootstrap.css itself. It is recommended per best practices to modify the bootstrap style in another, dominant CSS file.
Try doing something like this:
Custom CSS
input[type=text]{
padding:0px;
margin-bottom:2px; /* Reduced from whatever it currently is */
margin-top:2px; /* Reduced from whatever it currently is */
}
It's hard to tell from the picture if it's a margin on the top or bottom. You can remove the margin-[top|bottom] based on what the result of your testing is.
It's also possible that the input element isn't the one with a margin, it could be the label element instead (Bootstrap, at least in my experiences, does some strange things with the label element...)
Another edit: I like to give people options. Therefore, if this is in a table element, consider adding the table-condensed class to the table tag to reduce some of the whitespace between items, as shown below:
<table class="table table-condensed">
In Bootstrap 4 you can use the form-control-sm class. See https://getbootstrap.com/docs/4.1/components/forms/#sizing
This is taken directly from the Bootstrap documentation,
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
Prior to Bootstrap 4 you could use input-sm. See https://getbootstrap.com/docs/3.3/css/#forms-control-sizes
You can go into the bootstrap.css and find the padding and margin values and change them around or do that in another stylesheet
Related
I would like to create a form using BootStrap 4 that looks like the forms that BootStrap 3 allowed one to create easily. i.e. I would like a bold label right-aligned within a specific size (e.g. col-sm-4), and next to it I would like an input field whose width is controlled by an enclosing div tag with a class like col-sm-4 (as an example). How can I do this? I have spent an hour or so now battling with .css and BS4 to create this, but have been unable to achieve the effect I desire. Any hints would be great.
The code below will produce the effect I wish for but will not allow me to have different sized inputs (they all default to the same size)
css:
div.form-inline label.col-sm-3 {
justify-content: flex-end;
font-weight:650;
}
html:
<div class="form-inline">
<label for="INcity" class="col-form-label col-12 col-sm-3">City</label>
<div class="col-sm-4"><input type="text" name="INcity" class="required form-control" id="INcity"></div>
</div>
If I instead use form-group, then I can alter the size of the input fields using the enclosing tags, but then the css (even when I change it to be .form-group instead of .form-inline) fails to align the label correctly and set it to bold. So I guess I'm looking for either the correct .css or an example of how to achieve the whole effect simply (as it was with BS3). I must be missing something obvious because I can not believe that the BS4 developers would make it so difficult to achieve the same look as BS3 allowed without any of the .css hacks etc that I am having to do. Though I do notice that every one of the examples given in the BS4 documentation has the label left-aligned, so perhaps they have decided to make that formatting decision for every BS4 user, but that seems a bit unlikely (and unfriendly).
In order for col-* to work they MUST be inside a .row or .form-row.
There's no need for any extra CSS:
https://codeply.com/go/0Vkxbmgb4c
<div class="form-row">
<label for="INcity" class="col-form-label col-12 col-sm-3 font-weight-bold text-right">City</label>
<div class="col-sm-4">
<input type="text" name="INcity" class="required form-control" id="INcity">
</div>
</div>
https://getbootstrap.com/docs/4.0/components/forms/#form-grid
If you have several of these that you are converting from BS3 to BS 4, then the way that ZimSystem has suggested as an answer will be extremely tiresome to implement - being as you will have to change every single instance of this. Just create some css (as it seemed you were actually asking for) with the following .css and use find and replace to replace every instance of control-label with col-form-label. This approach is much easier than the approach suggested above, and uses a more modular approach (in that you only have to write the css markup once - modularity should be every programmer's approach in my opinion). Ensure this css is loaded AFTER BS4 css has loaded.
.col-form-label
{
font-weight:600;
text-align:right;
}
In my app I have situations where I need to use what I and some frameworks call a "post-link". Basically a link that might be used to delete (or post) data with it and as such must actually be a a form.
I'm using bootstrap as my base css and have assigned the link class to the submit button to give it a link appearance. When using in a table with another, ordinary, <a> tag next to it I can't seem to get the two links to align alongside each other, no matter how wide I make the viewport or table cell.
Here is a fiddle to demonstrate: http://jsfiddle.net/miocene/dbTqC/670/ I'm referring to the pencil and cross icons as my normal link and post-link.
Any ideas how I can get them to align side-by-side?
You either need to define a width for the td or use this. I gave the div in the td a class .lol
DEMO
<td>
<div class="btn-toolbar inline lol">BLAH BLAH</div>
</td>
.lol *{
display:inline-block;
float:left;
width:50%;
}
.lol .btn{
padding:2px;
}
I'm working with Bootstrap's Typeahead and adding the input like so:
<div class="row">
<div class="span12">
<form class="centered">
<input id="main_search" type="text" class="search-query my-search" data-provide="typeahead">
</form>
</div>
</div>
I have the following CSS code which essentially just expands my search box to be "long" and in the middle of the span:
.centered {
text-align:center;
}
/* Make the main search box wider */
.my-search {
width: 80%;
}
My question is, when I use the Typeahead, the auto-completed results are only as long as they "have to be" to display the entire word/phrase whereas I want them to be as long as the actually input box. Basically like what you see on Google.com with their Instant Search functionality.
This closed issue suggests I should be able to manipulate the CSS to achieve what I want to do, but I'm not great at complex CSS and I'm struggling to get the inheritance just right to get any CSS to actually apply to the correct element. On top of that, I'm unsure how to make sure the dropdown-menu inherits the input's length (so that it'll work despite browser resizing).
Thanks for any help that you can provide!
Current code:
JSFiddle
Without you posting your code or a link to the working example, this is just a guess, but try this CSS
.my-search, .typeahead.dropdown-menu > li {
width: 80% !important;
}
I want to do a portion of a form look like a spreadsheet.
There are several forms and <table> is thus not viable (though I'm not against it when you do are printing semantically tabular data, as it is the case).
So I tried to simply use a CSS2.1 layout directly with the form input elements, eg.
<div class="table">
<form class="tbody">
<div class="tr">
<label class="td">Label</label>
<input class="td" name />
<input class="td" name />
</div>
</form>
</div>
Full example in the fiddle.
But it looks like display:table-cell does not work on <input> elements!
If you check in Chrome "Computed Style" the display will be "inline-element".
But I did not find anywhere why it shouldn't:
Mozilla Dev Network CSS:display
W3C CSS 2.1 Recommendation Visual Formatting Model
W3C Tables Recommendation
Any idea?
It sounded so much better than having some <div class="cell"> around the <input> and then having to play with box-model to get it look nice...
From W3.org:
"CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further."
Sorry, but display: table-cell on input elements is treated experimental. Try to avoid it, use wrapper-elements for the positioning for example.
I've made an example with div elements. You can now have multiple forms within a table, however it only works when the form element spans full rows. Otherwise your nesting will be broken.
EDIT:
Updated the fiddle with a version where border-collapse is added to avoid double borders.
JSFiddle example
Here's another CSS changes only question. [
Demonstrated here
So, I have a background sprite for some styling elements, and want to style textfields with endcaps (TEXTFIELD) and a repeating background. I've lined things up using padding spaces here in the example, which lets me set background-color, but not a background I think. I've been staring at this for too long, and need some advice. Is it possible to line things up the way I want them, without changing the HTML?
<label> Enter Zipcode: </label>
<span class='bg'>
<span class='leftcap'>
<span class='rightcap'>
<input type="text" class="textfield" name="zipCode" />
</span>
</span>
</span>
edit: I'm spitting angry over here, somehow lost my jsfiddle, and gar. My question still stands... the other jsfiddle linked shared a couple similarities, and served as a base, but I ended up changing almost everything by the time I had it set up. Good thing I copied a little over here.
edit2: here is a partial remade jsfiddle. http://jsfiddle.net/dreamling/P3Jev/3/
I changed outer2 to display:inline-block, that fixes it.
The strange gaps are there because inline-block elements are whitespace dependend (and a whitespace is exactly 4px at standard font-size)
Fix: add letter-spacing:-4px + line-height: 1px.
See http://jsfiddle.net/L8TyD/6/
EDIT: i removed the fixed width, and added hack to make it work in ie7