I've tried playing around with the paddings, but it didn't solve the issue.
The idea is to stretch these fields from where they are all the way to the right.
Here's the Fiddle and this is how it looks VS what it should look like.
input[type='text'],
.txtarea {
margin-bottom: 3px;
}
.form-group input, select{
height: 36px;
padding-left: 03px;
padding-right: 03px;
}
.form-group {
margin-bottom: 2px !important;
}
.padding-0 {
padding-right: 0;
padding-left: 0;
}
label {
color: #292727;
font-weight: bold;
font-size: 13px;
width: 140px;
text-align: right;
}
label[for='notes'] {
font-size: 13px;
font-weight: bold;
text-align: left;
display: block;
}
.container-fluid {
max-width: 99%;
}
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<div class="container-fluid px-5" id="container1">
<div class="row d-flex flex-wrap align-items-center">
<div class="col">
<img src=class="header__logo-img" alt="Some Hidden Logo" itemprop="logo" width="237" height="90">
</div>
<div id="unitSpot" style="display: none;">Fabric</div>
<div class="col">
<form id="headerForm">
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="select" class="col-4 col-form-label">Order:</label>
<div class="col-4">
<select id="selectOrderPo" name="select" required="required" class="custom-select" onchange="loadSuppliersForPoFromSS(this);resetPage()">
<option value="TTL-220218" selected="">TTL-2131231</option>
</select>
</div>
</div>
<div class="form-group row" style="display: flex;justify-content: flex-end;">
<label for="fabricPo" class="col-4 col-form-label">PO:</label>
<div class="col-4">
<input id="fabricPo" name="fabricPo" type="text" required="required" value="" class="form-control" disabled="">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="poDate" class="col-4 col-form-label">PO Date:</label>
<div class="col-4">
<input id="poDate" name="poDate" type="date" required="required" class="form-control" placeholder="MM/dd/yyyy" onchange="generateShipDate(getLeadTime())">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="leadTime" class="col-4 col-form-label">Lead Time:</label>
<div class="col-4">
<input id="leadTime" name="leadTime" type="number" class="form-control" onchange="generateShipDate(this)" min="0" max="180">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="text3" class="col-4 col-form-label">Ship Date:</label>
<div class="col-4">
<input id="shipDate" name="shipDate" type="text" class="form-control" disabled="">
</div>
</div>
</form>
</div>
</div>
</div>
</html>
You have px-5 on your container which is specifying 3rem of padding on the left and right. Step one would be to remove this because container-fluid already has a left and right padding of 15px.
Then, when you work your way down the elements you'll notice some more default padding on all your col-4's. You can use pr-0 to target only the padding-right to be 0.
input[type='text'],
.txtarea {
margin-bottom: 3px;
}
.form-group input,
select {
height: 36px;
padding-left: 03px;
padding-right: 03px;
}
.form-group {
margin-bottom: 2px !important;
}
.padding-0 {
padding-right: 0;
padding-left: 0;
}
label {
color: #292727;
font-weight: bold;
font-size: 13px;
width: 140px;
text-align: right;
}
label[for='notes'] {
font-size: 13px;
font-weight: bold;
text-align: left;
display: block;
}
.container-fluid {
max-width: 99%;
}
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<div class="container-fluid" id="container1">
<div class="row d-flex flex-wrap align-items-center">
<div class="col">
<img src=class="header__logo-img" alt="Some Hidden Logo" itemprop="logo" width="237" height="90">
</div>
<div id="unitSpot" style="display: none;">Fabric</div>
<div class="col">
<form id="headerForm">
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="select" class="col-4 col-form-label">Order:</label>
<div class="col-4 pr-0">
<select id="selectOrderPo" name="select" required="required" class="custom-select" onchange="loadSuppliersForPoFromSS(this);resetPage()">
<option value="TTL-220218" selected="">TTL-2131231</option>
</select>
</div>
</div>
<div class="form-group row" style="display: flex;justify-content: flex-end;">
<label for="fabricPo" class="col-4 col-form-label">PO:</label>
<div class="col-4 pr-0">
<input id="fabricPo" name="fabricPo" type="text" required="required" value="" class="form-control" disabled="">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="poDate" class="col-4 col-form-label">PO Date:</label>
<div class="col-4 pr-0">
<input id="poDate" name="poDate" type="date" required="required" class="form-control" placeholder="MM/dd/yyyy" onchange="generateShipDate(getLeadTime())">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="leadTime" class="col-4 col-form-label">Lead Time:</label>
<div class="col-4 pr-0">
<input id="leadTime" name="leadTime" type="number" class="form-control" onchange="generateShipDate(this)" min="0" max="180">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="text3" class="col-4 col-form-label">Ship Date:</label>
<div class="col-4 pr-0">
<input id="shipDate" name="shipDate" type="text" class="form-control" disabled="">
</div>
</div>
</form>
</div>
</div>
</div>
</html>
Related
I have used field set that contains a set of input and labels. these inputs and label are outside the field set borders. How can I place label and inputs inside field set border.
.legend-custom {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: -15px;
background-color: white;
}
.fieldset-custom {
border: 1px solid #eee !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="legend-custom">User:</legend>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-label">Username:</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
As you can see the input is outside the field set border. How can I fix this purely with HTML. I tried to setting the padding for the field set and works fine but at certain screen size the end of the label will be slightly hidden. So I wan to see first if can be resolved using just HTML. I am using bootstrap 3.3.7
Just remove the div class="row"> inside the form group perhaps? I gave it a lime border just to make it obvious.
.legend-custom {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: -15px;
background-color: white;
}
.fieldset-custom {
border: 1px solid lime !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="legend-custom">User:</legend>
<div class="form-group">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-label">Username:</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
create a parent div where you have to put a div with the form-group class than in the children you have to put form-control for example in your label and input
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="form-control">User:</legend>
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-control">Username:</label>
</div>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>
I'm not entirely sure what you're after, but part of your problem is that you're tangling rows and columns with form groups. The latter should really be inside the former. See getbootstrap.com/docs/3.3/css/#forms
Then, your layout seems overly complex. I've removed a few layers to simplify.
Also, you're applying too many column classes and in the wrong order. Bootstrap is mobile first and column classes cascade. Arrange them smallest to largest and don't duplicate any with the same numeric value.
.legend-custom {
font-size: 1.2em;
font-weight: bold;
}
.fieldset-custom {
border: 1px solid #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class=" col-xs-12 col-md-6">
<form class="form-horizontal">
<div class="row form-group">
<div class="col-xs-12 col-md-3">
<fieldset class="fieldset-custom">
<legend class="legend-custom">User:</legend>
<label class="control-label">Username:</label>
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
.legend-custom {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: 15px;
background-color: white;
}
.fieldset-custom {
border: 1px solid #eee !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="legend-custom">User:</legend>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-label">Username:</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
#row-1 {
margin-right: 5px;
margin-left: 5px;
}
Add the above code to your css file.
Second row class which is like that <div class="row" id="row-1"> before tag <div class="form-group">
I want to design a page in which half-left portion of the viewport for Login & other half-right portion of the viewport for Signup i.e with split layout(side by side in tablet,desktop, and large screen & stacked(top for login & Bottom for Signup after reaching within a mobile width range) in mobile, and lower devices). I made this with two col-md-6 (one for Login & another for Signup) with 100vh for min-width:768px and above and with 50vh for max-width:768px devices(means in mobile devices it display as stacked) and below. I made this code but after size testing(by scaling browser window) I am facing problem(on scale down) like Login portion(i.e. Half-left) height take size as the login form. I have not given any specific width & height of any div(Because bootstrap handle it automatically using grid system). I am giving the code so that you can help me.
I Want this Output(Actually I get it with small flaw)
Sample-in-mobile
Sample-in-Computer
Problem:
Problem
/*index.css*/
body {
padding-top: 56px;
}
.tmbl-nav {
background-color: #001427;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}
/*.left-side,.right-side{
height:50vh;
width:100%;
}
*/
.left-side {
background-color: #BF0603;
}
.right-side {
background-color: #8D0801;
}
.form-box {
background-color: white;
padding: 25px 25px 25px 25px;
}
/* Medium devices (landscape tablets, 768px and down) */
#media only screen and (max-width:768px) {
.nav-link {
text-align: center;
}
}
#media screen and (min-width:768px) {
.left-side,
.right-side {
height: 100vh;
}
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--index.php-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles/index.css" />
<title>My Web Site</title>
</head>
<body>
<?php include_once("inc/header.php");?>
<!--navbar for navigation-->
<div class="container-fluid">
<div class="row no-gutters">
<div class="left-side col-md-6 d-flex align-items-center">
<div class="container">
<div class="row no-gutters justify-content-center">
<div class="col-md-6 text-center align-items-center">
<div class="form-box-top text-center text-light">
<h2>Login Now</h2>
<p>Enter Username & Password to Log on.</p>
</div>
<div class="form-box rounded">
<form>
<div class="form-group">
<label for="inputUName" class="sr-only">Username</label>
<input type="text" class="form-control" id="inputUName" aria-describedby="userName" placeholder="Username" />
</div>
<div class="form-group">
<label for="inputPsword" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPsword" aria-describedby="password" placeholder="Password" />
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="right-side col-md-6 d-flex align-items-center">
<div class="container">
<div class="row no-gutters justify-content-center">
<div class="col-md-6 text-center align-items-center">
<div class="form-box-top text-center text-light">
<h2>Register Now</h2>
<p>Fill in the below form to get instant access.</p>
</div>
<div class="form-box rounded">
<form>
<div class="form-group">
<label for="inputFName" class="sr-only">Full Name</label>
<input type="text" class="form-control" id="inputFName" aria-describedby="fullName" placeholder="Full Name" />
</div>
<div class="form-group">
<label for="inputEmail" class="sr-only">Email</label>
<input type="email" class="form-control" id="inputEmail" aria-describedby="email" placeholder="Email" />
</div>
<div class="form-group">
<label for="inputMobile" class="sr-only">Mobile</label>
<input type="number" class="form-control" id="inputMobile" aria-describedby="mobile" placeholder="Mobile Number" />
</div>
<div class="form-group">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword" aria-describedby="password" placeholder="Password" />
</div>
<div class="form-group">
<label for="inputCPassword" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputCPassword" aria-describedby="confirmPassword" placeholder="Confirm Password" />
</div>
<div class="form-group row text-dark">
<label for="checkYesNo" class="col-auto pt-0 col-form-label">You have Reference ID:</label>
<div class="col-auto">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio1" value="option1" />
<label class="custom-control-label" for="inlineRadio1">Yes</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio2" value="option2" />
<label class="custom-control-label" for="inlineRadio2">No</label>
</div>
</div>
</div>
<div class="form-group">
<label for="inputREmail" class="sr-only">Reference Email ID</label>
<input type="email" class="form-control" id="inputREmail" aria-describedby="referenceEmail" placeholder="Referral Email ID" />
</div>
<div class="form-group text-dark">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkTC" />
<label class="custom-control-label" for="checkTC">
I Agree all the Terms & Condition
</label>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JQuery,then Popper.js, then Bootstrap.min.js -->
<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/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/indexnavigation.js"></script>
</body>
</html>
just remove the following code present in your CSS, That should fix it.
#media screen and (min-width:768px) {
.left-side,
.right-side {
height: 100vh;
}
}
I have created a panel for my webpage. The panel contains two text boxes with labels. As of now the two text boxes are in the same row. I want each text box to be in a different row. How should I do it? I have tried including the <br> inside the panel.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.navbar img {
float: left;
width: 80px;
height: 80px;
position: relative;
top: -12px;
}
.navbar h1 {
top: 18px;
font-size: 30px;
color: brown;
text-align: center;
}
.navbar {
min-height: 80px;
}
</style>
</head>
<body style="background-color:powderblue;">
<nav class="navbar navbar-default header">
<div class="container-fluid">
<div class="navbar-header">
<h1>My heading</h1>
</div>
</div>
</nav>
<div class="container">
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
<div class="form-group">
<label class="col-md-3 control-label"><span style="color:red">*</span>Enter your name</label>
<div class="col-md-3">
<input id="candidate-name" name="candidate-name" type="text" placeholder="John"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"><span style="color:red">*</span>Enter your email</label>
<div class="col-md-3">
<input id="candidate-email" name="candidate-email" type="email" placeholder="johndoe#example.com"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="save"></label>
<div class="col-md-8">
<input class="btn btn-success show-modal" type='submit' id='submit' value='Go for schedule'>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I can see two text boxes with name and email coming in one row.
What I have tried is
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
by referring to this link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_stacked_form,
but its not working. What am I doing wrong?
You want something like this?
<div class="form-group">
<div class="row">
<label class="col-md-4 control-label"><span style="color:red">*</span>Enter your name</label>
<div class="col-md-7">
<input id="candidate-name" name="candidate-name" type="text" placeholder="John"
class="form-control input-md" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 control-label"><span style="color:red">*</span>Enter your email</label>
<div class="col-md-7">
<input id="candidate-email" name="candidate-email" type="email"
placeholder="johndoe#example.com" class="form-control input-md" required>
</div>
</div>
</div>
Or Like this:
<div class="container">
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
<div class="row justify-content-center">
<div class="col-lg-6 col-md-3 col-sm-3 clo-xs-3">
<div class="form-group">
<label class="formGroupExampleInput" for="formGroupExampleInput">Enter your name</label>
<input id="afm" class="form-control custom-input-text" placeholder="">
</div>
</div>
<div class="col-lg-6 col-md-3 col-sm-4 clo-xs-3" >
<div class="form-group">
<label class="formGroupExampleInput" for="formGroupExampleInput">Enter your email</label>
<input id="afm" class="form-control custom-input-text" placeholder="">
</div>
</div>
</div>
</div>
</div>
</div>
Issue is using col remove that col form label and input will fix the issue
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.navbar img {
float: left;
width: 80px;
height: 80px;
position: relative;
top: -12px;
}
.navbar h1 {
top: 18px;
font-size: 30px;
color: brown;
text-align: center;
}
.navbar {
min-height: 80px;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body style="background-color:powderblue;">
<nav class="navbar navbar-default header">
<div class="container-fluid">
<div class="navbar-header">
<h1>My heading</h1>
</div>
</div>
</nav>
<div class="container">
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
<div class="form-group ">
<label class=" control-label"><span style="color:red">*</span>Enter your name</label>
<div class="">
<input id="candidate-name" name="candidate-name" type="text" placeholder="John"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class=" control-label"><span style="color:red">*</span>Enter your email</label>
<div class="">
<input id="candidate-email" name="candidate-email" type="email" placeholder="johndoe#example.com"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class=" control-label" for="save"></label>
<div class="">
<input class="btn btn-success show-modal" type='submit' id='submit' value='Go for schedule'>
</div>
</div>
</div>
</div>
</div>
</body>
I got what I'm looking for but the animation effect isn't smooth as it should. I understand that the animation would be better if I don't have padding but I need padding to get the design. How do I solve this problem?
JSFiddle DEMO
HTML:
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.block {
margin-top: 30px;
}
.collapse {
background-color: #eee;
padding: 30px 15px;
}
This is base on Bootstrap 4, the latest version.
When you set .collapse it first apply the bootstrap style of .collapse and after yours because that there is delay...
Use the id #collapseExample to style:
.block {
margin-top: 30px;
}
#collapseExample{
background-color: #eee;
padding: 30px 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT to your comment!
There's a "drag" when it closes.
Use jquery onclick the checkbox and apply padding as below:
fiddle here
$('.checkbox').on('click', function(){
if($('.collapse.show').length>0)
$('.collapse').css('padding','0');
else
$('.collapse').css('padding','30px 15px');
});
.block {
margin-top: 30px;
}
#collapseExample{
background-color: #eee;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I got it resolved. It's because I added the padding in parent div.
.block {
margin-top: 30px;
}
.block__collapse {
background-color: #eee;
padding: 30px 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="block__collapse">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have 2 <input> fields next to each other. The thing I want to achieve is similar to the for class class="input-group-addon" in Bootstrap - unfortunately it's only for <span>.
How can I merge these inputs to one?
jsFiddle
This is what I am looking for:
Try this
css:
#firstInput {
width: 30%;
display: inline-block;
float: left;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
#secondInput {
width: 70%;
display: inline-block;
float: left;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-left:0px;
}
and the HTML:
<div class="form-group">
<label for="firstInput">First Input</label>
<div>
<input type="text" id="firstInput" name="firstInput" ng-model="obj.firstInput" class="form-control">
<input type="text" id="secondInput" name="secondInput" ng-model="obj.secondInput" class="form-control">
</div>
</div>
link https://jsfiddle.net/DTcHh/30252/
<div class="row">
<div class="col-md-2">
<div class="form-group">
<input
type="text"
id="firstInput"
name="firstInput"
ng-model="obj.firstInput" class="form-control">
<input
type="text"
id="secondInput"
name="secondInput"
ng-model="obj.secondInput" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="input-group">
<input id="numbers" name="numbers" type="number" ng-model="obj.num" class="form-control" min="0" />
<span class="input-group-addon">%</span>
</div>
</div>
</div>
body {
margin: 10px;
}
#firstInput, #secondInput {
float: left;
width: 50%;
}
#firstInput {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
#secondInput {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
Try something like this with custom CSS:
CSS:
.input-group .form-control {
width:45%;
margin-right:0%;
}
HTML:
<div class="input-group">
<input type="text" class="form-control" id="exampleInput"
placeholder="fname">
<input type="text" class="form-control" id="exampleInput1"
placeholder="lname">
DEMO
Another Not exact but similar way can be using form-inline.
.form-group{
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-inline">
<div class="form-group" style="float:left;">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email" style="border-top-right-radius: 0px;border-bottom-right-radius: 0px;">
</div>
<div class="form-group" >
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" style="border-top-left-radius: 0px;border-bottom-left-radius: 0px;border-left:0px;">
</div>
</div>
Combine bootstrap's form-controls/input fields
.form-control{
border-radius: 0 !important;
}
.input-group .form-control {
margin-right:0%;
width:50% !important;
/* width:100px !important;*/
}
.input-group .form-control:last-child{
margin-left:-1px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="input-group">
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
</div>
</body>
</html>
https://jsfiddle.net/DTcHh/30255/
Use below css to get the desired output
.form-group {
float: left;
}
.form-group #secondInput{
margin-top: 4px;
border-radius:0;
width: 300px;
}
.form-group #firstInput{
border-radius:0;
width: 100px;
}
Try this:
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="padding:0;">
<div class="form-group">
<label for="firstInput"></label>
<input type="text" id="firstInput" name="firstInput" ng-model="obj.firstInput" class="form-control" style="border-radius:0">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="padding:0;">
<div class="form-group">
<label for="secondInput"> </label>
<input type="text" id="secondInput" name="secondInput" ng-model="obj.secondInput" class="form-control" style="border-radius:0">
</div>
</div>
</div>