I have a form whose input fields are all aligned horizontally end to end. I want it to be aligned at the center of the webpage.I have tried using margin: 0 auto. That didnt help. I have also tried position: absolute and left top but that didn't give me desire results.
also submit button aligned at the center.
here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>APT - Aviation | Travel | Hospitality</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<div class="background-wrap">
<video id="video-bg-elem" poster="images/clouds-from-an-airplane-window-picjumbo-com.gif" preload="auto" autoplay="true" loop muted>
<source src="video/clouds.mp4" type="video/mp4">
</video>
</div>
<div id="logo">
<img src="images/APT-LOGO-PNG.png" >
</div>
</div>
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email">
</div>
<div class="form-group">
<input type="tel" class="form-control" id="contact" name="contact" placeholder="Enter contact">
</div>
<button style="display:block;" type="submit" class="btn btn-default">Submit</button>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Use the following css for the form :
position:absolute;
left: 50%;
top : 50%;
transform: translate(-50%, -50%);
You can use the following css snippet, which follows latest feature of flexbox styling:
body {
display:flex;
justify-content:center;
align-items:center;
flex-direction: column;
}
input {
width: 200px;
margin-top: 25px;
}
Related
I have an image within a container that needs to be down scaled. When rendered out the full source code is as below.
/*STAFF LOGIN*/
#myMainContainer {
border: 10px solid red;
}
#logoStaffLoginPage {
width: 50%;
height: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href=/static/main.css>
<link rel="stylesheet" href=/static/style.css>
<link rel="shortcut icon" type="image/png" href="/static/media/favicon.png" />
<title></title>
<!--font-awesome including icon for shopping cart-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Font awesome-->
<script src="https://kit.fontawesome.com/efc09bd617.js" crossorigin="anonymous"></script>
<!--Google recaptcha-->
<script src="https://www.google.com/recaptcha/enterprise.js?render=6LdNCXEhAAAAAHy7vvB9oqTF8zSfVrGDIfr-82Re"></script>
<!--Google analytics-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-20BMMNWM05"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-20BMMNWM05');
</script>
</head>
<body>
<div class="container" id="myMainContainer">
<div class="row">
<div class="col">
<img src="/media/logoWithText.png" alt="Logo" id="logoStaffLoginPage">
</div>
</div>
<div class="row">
<div class="col bodyTextBold centerText">
Staff Login
</div>
</div>
</div>
<div class="container">
<form method="post" action="/accounts/login/">
<input type="hidden" name="csrfmiddlewaretoken" value="V3d7Hqf3vYG8whYv6xF7yU0Cak3dKk21xn7U6X6dxCXEPdHAWd9URA8Sc69YRlOy">
<label for="id_username">Username:</label>
<br>
<input class="form-control" type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" required id="id_username">
<br><br>
<label for="id_password">Password:</label>
<br>
<input class="form-control" type="password" name="password" autocomplete="current-password" required id="id_password">
<br>
<br>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
I have tried with max-width and max-height in css and none of them seem to work. Also I have tried to put the img out of the container, and even outside it does not scale properly. Also I have tried clear the cookies, and still I am unable to scale down the image.
Below is a screen dump of the page, and I want to down scale the logo image.
There seem to be jquery file missing. jquery can help to support with the responsive website design need which allow you to set the size condition of your file based on the window size limitation.
Well, you can try changing the size of parent container. and use object fit property for logo. The logo image inside will scale itself according to it.
Reference: https://www.delftstack.com/howto/css/resize-image-css/#:~:text=Use%20the%20object%2Dfit%20Property%20to%20Resize%20the%20Image%20in%20CSS,-We%20can%20use&text=We%20can%20specify%20the%20way,given%20dimension%20of%20the%20container.
parent-div{
height:200px;
width:300px;
}
image{
height:100%;
width:100%;
object-fit:contain;
}
I figured it out. I was edit the wrong css file.
As the title says I'm trying to use Bootstrap 3 grid system with a fixed wrapper. But when I resize the Browser the columns stack up even if the wrapper stays the same size?
BTW: I'm using version 3 so that I can move to a responsive layout after I have ported the site. (Which is huge and I'm alone, so step by step is the only option ...)
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<style>
/* Custom container */
.container-fixed {
margin: 0 auto;
max-width: 800px;
min-width: 800px;
width: 800px;
background-color:#C05659;
}
.container-fixed > hr {
margin: 30px 0;
}
</style>
</head>
<body>
<div class="container-fixed">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<hr>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
The sm,md,lg,etc.. cols wrap/stack responsively. Use the non-stacking col-xs-* class...
<div class="container">
<div class="row">
<div class="col-xs-4">.col-4</div>
<div class="col-xs-4">.col-4</div>
<div class="col-xs-4">.col-4</div>
</div>
</div>
Demo: http://bootply.com/80085
EDIT: Bootstrap 4, the xs no longer needs to be specified..
<div class="container-fluid">
<div class="row">
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
</div>
</div>
please could you assist with printing a dropdown selection value when using the Print.js Javascript Library, the original selection remains and it does not dynamically change when you get the print window...
https://codepen.io/markchavush/pen/WWrWda
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Your page title here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<form method="post" action="#" id="printJS-form">
<div class="row">
<div class="six columns">
<label for="exampleEmailInput">Your email</label>
<input class="u-full-width" type="email" placeholder="test#mailbox.com" id="exampleEmailInput">
</div>
<div class="six columns">
<label for="exampleRecipientInput">Reason for contacting</label>
<select class="u-full-width" id="exampleRecipientInput">
<option value="Option 1">Questions</option>
<option value="Option 2">Admiration</option>
<option value="Option 3">Can I get your number?</option>
</select>
</div>
</div>
<label for="exampleMessage">Message</label>
<textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
</form>
<button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection', css: 'https://cdnjs.cloudflare.com/ajax/libs/skeleton-framework/1.1.1/skeleton.min.css' })">
Print Form with Header
</button>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
</body>
</html>
Please go directly to the codepen and press the print button to see that the dropdown list value does not appear correctly in the printout...
Cheers
Mark
You can't, not with the Print.js library.
The problem you're facing is a known issue - there was an issue created on their GitHub repo detailing this exact issue back in 2018. (That issue was merged to this open issue instead, since apparently it's the same problem). The original GitHub issuer even created a JSFiddle demoing the same problem you show in your codepen.
My only recommendation would be to attempt to implement something similar to this answer, though I won't pretend it will be easy.
i use FontAwsome icon to put it in a login form, so a user and password icon appear when user enter the sign in form.
the form work correctly with chrome: http://im85.gulfup.com/4Q9sj9.png
but icons appear likes this in firefox: http://im79.gulfup.com/WFKCvm.png
html code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="login panel">
<meta name="author" content="WhiteOne">
<title>Login</title>
<!-- Bootstrap Core CSS -->
<link href="css/flatly/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- icon location -->
<link rel="stylesheet" type="text/css" href="styles/icon.css" />
<!-- Set Full Background -->
<link rel="stylesheet" type="text/css" href="styles/background.css" />
</head>
<body>
<div id="bg">
<img src="login-image.jpg" alt="login screen background">
</div>
<div style="margin: 100px auto 0 auto;">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please Sign In</h3>
</div>
<div class="panel-body">
<form role="form" method="post" action="checklogin.php">
<fieldset>
<div class="form-group">
<span class="usericon">
<input class="form-control" placeholder="Username" name="username" type="text" autofocus>
</span>
</div>
<div class="form-group">
<span class="passwordicon">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</span>
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<input type="submit" name="Login" value="Login" class="btn btn-lg btn-success btn-block">
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="js/plugins/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/sb-admin-2.js"></script>
</body>
</html>
css code for icon: icon.css
.usericon input{
padding-left:25px;
}
.usericon:before{
opacity:.8;
height:11%;
width:25px;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
position: absolute;
content:"\f007";
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
pointer-events: none;
-webkit-font-smoothing: antialiased;
}
.passwordicon input{
padding-left:25px;
}
.passwordicon:before{
opacity:.8;
height:11%;
width:25px;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
position: absolute;
content:"\f023";
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
pointer-events: none;
-webkit-font-smoothing: antialiased;
}
aslo when i try to change the css code using developer tools or even from the css file nothing changed in firefox, that somehow strange!
anyone know how can i solve this problem?
I think it's a bad idea to break the FontAwesome encapsulation the way your rules do. You can position the conventional <i> elements and get the result you want:
<span class=usericon>
<i class="fa fa-user"></i>
<input>
</span>
Simplified from yours, but the same idea. The CSS:
.usericon {
padding: 1px 5px;
position: relative;
display: inline-block;
}
.usericon i {
position: absolute;
top: 4px; left: 10px;
}
.usericon input {
border: 1px solid #bbb;
border-radius: 5px;
padding: 2px 2px 2px 20px;
width: 15em;
}
Here's the CodePen for it. That looks fine to me in both Firefox and Chrome.
How do I get rid of padding in Bootstrap 3's columns?
In the following plunkr, I'd like for the button and text input to be touching: http://plnkr.co/edit/H5EIiCyiH8HbploTghVZ?p=preview and for each to fill the entire width of the div. I'd like them to have no left or right padding. Same for the "pull me left" and "me too" divs.
When I override the padding-left in my own CSS, it pulls everything to the left, making the "Jim" and "Hello" div's content off screen.
Any ideas?
You can achieve this by adding a class to the row which removes padding from all immediate div elements with a class name beginning with "col-".
See here: http://plnkr.co/edit/MBkojy?p=preview
Here's the entire code what you wanted :) Please give a try
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<style>
body {
padding-top: 60px;
}
#media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
</style>
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
Just a div
<div class="row">
<div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">Jim</div>
<div class="col-xs-6">Hello</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6" style="padding-right:0px !important; padding-left:0px !important">
<button class="btn" class="col-xs-12" style="width:100%; float:right; background-color:green; ">Click</button>
</div>
<div class="col-xs-6" style=" padding-left:0px !important; padding-right:0px !important">
<input type="text" class="col-xs-12" style="width:100%;">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">pull me left</div>
<div class="col-xs-6">me too</div>
</div>
</div>
</div>
</div>
I have done it for the button and text input :) you can proceed in the same way :)
You can set all divs to no padding:
div {
padding-left: 0px !important;
padding-right: 0px !important;
}
For the other two divs, you'll need to give them some named class (in my example 'padLeft') that return the left padding to the divs.
div.padLeft {
padding-left: 15px;
}
That is the minimally invasive way to do it. If you have more div's where you want padding than not you simply inverse this, using a separate class for divs that you want the padding removed and leave the others to their default.