This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 5 years ago.
I have the following:
.flex { display: flex; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="flex">
<input class="form-control" />
<div class="flex">
<input class="form-control" value="123456789" />
<input class="form-control" value="123456789" />
</div>
</div>
Why I can't see the latest input entirely in Microsoft Edge (is OK even in IE), and how to fix it.
If you add min-width: 0; to form-control it work cross browser.
It appears Edge does some other calculation for the input's width, and since the min-width defaults to auto, it won't allow it to be less than its computed width, which min-width: 0 solves.
Will see if I can find some more info about this issue, and when/if, I will update this answer.
.flex { display: flex; }
.form-control { min-width: 0; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="flex">
<input class="form-control" />
<div class="flex">
<input class="form-control" value="123456789" />
<input class="form-control" value="123456789" />
</div>
</div>
Related
I have developed a form using Bootstrap and I need the form to behave correctly on different devices. In one part of my form I have three inputs on one row, which usually works fine. But when I emulate different devices in the browser I see that the labels are broken into two lines when the screen width is to narrow. This makes sense of course, but I need a solution to prevent this. Is it possible? I can accept that the label/icon is cropped, but not divided to several lines. The form is generated by PHP and the labels may vary in length.
My expected result is like this (labels will have an icon on their side):
But when the screen width gets too narrow it looks like this:
I don't want the icon to appear on a new line. I would rather prefer that it was hidden if there's no space for it.
In the sample code below I have forced the width to 350px to illustrate the problem. When using width 400px or more it looks good:
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div class="container" style="max-width:350px">
<form>
<div class="form-row">
<div class="col-4">
<div class="form-group">
<label for="input-1">First label <span class='fas fa-info-circle'></span>
</label>
<input id="input-1" class="form-control" name="input1" type="text">
</div>
</div>
<div class="col-4">
<div class="form-group">
<label for="input-1">Second label <span class='fas fa-info-circle'></span></label>
<input id="input-1" class="form-control" name="input2" type="text">
</div>
</div>
<div class="col-4">
<div class="form-group">
<label for="input-1">Third label <span class='fas fa-info-circle'></span></label>
<input id="input-1" class="form-control" name="input3" type="text">
</div>
</div>
</div>
</form>
</div>
</body>
</html>
First of all you have to find at which device width, it is breaking, after that you can add media query in css to hide the icon.
Like this:
#media screen and (max-width: 350px) {
.fa-info-circle {
display: none;
}
}
this will hide the icon for width 350px or less.
You can use ellipsis in the label tag. So a part of the label along with the icon will be replaced with an ... when they exceed over the width limit.
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
There is a multiple input feature provided in Bootstrap 4 that looks like the following:
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
Is there a trivial way to replicate this behavior using Bootstrap 3.3.7? Would it require stripping styles from Bootstrap 4 or is there something I'm overlooking in 3.3.7 that already allows this behavior? The documentation is available here: https://getbootstrap.com/docs/4.0/components/input-group/#multiple-inputs
I cannot speak to it being trivial or not, but with some additional CSS and with the assistance of the Bootstrap Grid you can achieve similar results:
.input-group-multi [class*='col-'] {
margin: 0 !important;
padding: 0 !important;
}
.input-group-multi .form-control {
border-right: 0;
}
.input-group-multi [class*='col-']:last-child .form-control {
border-radius: 0 4px 4px 0;
border-right: 1px solid #ccc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-6"><input type="text" class="form-control"></div>
<div class="col-xs-6 no-gutters"><input type="text" class="form-control"></div>
</div>
<br />
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
</div>
<br />
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
</div>
In the above code snippet you can see how .input-group-mutli is sort of the heavy-lifter here. With this new class we can use a wildcard match on the Bootstrap Grid column to remove all margin and padding. That alone gets you to where your multiple inputs will line up nicely... but with the borders doubling up.
A little extra CSS to detect remove the right-border and then re-apply that border on the last column+input provides you with a pretty spot on multiple input feature. With one exception of course; this presumes that input-group-addon is always on the left.
A little CSS will give you the same effect.
In the following snippet I created the css class input-multiple and modified the CSS styling accordingly. Adjust field widths as needed, here I simply altered the width:100% associated with Bootstraps .form-control class
.input-multiple>input.form-control {
width: auto;
}
.input-multiple>input.form-control+input.form-control {
border-left: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div style="padding:20px">
<div class="row">
<div class="col-lg-6">
<div class="input-group input-multiple">
<span class="input-group-addon" id="sizing-addon1">First and Last Name</span>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>
</div>
</div>
</div>
<div className="form-inline">
<label>1.</label><br />
<input type="text" className="form-control" />
</div>
Using bootstrap, why when I do input 100% the form will break?
https://jsfiddle.net/bdw9eyme/
How to make label and input to be at same line and input will fill the rest of the screen?
You shouldn't use a br to create a break here, you can use CSS for that. Also you should either nest your input in the label, or use the for attribute with the label to link to an id on the input.
Making the row flex with the input set to flex-grow: 1 will put the input by the label text, and make the input grow to take up the available space.
input {
flex-grow: 1;
margin-left: 1em;
}
.fw {
display: flex;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div className="form-inline">
<label class="fw">1. <input type="text" className="form-control"></label>
</div>
i think this is what you're looking for
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="form-group">
<label class="col-xs-2">1.</label>
<div class="col-xs-10">
<input class="form-control" type="text"/>
</div>
</div>
</body>
This question already has answers here:
Div side by side without float
(6 answers)
Closed 6 years ago.
This code is layed out in 1 column. I want to get a tabular 2 column layout.
<span id="col1">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<span id="col2">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</span>
How can I achieve this without using float?
fiddle
You can use the flexbox for that:
.container {
display: flex;
}
<div class="container">
<div id="col1">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</div>
<div id="col2">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</div>
</div>
Note that I changed your span to div elements (since span are inline and should not contain block elements).
I also wrapped the entire block with div.container so I'll be able to set that container as the flexbox.
Assuming you want the columns to be able to be shown/hidden, you could do this:
<head>
<script>
$('.next').click(function() {
var next = $('.col').next();
var curr = $('.col');
next.addClass('col-active');
curr.removeClass('col-active');
});
</script>
<style>
.col {
display: none;
}
.col-active {
display: block !important;
}
</style>
</head>
<body>
<span id="col1" class="col col-active">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<span id="col2" class="col">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<a class="next">Next Page</a>
</body>
This essentially shows and hides the columns based on the <a> being clicked. I use this quite a lot when having sliders/tabulated pages.
Hope this helps :)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm creating a personal website using Twitter Bootstrap 3.4.3 for frontend and Python/Django 1.5.4 for backend. I'm currently having a lot of problems trying to get the website into a more mobile friendly mode. I'm using the cover and blog templates for my site. The cover template is the one that is being problematic.
Here is a snippet of the homepage of my website on a laptop-
And here is what it looks like on my smartphone -
Here's what the contact page looks like on my laptop -
And here's what it looks like on my smartphone -
As you can see in the mobile version, the background is not surrounding all elements and pictures and textboxes are not properly positioned.
I'm using the standard Twitter Bootstrap cover.css file for all the styling of the home page and contact page. Here is some example code I'm using for the main body -
html,
body {
height: 100%;
width: 100%;
background: url("../background-2.jpg") center no-repeat;
background-size:cover;
}
How can I change the styling to make my website mobile friendly?
The classes you apply to the form is what will matter before any custom CSS: .form-control. Bootstrap 3 Forms
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="email_form" method="POST" action="/home/contact/">
<div class="row">
<input type='hidden' name='csrfmiddlewaretoken' value='uusHSjnOjeCLfyaCwmUC3eKH3EXIH9iX' />
<div class="col-md-6">
<div class="form-group">
<input id="id_name" maxlength="200" name="name" placeholder="Name" type="text" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="id_email" name="email" placeholder="E-mail" type="text" class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input id="id_subject" maxlength="100" name="subject" placeholder="Subject" type="text" class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea cols="40" id="id_message" name="message" placeholder="Message" rows="10" class="form-control"></textarea>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit" name="send">Send</button>
</form>
</div>
You have two different stylesheets which are actually identical other then these rules (you really only need one file between these two):
cover.css has this rule and mobile.css is missing the height and width which is probably causing your problem with the background.
html, body {
height: 100%;
width: 100%;
background: url("http://www.raghavkumar.work/static/background-2.jpg") center no-repeat;
background-size:cover;
}
mobile.css has the this rule which cover.css does not.
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Also, both have this error: bottom is misspelled. padding-bottom
.helptext {
padding-bottm: 2px;
font-size: 15px;
}