I'm stuck for a while on a scaling problem ...
When i resize the window(mobile) the "%" go below the input even with the 80% width, idk why he don't stay at right...
<html>
<head>
<!--<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<head>
<body>
<div class="col-md-6">
<div class="row form-inline text-center">
<div class="form-group col-md-3 form-inline text-center">
<label for="a">A</label></br>
<input id="a" name="a" type="number" class="form-control" style="width:80%;"/><b>%</b>
</div>
<div class="form-group col-md-3">
<label for="b">B</label></br>
<input id="b" name="b" type="number" class="form-control" style="width:80%"/> <b>%</b>
</div>
<div class="form-group col-md-3">
<label for="c">C</label></br>
<input id="c" name="c" type="number" class="form-control" style="width:80%"/> <b>%</b>
</div>
<div class="form-group col-md-3">
<label for="c">D</label> </br>
<input id="c" name="c" type="number" class="form-control" style="width:80%"/> <b>%</b>
</div>
</div>
</div>
<body>
</html>
if anyone knows what's wrong ...
The '%' is taking up more then 20% of the width on small screens. A nice solution would be to use input addons available in bootstrap: http://getbootstrap.com/components/#input-groups-basic
Related
I want this result like Bootstrap 5 - Place Radio Buttons Inline and a Radio Input Group next to each other
But he uses bootstrap 5, I use bootstrap 3.3.7 so it does not work.
<div class="d-flex">
<div class="form-check form-check-inline">
<input class='form-check-input' type='radio' />
<label class='form-check-label'>Y</label>
</div>
<div class="form-check form-check-inline">
<input class='form-check-input' type='radio' />
<label class='form-check-label text-nowrap'>N</label>
</div>
<div class="input-group input-group-sm">
<label>XXX</label><input type='text' />
</div>
</div>
Thank Gerard. But it's different from my thought.
You can add additional CSS to modify the alignment.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-1 col-xs-2">
<input type='radio' />
<label>Y</label>
</div>
<div class="col-md-1 col-xs-2">
<input type='radio' />
<label>N</label>
</div>
<div class="col-md-4">
<label>XXX</label><input type='text' />
</div>
</div>
I have this html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative" type="text">
</div>
</div>
</div>
</div>
when I apply form-control then the input goes till the end of the parent container.
Here I will need to write numbers on the input so it will be too big.
How can I decrease its size ?
If I try to apply custom style
.form-control {
width:200px !important;
}
then it starts to be inline-block instead like block element.
You can use Bootstrap's column sizing on form controls. Here I'm using col-* for various sizes.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative col-4" type="text">
</div>
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative col-6" type="text">
</div>
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative col-8" type="text">
</div>
</div>
</div>
</div>
See Bootstrap's column sizing docs.
I have one inline form that spans over horizontally and vertically. In this form, I have one
last column that is an add button that I want it to have a fixed position but only when I scroll the form horizontally, not vertically.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.btn-control {
position: fixed;
right: 0;
}
</style>
</head>
<body>
<h1>Inline form</h1>
<div class="container" style="width: 55%; height: 500px;">
<div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
<form style=" ">
<div class="form-row flex-nowrap">
<div class="col-3">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-3">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-3">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-3">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-3">
<label for="">Phone Numher</label>
<input type="text" class="form-control" placeholder="Phone Numher">
</div>
<div class="col-3 btn-control">
<p></p>
<button class="btn btn-info btn-circle">+</button>
</div>
</div>
<div class="form-row flex-nowrap">
<div class="col-3">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-3">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-3">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-3">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-3">
<label for="">Phone Numher</label>
<input type="text" class="form-control" placeholder="Phone Numher">
</div>
<div class="col-3 btn-control">
<p></p>
<button class="btn btn-info btn-circle">+</button>
</div>
</div>
<div class="form-row flex-nowrap">
<div class="col-3">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-3">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-3">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-3">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-3">
<label for="">Phone Numher</label>
<input type="text" class="form-control" placeholder="Phone Numher">
</div>
<div class="col-3 btn-control">
<p></p>
<button class="btn btn-info btn-circle">+</button>
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
I have set position: fixed but does not solve the problem as currently, the button has fixed position on both horizontal and vertical. I found some resources, but it does not fit my need.
Thanks.
position sticky should work
.btn-control {
position: sticky;
right: 0;
}
if it work you can change right position
I have the following code in bootstrap. I need to align the label with the checkbox but even after looking at some solutions, I have not been successful:
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<label>
Show entities?
<input type="checkbox" style="margin: 6px 0 0;" id="inactiveEnt" name="checkbox">
</label>
</div>
<div class="col-md-8" id="isactiveTxt">
<span style="font-weight:bold">Note: "-" inactive</span>
</div>
</div>
Considering if you are using bootstrap 4, you can do this to get that result
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Show entities?</label>
</div>
<!-- or using inline form -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Show entities?
</label>
</div>
Try this code snippet hope it will help :
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<label class="d-flex align-items-center"> Show entities? <input type="checkbox" id="inactiveEnt" name="checkbox" class="ml-3"> </label>
</div>
<div class="col-md-8" id="isactiveTxt">
<span style="font-weight:bold">Note: "-" inactive</span>
</div>
</div>
If you're using Bootstrap, just use a form-group. Create the label and reference the input by using a "for" attribute that matches the ID of the input.
<div class="form-group row">
<label for="myInput" class="col-sm-2 col-form-label">Input Label</label>
<div class="col-sm-10">
<input type="checkbox" class="form-check-input" id="myInput" placeholder="Input Here">
</div>
</div>
If I understood what you want I think this can be the solution you are looking for (append classes btn and btn-default to your input element to align vertically to your label text)
<div class="row">
<div class="col-xs-12">
<span>
<input type="checkbox" class="btn btn-default">
</span>
<label class="form-label">here is my label</label>
</div>
</div>
here is the fiddle: https://jsfiddle.net/p9wud84v/1/
I'm facing a problem I don't really know how to deal with.
I'm working on BootStrap 3 and i'm trying to make some inline forms because it is more user-friendly than a full vertical form (I don't want to scroll for ever)
I find some way to inline the normal inputs, but when it comes to the input with icons (font awesome), I can figure how to inline them, but they inline side to side without any space between them.
Also, I don't figure out how to change their width as I would do with normal input (col-sm-4 for example).
I would like the "Email" and "Telephone" to be scaped and to change their width
Please have a look at my code and the following image explaining it:
http://www.bootply.com/T8w3oRE3Sn
You were missing few things in the form group so I have wrapped things up. Hope it will help you :)
Below is the working snippet:
.myform .form-inline .input-group .input-group-addon{ width:20px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row myform">
<div class="col-xs-12">
<form name="myform" role="form" novalidate>
<div class="form-inline ">
<div class="form-group col-xs-6">
<div class="input-group col-xs-12">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" class="form-control" placeholder="Email de l'interlocuteur">
</div>
</div>
<div class="form-group col-xs-6">
<div class="input-group col-xs-12">
<span class="input-group-addon"><i class="fa fa-phone"></i></span>
<input type="email" class="form-control" placeholder="Téléphone de l'interlocuteur">
</div>
</div>
</div>
</form>
</div>
</div>
Try this
IF you see it in large screen it will be inline.
You have to use form-inline class to make form inline.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
You just need to deal with good understanding of bootstrap grid system
<div class="form-group row">
<label for="inputEmail3" class="col-sm-1 control-label">Interlocuteur</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="inputEmail3">
</div>
<label for="inputEmail5" class="col-sm-1 control-label">Poste</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="inputEmail5" placeholder="DeInterlocuteur">
</div>