I have a div that aligns well on Chrome but not Internet Explorer. As I cannot embed images here is a link to what happens. https://www.dropbox.com/s/ymzt6y3zwm6mylf/ie%20gc.png
The CSS for the element is
.calculator-submodule {
float: left;
text-align: center;
padding-bottom: 10px;
padding-right: 25px;
font-size: 20px;
font-weight: 300;
}
.calculator-submodule #total {
padding-top: 42px;
}
.calculator-total {
display: inline-block;
padding-left:20px;
padding-top: 40px;
}
And HTML
<div class="calculator">
<div class="calculator-submodule input-group">
<h4>Adult (12+)</h4>
<button class="btn theme-btn" id="decrease" value="Decrease Value" >-</button>
<input type="text" id="adult" value="1" class="form-control input-usmall" min="0" disabled>
<button class="btn theme-btn" id="increase" value="Increase Value" >+</button>
</div>
<div class="calculator-submodule input-group">
<h4>Child (2-11)</h4>
<button class="btn theme-btn" id="decreasec" value="Decrease Value" >-</button>
<input type="text" id="child" value="0" class="form-control input-usmall" min="0" disabled>
<button class="btn theme-btn" id="increasec" value="Increase Value" >+</button>
</div>
<div class="calculator-submodule">
<div id="total">
<span class="pound">£</span>
<span id="total">39</span><span class="pound">.00</span>
</div>
</div>
For using IE8 and under you can make an IE only stylesheet. And use:
display: inline;
Instead of:
display: inline-block;
Related
I'm new to web designing. PLS help me to create this input fields responsive and also how I put margins in all around like it's in middle(I want get those columns in the middle of the page).
<!DOCTYPE html>
<html>
<head>
<title>Login/Registor</title>
<style type="text/css">
body{
margin:0px;
padding:0;
overflow-x: hidden!important;
}
.containor{
/*text-align: center;*/
margin:225px 3px 5px 3px auto;
}
.form-group input{
width: 900px;
height: 40px;
border-color: silver;
padding: 0;
margin-top: 3px;
margin-bottom: 10px;
}
.form-group label{
text-align: left;
padding-left: 3px;
margin-bottom: 3px;
}
.buttons{
margin-top: 20px;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="containor">
<div class="row">
<div class="col-6 col-sm-12 col-md-6 border" id="login_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Welcome to Login Section!</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-info btn-block rounded-pill">Login</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Credentials</button>
Fogot password!
</div>
</div>
</form>
</div>
<div class="col-right-6 col-sm-12 col-md-6 border" id="reg_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Don't have an Account yet!<br>Resgister In Here</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<label>Confirm Password</label>
<input type="password" class="form-control" name="confirm_paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-success btn-block rounded-pill">Registor</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Info</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
if any one have samples like this create using html,css,bootsrap pls share to get more idea about theses things. Thanks
Is this what you are looking for?
If then add the below style to fix the input moving out of container.
.form-group input {
width: 900px;
max-width: 100%;
}
Working Fiddle
body {
margin: 0px;
padding: 0;
overflow-x: hidden !important;
}
.containor {
/*text-align: center;*/
margin: 225px 3px 5px 3px auto;
}
.form-group input {
width: 900px;
height: 40px;
border-color: silver;
padding: 0;
margin-top: 3px;
margin-bottom: 10px;
max-width: 100%;
}
.form-group label {
text-align: left;
padding-left: 3px;
margin-bottom: 3px;
}
.buttons {
margin-top: 20px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<div class="containor">
<div class="row">
<div class="col-6 col-sm-12 col-md-6 border" id="login_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Welcome to Login Section!</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-info btn-block rounded-pill">Login</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Credentials</button>
Fogot password!
</div>
</div>
</form>
</div>
<div class="col-right-6 col-sm-12 col-md-6 border" id="reg_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Don't have an Account yet!<br>Resgister In Here</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<label>Confirm Password</label>
<input type="password" class="form-control" name="confirm_paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-success btn-block rounded-pill">Registor</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Info</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
This is reduction of a simple page I am working on. I am trying to align the image, User Name, Password and Sign in button with the E from Enter. No matter what I do they are sticking to the left of the page and not budging. Do I need to tie them to the Enter with a special align?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
.text-box {
text-align: left;
width: 300px;
position: center;
}
.btn {
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<img src="" width="200" height="300"/>
<div class="login-header">
<h2 id="title" align="center">
Enter
Test
</h2>
<br>
</div>
<form onsubmit="return false;" method="post">
<div class="form-group text-box" align="center">
<label for="name">User Name*</label>
<input
type="email"
class="form-control"
id="email">
</div>
<div class="form-group text-box">
<label for="name">Password*</label>
<input
type="password"
class="form-control"
id="password"
placeholder="Enter your password">
</div>
<button
type="submit"
id="btn-login"
class="btn btn-primary btn-block button">
Sign In
</button>
<br>
<hr>
</form>
There's a lot I had to change, as your layout is honestly not very well written, it seems like you are learning to write HTML from a very old guide (I'm guessing W3). You shouldn't be using things like <br> or The sooner you can start seeing styling as blocks and not the alignment of text like in a word document, the better.
but what I did here was remove the formatting from your header, left aligned it, then gave both it and your form a fixed width and automatic margin:
.text-box {
text-align: left;
width: 300px;
position: center;
}
.btn {
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#title{
margin: auto;
width:250px;
}
form{
margin: 0 auto;
width:250px;
}
<img src="" width="200" height="300"/>
<div class="login-header">
<h2 id="title">
Enter
</h2>
<br>
</div>
<form onsubmit="return false;" method="post">
<div class="form-group text-box" align="center">
<label for="name">User Name*</label>
<input
type="email"
class="form-control"
id="email">
</div>
<div class="form-group text-box">
<label for="name">Password*</label>
<input
type="password"
class="form-control"
id="password"
placeholder="Enter your password">
</div>
<button
type="submit"
id="btn-login"
class="btn btn-primary btn-block button">
Sign In
</button>
<br>
<hr>
</form>
However that isn't what I would recommend doing, you should put the header IN the form. Like so, then format the form the same as before.
.text-box {
text-align: left;
width: 300px;
position: center;
}
.btn {
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
form{
margin: 0 auto;
width:250px;
}
<img src="" width="200" height="300"/>
<form onsubmit="return false;" method="post">
<h2 id="title">
Enter
</h2>
<div class="form-group text-box" align="center">
<label for="name">User Name*</label>
<input
type="email"
class="form-control"
id="email">
</div>
<div class="form-group text-box">
<label for="name">Password*</label>
<input
type="password"
class="form-control"
id="password"
placeholder="Enter your password">
</div>
<button
type="submit"
id="btn-login"
class="btn btn-primary btn-block button">
Sign In
</button>
<br>
<hr>
</form>
Following is the HTML content inside <body> tag
<div class="container mt-5 pt-2 pb-4" id="container-primary">
<div class="container mt-3" id="container-secondary"><h3>Welcome</h3><br> Please Enter your <strong>Password</strong> to view the question</br>
</div>
<div class="container pt-2" id="container-tertiary">
<form method="post" id="pwd-form" autocomplete="off">
<input type="password" class="form-control mx-auto" id="pwd" placeholder="Password" name="pwd" spellcheck="false"></input>
<div class="container" id="pwd-error-container"><?php
session_start();
if (isset($_SESSION['wrongpwd'])){
echo $_SESSION['wrongpwd'];
unset($_SESSION['wrongpwd']);
} ?>
</div>
<div class="container mx-auto" id="button-container">
<input type="submit" class="btn btn-info float-left" id="forgotpwd" value="Forgot Password">
<input type="button" class="btn btn-info float-right" id="submit-button" value="Validate" disabled>
</div>
</form>
There are two buttons inside the <form>. But when I inspect the webpage in the browser, I observed that those two buttons are not inside the <form>. What actually is causing the problem?
Following is the css:
#container-primary{
background-color: ;
}
#container-secondary{
background-color: ;
text-align: center;
}
#container-tertiary{
background-color: ;
text-align: center;
margin-top: 30px;
}
#pwd-form{
background-color: green;
}
#pwd{
width: 40%;
min-width: 300px;
font-size: 18px;
padding-top: 1px;
padding-bottom: 1px;
}
#pwd-error-container{
background-color: ;
font-size: 19px;
color: rgb(217, 48, 37);
font-weight: bold;
}
#button-container{
margin-top: 25px;
width: 40%;
min-width: 300px;
margin-bottom: 25px;
}
#question-form{
opacity: 0.3;
}
#answer{
width: 40%;
min-width: 300px;
font-size: 18px;
padding-top: 1px;
padding-bottom: 1px;
margin-top: 5%;
}
</style>```
I don't know where I have gone wrong. Screenshots of the inspection have been given in the comments section.
Remove your float-left and float-right classes from button.Then it work fine.
<div class="container" id="button-container">
<div class="row">
<div class="mr-auto">
<button type="submit" class="btn btn-info" id="forgotpwd">Forgot Password</button>
</div>
<div class="">
<button type="button" class="btn btn-info" id="submit-button" disabled>Validate</button>
</div>
</div>
</div>
https://jsfiddle.net/Lebxp70k/44/
your html code is invalid. You have closing tags where none are required and you are missing other closing tags that are required. Here's a corrected version
#container-primary{
background-color: ;
}
#container-secondary{
background-color: ;
text-align: center;
}
#container-tertiary{
background-color: ;
text-align: center;
margin-top: 30px;
}
#pwd-form{
background-color: green;
}
#pwd{
width: 40%;
min-width: 300px;
font-size: 18px;
padding-top: 1px;
padding-bottom: 1px;
}
#pwd-error-container{
background-color: ;
font-size: 19px;
color: rgb(217, 48, 37);
font-weight: bold;
}
#button-container{
margin-top: 25px;
width: 40%;
min-width: 300px;
margin-bottom: 25px;
}
#question-form{
opacity: 0.3;
}
#answer{
width: 40%;
min-width: 300px;
font-size: 18px;
padding-top: 1px;
padding-bottom: 1px;
margin-top: 5%;
}
<div class="container mt-5 pt-2 pb-4" id="container-primary">
<div class="container mt-3" id="container-secondary">
<h3>Welcome</h3><br>
Please Enter your <strong>Password</strong> to view the question<br>
</div>
<div class="container pt-2" id="container-tertiary">
<form method="post" id="pwd-form" autocomplete="off">
<input type="password" class="form-control mx-auto" id="pwd" placeholder="Password" name="pwd" spellcheck="false">
<div class="container" id="pwd-error-container"><?php
session_start();
if (isset($_SESSION['wrongpwd'])){
echo $_SESSION['wrongpwd'];
unset($_SESSION['wrongpwd']);
} ?>
</div>
<div class="container mx-auto" id="button-container">
<input type="submit" class="btn btn-info float-left" id="forgotpwd" value="Forgot Password">
<input type="button" class="btn btn-info float-right" id="submit-button" value="Validate" disabled>
</div>
</form>
</div>
</div>
here's your html. You can clearly see in the snippet that the form tag is in red i.e. it's not closed. The problem is both your < /br > and your < /input > tags. < /br > should just be < br > and < input > tags do not get closed with < / input >
<div class="container mt-5 pt-2 pb-4" id="container-primary">
<div class="container mt-3" id="container-secondary"><h3>Welcome</h3><br> Please Enter your <strong>Password</strong> to view the question</br>
</div>
<div class="container pt-2" id="container-tertiary">
<form method="post" id="pwd-form" autocomplete="off">
<input type="password" class="form-control mx-auto" id="pwd" placeholder="Password" name="pwd" spellcheck="false"></input>
<div class="container" id="pwd-error-container"><?php
session_start();
if (isset($_SESSION['wrongpwd'])){
echo $_SESSION['wrongpwd'];
unset($_SESSION['wrongpwd']);
} ?>
</div>
<div class="container mx-auto" id="button-container">
<input type="submit" class="btn btn-info float-left" id="forgotpwd" value="Forgot Password">
<input type="button" class="btn btn-info float-right" id="submit-button" value="Validate" disabled>
</div>
</form>
I am trying to put a checkbox, label and input box next to each other.
I separated it into divs and and put divs side-by-side.
I was able to get the buttons center but they are to close together which I am trying to fix too.
My question is how can I get <div class="col-centered border"> into a smaller border and put a checkbox, label and input box next to each other. In the end I want the buttons and all as a container.
html
<div class="col-centered border">
<form>
<div class="first">
<div class="form-group">
<input type="checkbox" class="form-check-input">
<label for="ssn">SSN:</label>
<input type="text" class="form-control-file" id="ssn" placeholder="Social Security Number">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="lastname">Lastname:</label>
<input type="text" class="form-control-file" id="lastname" placeholder="Password">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="role">Role:</label>
<input type="text" class="form-control-file" id="role" placeholder="Password">
</div>
</div>
<div class="second">
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="userId">User ID:</label>
<input type="text" class="form-control-file" id="userId" placeholder="User Id">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="office">Office</label>
<input type="text" class="form-control-file" id="office" placeholder="Office">
</div>
<input type="checkbox">Include Subordinates
</div>
<div class="center-block lower-button">
<div class="center-block">
<button type="submit" class="btn btn-default btn-md left-button">Search</button>
<button type="submit" class="btn btn-default btn-md right-button">Reset</button>
</div>
</div>
</form>
</div>
css
.first {
width: 100px;
float: left;
padding-left: 450px;
}
.second {
width: 200px;
float: right;
padding-right: 950px;
}
.col-centered{
padding-top: 30px;
float: none;
margin: 0 auto;
}
.btn-beside {
position: center;
left: 100%;
top: 0;
margin-left: -10px;
}
.lower-button{
padding-top:250px;
padding-left:575px;
}
.left-button{
padding-right: -14px;
}
.form-group{
text-align: center;
}
I am using bootstrap
Here's a Fiddle for you to take inspiration from.
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="input-group-addon">
<label for="tbox">My Label</label>
</span>
<input type="text" id="tbox" class="form-control">
</div>
</div>
</div>
</div>
As per the official documentation for Bootstrap.
Here is my code for the form:
<div class="container-full">
<div class="jumbotron text-center" style="background-color:transparent; margin:auto">
<form name="verifyForm" ng-submit="submitForm()" novalidate>
<div class="input-group input-group-lg col-xs-1" style="margin: auto;" ng-class="{'has-error': verifyForm.verifyCode.$invalid}">
<input type="text" class="form-control" placeholder="Username" style="min-width:15em">
<span class="input-group-addon">
<button id="filter" class="btn btn-primary btn-block" onclick="submitForm();" style="background-color:#6e5cbf; color: #ffffff">
>
</button></span>
</div>
</form>
</div>
The problem I have is when I add a button to the button group, it is bigger than the input box:
How can I stop this from happening? Thanks
You could do it by changing the button to a span with role=button on the parent and switching a few styles around, like so
<div class="container-full">
<div class="jumbotron text-center" style="background-color:transparent; margin:auto">
<form name="verifyForm" ng-submit="submitForm()" novalidate>
<div class="input-group input-group-lg col-xs-1" style="margin: auto;" ng-class="{'has-error': verifyForm.verifyCode.$invalid}">
<input type="text" class="form-control" placeholder="Username" style="min-width:15em">
<span class="input-group-addon" style="background-color:#6e5cbf;" role="button">
<span id="filter" onclick="submitForm();" style="color: #ffffff">
>
</span>
</span>
</div>
</form>
</div>
</div>
While the bootstrap documentation doesn't say anything about buttons, it does say
We do not support multiple form-controls in a single input group.
Looking at the styling of buttons vs. form-controls I'd assume that the restriction extends to buttons as well.
It's going to look like this (image)
Try to add form-group for these input and button element.
something like
<form name="verifyForm" ng-submit="submitForm()" novalidate>
<div class="input-group input-group-lg col-xs-1" style="margin: auto;" ng-class="{'has-error': verifyForm.verifyCode.$invalid}">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" style="min-width:15em">
</div>
<div class="form-group">
<span class="input-group-addon">
<button id="filter" class="btn btn-primary btn-block" onclick="submitForm();" style="background-color:#6e5cbf; color: #ffffff"></button>
</span>
</div>
</div>
</form>
It will differentiate those two blocks and you can write cutom classes on top of that
Your button has class .btn which has following style:
.btn{
display: inline-block;
padding: 6px 12px; //this is what making it to extend space
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143; //and this too
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
So the work-around will be override those properties. Add a class say 'special' to the button and override following attributes:
.special{
padding:0px !important;
line-height:1
}
DEMO
Why is everyone making it complicated? Just put this and y'all will be fine.
This:
<input class="btn btn-outline-primary form-control-sm" type="button" Value="Send" />
instead of:
<button class="btn btn-outline-primary form-control-sm">Send</button>
Boom. We done.