I have a select item that I've applied the selectpicker function on from http://silviomoreto.github.io/bootstrap-select/
now I'm trying to align the input-group-addon with the select, which turned into a btn-group,
however the addon's height is never the same as the btn-group's height, I'm using twitter bootstrap 3.
Anyone who can advice me on how to do this, my code is:
<div class="input-group">
<span id="contact_servicecode" class="input-group-addon ng-binding">CONTACT_SERVICECODE</span>
<div class="btn-group bootstrap-select">
<button class="btn dropdown-toggle btn-custom" data-toggle="dropdown" type="button">
<div class="filter-option pull-left">1</div>
<div class="caret"></div>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner" role="menu">
</div>
<select class="selectpicker mobile-device" style="display: none;">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
Here is my jsbin for how I fixed it. jsbin
When you set the input-group sizes either 'input-group-lg' or 'input-group-sm' it will give you predefined sizes - most notably a height of 46px or 30px for the inputs respectively. However nothing happens if you accept the regular size. I think this is so you aren't surprised if you have settings for inputs outside of Bootstrap.
Here are example measurements for lg
.input-group-lg > .input-group-btn > .btn {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
Instead of tweaking lg after the fact, I created a class called 'input-group-reg' uses measurements that are a middle ground between the 'lg' and 'sm' given by bootstrap.
.input-group-reg > .form-control {
height: 38px;
padding: 8px 13px;
font-size: 14px;
line-height: 1.44;
border-radius: 6px;
}
/* Sizing the input */
.default-input-group-lg > form-control {
height: 38px;
padding: 8px 13px;
font-size: 14px;
line-height: 1.44;
border-radius: 6px;
}
/* Sizing the button */
.input-group-reg > .input-group-btn > .btn, .input-group-reg > .input-group-btn:last-child > .dropdown-toggle{
height: 38px;
padding: 8px 13px;
font-size: 14px;
line-height: 1.44;
border-radius: 6px;
}
It sounds like you're running into a known issue with Bootstrap when it's compiled with some SASS compilers. See https://github.com/twbs/bootstrap-sass/issues/409.
If you're using bootstrap-sass, that's that's causing it. You have to set the SASS precision to 10 before compiling Bootstrap. How you set it depends on what your particular set up is (Gulp, Grunt, Laravel Elixir, etc.).
.bootstrap-select.btn-group[class*="span"]{float:none;display:inline-block;margin-bottom:**0px**;margin-left:0}
is on first line of select.min.css
setting margin-botton to 0 ->problem solved!
As #theptrk says, it seems an explicit height isn't being set for buttons in input groups when not using input-group-sm or input-group-lg. I was able to fix this by just adding this to my bootstrap overrides:
// Fix input-group button sizing issue
.input-group > .input-group-btn > .btn, .input-group-btn:last-child > .dropdown-toggle {
height: 34px;
}
Related
Not able to move the button to the right of the page and the text to the center of the page even though I have added the necessary CSS ( float right etc.,)
<div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px" text-align="center">
<span display="inline;" float = "center;" style="color: white;">Visual Analysis of US Accidents Data </span>
<button position = "absolute;" background-color ="black;" color = "white;" float ="right;" display="inline-block;" padding-left = "100%;" id="reset" onclick="reset">Reset
</button>
</div>
display, float, etc.
are all CSS variables that should be included in the style="" part of the HTML, not as keyword parameters. I have demonstrated the correct way to insert them in the snippet below. You can also use right: 0 to align an element to the right side of its parent. It is often more reliable than float. I used right: 10px in this example so the button had a bit of breathing room on its right side.
<h1>Only fixed syntax:</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px; text-align: center;">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; color: white; background-color: black; float: right; display: inline-block; padding-left: 100%" id="reset" onclick="reset">
Reset
</button>
</div>
<h1>Fully fixed version</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; background-color: black; color: white; float: right; display: inline-block; right: 10px" id="reset" onclick="reset">
Reset
</button>
</div>
You have quite a few issues with your code, so let's clean them up and break down what's happening:
First off, don't style inline unless you have some specific reason for doing so. Use classes or ids or even just generic selectors but separating your HTML and your CSS will make your life much easier(and ours when you come looking for assistance! ;) )
You have tags that are opened and never closed which is causing some problems. The float isn't doing anything for you. If you want to position your button to the right of the page using absolute you need to tell it to be on the right using the right attribute. Your headline is centered, you just can't see it because it's white on a white background.
If you are going to style inline, you need to include your style information in the style="" section, otherwise, you're risking issues or invalid code altogether.
Let me know if you need any additional help or explanations :)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: lightgrey;
}
#project-heading {
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
padding-top: 5px;
text-align: center;
}
.title {
display: inline;
float: center;
color: white;
}
.btn {
position: absolute;
right: 10px;
background-color: black;
color: white;
display: inline-block;
}
<div id="project-heading">
<span class="title">Visual Analysis of US Accidents Data </span>
<button class="btn" id="reset" onclick="reset">Reset</button>
</div>
I am struggling with getting a navbar to contain:
My brand image
A long search bar and button to submit filling the entire navbar height
Enough room at the end of #2 for one more button of the same height
... all in one line, without collapsing.
However, for the life of me, I cannot get anything to stay on the same line as the nav bar after I place the search bar from #2. I have tried putting the search form in a column as in below, using display: inline in different places, navbar-right, etc.
Please let me know if this is an easy fix. I'd like to have some control over how long the search field is as well.
#searchBar {
border-left: 1px solid rgb(216, 216, 216);
border-right: 1px solid rgb(216, 216, 216);
}
#searchText {
height: 62px;
}
#searchButton {
background-color: Transparent;
border: 0px;
height: 63px;
}
#navigationBar {
box-shadow: 0px 4px 8px -3px rgba(17, 17, 17, .16);
height: 63px;
}
a.navbar-brand {
padding: 0px;
}
.logo-small {
margin-right: 14px;
margin-top: 7px;
margin-left: 19px;
width: 49px;
}
<nav class="nav" id="navigationBar">
<a class="navbar-brand" href="/""><img src="mylogo.png" class="logo-small">BRAND IMAGE</a>
<div class="row">
<div class="col-sm-10">
<form>
<div class="input-group" id="searchBar">
<input type="text" class="form-control" id="searchText" placeholder="Search here." onsubmit="search()">
<span class="input-group-btn">
<button type="button" id="searchButton" onclick="this.blur();"><i class="flaticon-search"></i></button>
</span>
</div>
</form>
</div>
<div class="col-sm-2">
<!-- HERE is where I want to place another button to fill the remaining space in the nav bar -->
</div
</nav>
I'm rewriting my original answer, because I made a couple of stupid assumptions, and didn't provide anything very helpful using the provided code.
As mentioned by others in previous comments, it might be most helpful to better understand grid layouts and how they work in a larger context.
Bootstrap has some great features specifically for grouping form elements and controls together, specifying how you'd like them to layout.
Read more on that, here
This snippet uses the grid system to divide the nav element into 12 columns, and uses the col-[size]-[width] classes to define how many "columns" each element should occupy, and at which resolutions those rules should apply.
For example, you could use col-lg-4 along with col-xs-2 within the class attribute to tell that element to act differently at larger and smaller resolutions.
Grid classes apply to devices with screen widths greater than or equal
to the breakpoint sizes, and override grid classes targeted at smaller
devices. Therefore, e.g. applying any .col-md-* class to an element
will not only affect its styling on medium devices but also on large
devices if a .col-lg-* class is not present.
The documentation specifies how these work together, and gives lots of examples with #media queries, so I'd recommend giving it a thorough read.
You may also want to look at using the navbar controls to better align form controls within the nav element itself.
You can find some great examples of that, here.
Lastly, if you'd like to play with this example, here's the codepen.
Hope this answer helps you more than my last one did.
#searchBar {
border-left: 1px solid rgb(216, 216, 216);
border-right: 1px solid rgb(216, 216, 216);
}
#searchText {
height: 62px;
}
#another_button {
height: 62px;
}
.search_bar_button {
height: 62px;
}
#searchBar input {
width: 100%;
}
#searchButton {
background-color: Transparent;
border: 0px;
height: 63px;
}
#navigationBar {
box-shadow: 0px 4px 8px -3px rgba(17, 17, 17, .16);
height: 63px;
}
a.navbar-brand {
padding: 0px;
font-size: 10px;
}
.logo-small {
margin-right: 14px;
margin-top: 7px;
margin-left: 19px;
width: 49px;
}
.another_button {
width: 100%;
height: 63px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="nav navbar navbar-default col-xs-12" id="navigationBar">
<div class="col-xs-2">
<a class="navbar-brand" href="/">
<img src="mylogo.png" class="logo-small" />
BRAND IMAGE
</a>
</div>
<form class="col-xs-6">
<div class="input-group" id="searchBar">
<span class="input-group-btn">
<button id="searchButton" class="btn search_bar_button" type="button">Go!</button>
</span>
<input type="text" class="form-control" id="searchText" placeholder="Search here." onsubmit="search()">
</div>
</form>
<div class="input-group col-xs-4">
<span id="another_button" class="input-group-btn">
<button class="another_button btn btn-secondary" type="button">Button 2</button>
</span>
</div>
</nav>
Is it possible to insert units inside an input element? Inside the <input> element is preferred, but outside is acceptable.
You can use something like this.
Outside box:
<input></input><span style="margin-left:10px;">lb</span>
Inside box:
<input style="padding-right:20px; text-align:right;" value="50"></input><span style="margin-left:-20px;">lb</span>
Fiddle
You can make use of bootstrap input-group component.
Note: The example below uses bootstrap 4 classes
<div class="input-group">
<input type="number" class="form-control">
<div class="input-group-append">
<span class="input-group-text"> m </span>
</div>
</div>
Here is the result below:
I would do this by nudging an extra element (like a span) over the input using position: relative and left: -20px.
Then some padding-right on the input element to ensure that the user's input wont overlap on the new element.
Example here:
https://jsfiddle.net/peg3mdsg/1/
If you want the units to show up right beside the number, you can try this trick (https://jsfiddle.net/ccallendar/5f8wzc3t/24/). The input value is rendered in a div that is positioned on top of the input, with the value part hidden. That way the units are positioned correctly. Just make sure to use the identical styles (font sizes, colors, padding etc).
const input = document.getElementById("input");
const hiddenValue = document.getElementById("hiddenValue");
const unitsValue = document.getElementById("unitsValue");
input.addEventListener("input", () => {
hiddenValue.innerHTML = input.value;
// Only show units when there is a value?
// unitsValue.innerHTML = (input.value.length > 0 ? " km" : "");
});
.wrapper {
position: relative;
width: 80px;
}
#input {
border: 2px solid #fee400;
background-color: #373637;
width: 100%;
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
padding: 3px 3px 3px 10px;
color: white;
}
.units {
position: absolute;
top: 0;
left: 0;
right: 10px;
bottom: 0;
pointer-events: none;
overflow: hidden;
display: flex;
/* Match input styles */
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
/* includes border width */
padding: 5px 5px 5px 12px;
color: white;
opacity: 0.8;
}
.invisible {
visibility: hidden;
}
#unitsValue {
/* Support spaces */
white-space: pre;
}
<div class="wrapper">
<input id="input"type="number" value="12" />
<div class="units">
<span class="invisible" id="hiddenValue">12</span>
<span class="units-value" id="unitsValue"> km</span>
</div>
</div>
Since you are using bootstrap, you can use input-groups component and override some of the bootstrap styling :
HTML
<div class="input-group unity-input">
<input type="text" class="form-control" placeholder="Enter unity value" aria-describedby="basic-addon2" /> <span class="input-group-addon" id="basic-addon2">
lbs
</span>
</div>
CSS
.input-group {
top:40px;
width:auto;
}
.unity-input .form-control {
border-right:0!important;
}
.unity-input .input-group-addon {
background:white!important;
border-left:none!important;
font-weight:bold;
color:#333;
}
Fiddle
Here: (numbers are arbitrary and you can play around with those, what's important is to float the input and the negative margin on the span holding the measurement unit)
CSS:
#form>span {
display: inline-block;
padding-top: 5px;
margin-left: -16px;
}
#form>input {
padding: 5px 16px 5px 5px;
float:left;
}
HTML:
<div id="form">
<span class="units">lb</span>
<input type="text" placeholder="Value" />
</div>
JSFiddle DEMO
The problem I have found with all of the previous answers is that, if you change the length of the units (for example, "€/month" instead of "lb") the <span> element won't be correctly aligned.
I found a better answer in another post, and it's really simple:
Html
<div class="wrapper">
<input></input>
<span class="units">lb</span>
</div>
CSS
.wrapper{
position: relative;
}
.units {
position: absolute;
right: 14px (or the px that fit with your design);
}
This way, you can even put a long unit such as "€/month" and it will still be correctly positioned.
using bootstrap:
<label for="idinput">LABEL</label>
<div class="input-group mb-3">
<input class="form-control" name="idinput" type="text" pattern="(-?[0-9]+(\.[0-9]+)?)" [(ngModel)]="input"/>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">m3/s</span>
</div>
</div>
The only thing you can try with strictly css and html is placeholder and text align left. with jquery you could you the .addClass command.
http://jsfiddle.net/JoshuaHurlburt/34nzt2d1/1/
input {
text-align:right;
}
I am learning html, css and twitter bootstrap as I go along.
<div id="button" style=" position:absolute;top:450px; left:350px;">
<p>
<a href="https://docs.google.com/forms/d/1Exo4u2iRpChj-
Wg9K5HxteMeoVE1uee0fQKBWiuYYiw/viewform?pli=1" class="btn btn-primary btn-
large">Search
</a>
</p>
</div>
I want to increase the size of the font of this button and hence make it bigger. Could someone help me with this please?
Thanks!
This has changed in Bootstrap 3.
Now it is .btn-lg, .btn-sm, or .btn-xs
https://getbootstrap.com/docs/3.4/css/
here are the sizes bootstrap offers right out of the box.
.btn-large
.btn-small
.btn-mini
read more about it here
it's under Button sizes
Edit:
or you could make your own:
.btn-xlarge {
padding: 18px 28px;
font-size: 22px; //change this to your desired size
line-height: normal;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
Source located here
This has changed again in Bootstrap 4.
Now there is only .btn-lg and .btn-sm
https://getbootstrap.com/docs/4.0/components/buttons/#sizes
Responsible form is created using code below.
If window is resized, it resizes itself automatically, captions and input elements stay aligned.
It contains fixed values 210px, 75px, 100px, 120 px is css below.
Is it reasonable and if yes, how to remove/replace those fixed values with something other
like percents or em's ?
input, select elements and jquery-ui autocomplete with dropdown button are used.
<form class='ui-widget-content form-document'>
<div class='form-field'>
<label class='form-label' for='nimi'>Customer name</label>
<span class='form-fullwidth'>
<input class='ui-widget-content ui-corner-all form-autocomplete' name='nimi' value='Karu Org AS' ></input>
<button type='button' class='form-combobutton' tabindex=-1 ></button>
</span>
</div>
<div class='form-field'>
<label class='form-label' for='Number'>Number</label>
<input class='ui-widget-content ui-corner-all form-fullwidth' name='Number' />
</div>
<div class='form-field'>
<label class='form-label' for='payterm'>Pay term</label>
<span id='span_Maksetin1_tingimus' class='form-fullwidth'>
<select class='ui-widget-content ui-corner-all form-fullwidth' name='payterm'>
<option value='' selected='selected'></option>
<option value='0'>0 days</option>
</select>
</span>
</div>
... lot of similar form-field divs
</form>
css:
.form-document
{
padding: 0.5%;
}
.form-field
{
display: inline-block;
margin: 2px;
width: 210px; /* label width + input field width */
}
.form-label
{
padding-left: 5px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: smaller;
display: inline-block;
text-align: right;
width: 75px; /* determine by max caption width */
}
.form-fullwidth
{
width: 120px; /* 210-5-75 */
}
.form-autocomplete
{
width: 100px; /* 210-5-75-combobutton width*/
}
.form-combobutton
{
height: 1.09em;
margin: 0 0 0px;
padding: 0;
margin-left: -6px;
vertical-align: middle;
width: 1em !important;
}
Looks ok to me though I personally use ems in most cases.
You could also consider using a preprocessor like LESS if you want to use variables to avoid repetition. You can get LESS or SASS via nuget and there are zillions of tutorials out there.