I need to upload passport and photo but i want it to be inline
<div id="upload">
<div>
<label for="Passportcopy">Passport Copy</label>
<input type="file" id="Passportcopy">
</div>
<div >
<label for="Photo">Photo</label>
<input type="file" id="Photo">
</div>
</div>
css
#passport{
float:left;
display:inline;
width:250px;
}
#photo{
float:right;
display:inline;
width:250px;
}
I have used container with following css .
is it bcz of div the block form of file upload will appear ?
label, input, div {
display: block;
}
input{
margin-bottom:10px;
width: 40px;
}
Or container having width or clear
.container {
width:500px;
clear:both;
}
.container input {
width: 100%;
clear: both;
}
There is a native way to inline form elements in bootstrap using form-inline and form-control classes. You don't need to use any css if you use it in this way.
I have provided a snippet demonstrating it.
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="upload row">
<form class="form-inline">
<div class="row">
<div class="form-group col-xs-6 col-md-3 ">
<label for="Passportcopy">Passport Copy</label>
<input type="file" class="form-control" id="Passportcopy">
</div>
<div class="form-group col-xs-6 col-md-3 col-md-offset-1">
<label for="Photo">Photo</label>
<input type="file" class="form-control" id="Photo">
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Hope this helps!
Are you looking for something like this?
#passport{
float:left;
display:inline;
width:250px;
}
#photo{
float:right;
display:inline;
width:250px;
}
#upload div{ /* new code */
display:inline;
}
<div id="upload">
<div>
<label for="Passportcopy">Passport Copy</label>
<input type="file" id="Passportcopy">
</div>
<div>
<label for="Photo">Photo</label>
<input type="file" id="Photo">
</div>
</div>
Related
Nothing seems to make the image size stay inside the dimensions of the div.
Here is the html code and the css code that corresponds to it.
I have tried max width max height as well as object contain and width and height set to 100%
HTML:
<div class="container">
<div class="center">
<div class="row">
<div class="col-md-4">
<form asp-action="SignIn">
<div class="logo-container">
<img src="~/Assets/SignUp.png" alt="logo image" />
</div>
<h4>Sign up to Snippet</h4>
<div class="form-group">
<input class="form-control" placeholder="Full Name" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Email" type="email" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Phone Number" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Company" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Title" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" type="password" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Confirm Password" type="password" />
</div>
<div class="form-group">
<input type="submit" value="Sign up" class="btn" />
</div>
</form>
</div>
</div>
</div>
</div>
CSS:
.container {
background-color: white;
width: 50%;
}
.logo-container {
width: 80%;
max-height: 400px;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
you would need to make the display on the div inline-block and set it's dimensions. Then the img will take % from its parent
div{
height:100px;
width:100px;
display:inline-block;}
img{
height:100%;
width:100%;
}
#a{
width:50%;
height:50%;
display:block;
}
<div>
<img src = "https://via.placeholder.com/200x200">
</div>
<div id='a'>
<img src = "https://via.placeholder.com/200x200">
</div>
Weird!
Is your css file linked properly?
are you sure there are no spelling mistakes on class names?
maybe try setting img as img {display: inline-block;}
Else, you can just add a overflow of hidden on the img's parent div .logo-container {overflow: hidden}
Also check if you have <meta name="viewport" content="width=device-width, initial-scale=1.0"> inside your <head></head>. It's a very important tag/attribute that displays page based on users screen size (makes your site responsive).
I have an auto-generated file input form element:
<div id="university_logo">
<img src=/media/userprofile/Metallica_-_2008_-_Death_Magnetic_-_Front.jpg>
<div class="form-group">
<label class="control-label" for="id_univercity_logo">Logo</label>
<div class="row bootstrap3-multi-input">
<div class="col-xs-12">
Currently:
userprofile/Metallica_-_2008_-_Death_Magnetic_-_Front.jpg<br />
Change:
<input type="file" name="univercity_logo" autocomplete="off" class="" title="" id="id_univercity_logo" />
</div>
</div>
</div>
</div>
I am trying to remove the labels "Currently:" and "Change:"
My css code is:
#university_logo {
.form-group{
.row{
margin-left: 0;
margin-right: 0;
.col-xs-12{
*:not(#id_univercity_logo){
display: none;
}
}
}
}
}
However the two labels don't disappear.
Can I select a label without a label tag?
Could use visibility
.col-xs-12 {
visibility:collapse; /*hidden, in this case same result*/
font-size: 0px;
}
.col-xs-12 input{
visibility:visible;
}
.col-xs-12 a{
visibility:visible;
font-size: 15px;
}
<div id="university_logo">
<img src=/media/userprofile/Metallica_-_2008_-_Death_Magnetic_-_Front.jpg>
<div class="form-group">
<label class="control-label" for="id_univercity_logo">Logo</label>
<div class="row bootstrap3-multi-input">
<div class="col-xs-12">
Currently:
Image Tag<br />
Change:
<input type="file" name="univercity_logo" autocomplete="off" class="" title="" id="id_univercity_logo" />
</div>
</div>
</div>
</div>
try css code this way
#university_logo .form-group .row {
margin-left: 0;
margin-right: 0;
}
.col-xs-12 {
display: none;
}
<div id="university_logo">
<img src=/media/userprofile/Metallica_-_2008_-_Death_Magnetic_-_Front.jpg>
<div class="form-group">
<label class="control-label" for="id_univercity_logo">Logo</label>
<div class="row bootstrap3-multi-input">
<div class="col-xs-12">
Currently:
userprofile/Metallica_-_2008_-_Death_Magnetic_-_Front.jpg<br /> Change:
<input type="file" name="univercity_logo" autocomplete="off" class="" title="" id="id_univercity_logo" />
</div>
</div>
</div>
</div>
I'm trying to position my bootstrap rows for small devices but I'm running into an issue with my rows.
They are touching the edge of the screen and it looks really ugly, and I tried to offset it with col-ex-off-2 but now that is not only not helping at all, but its messing up the screen medium and large screens.
Also, I can add any margin to the rows either and its making the text boxes look super ugly because they are touching.
Here is a link to the bootply replicating this issue. Notice the text boxes are touching each other and it looks bad. Also they are not side by side like I would prefer.
http://www.bootply.com/Ko7Ky3nj0M
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,body {
height:100vh;
max-width: 1500px;
margin: 0 auto;
padding-top: 00px;
}
h1 {
font-size:50px;
}
.checkbox-margin
{
margin-left:30%;
}
.subtitle
{
display:block;
text-align:right;
border-top: 7px solid #ffffff;
color:white;
font-size:40px;
}
.textarea
{
margin-left:15px;
margin-right:15px;
padding-top:5px;
padding-bottom:10px;
}
.content
{
min-height:90vh;
margin-top:5vh;
margin-bottom:5vh;
border-radius:15px;
box-shadow: 1px 1px 20px #000000;
margin-right:15px;
}
.stylebox
{
border-top-right-radius:15px;
border-bottom-left-radius:15px;
background-color:#FFFFFF;
color:#CC3611;
margin-top:5%;
margin-bottom:7%;
}
.full
{
min-height:100vh;
}
.textarea p
{
font-size:20px;
font-weight:bold;
}
.textarea h3
{
font-weight:bold;
}
.divarea
{
margin-left:15px;
margin-right:15px;
padding-top:5px;
padding-bottom:10px;
}
.form-margin
{
margin-bottom:2%;
}
#media screen and (max-width: 992px) {
.container .col-xs-12 {
margin:0px;
padding:0px;
}
.col-xs-12
{
margin-top:50px;
padding-bottom:10px;
padding-left: 10px;
padding-right:10px;
}
.content
{
min-height:100vh;
border-radius:0px;
box-shadow: 0px;
}
h1 {
padding:0px;
}
}
</style>
</head>
<body>
<div class="container full">
<div class="row full">
<div class="col-xs-0 col-md-2">
</div>
<div class="col-xs-12 col-md-8 content">
<div class='divarea'>
<div class='row form-margin'>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
</div>
<div class='row form-margin'>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
</div>
<div class='row form-margin'>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
</div>
</div>
</div>
<div class="col-xs-0 col-md-2"></div>
</div>
</div>
</body>
</html>
You need to change the way that you are using your forms, there is no need to add custom css, if you wrap each pair of elements in a "input-group" class, you can apply other classes that separates the information nicely. If you check the Bootsrap input group documentation here you can get some examples on form elements.
You can solve you current problem by adding an empty element , such as a label, with the class m-b-1 (margin-bottom-1rem).
Note that this is a hotfix and would not recommend it otherwise.
<div class="row form-margin">
<div class="col-xs-8 col-xs-offset-2 col-md-6 ">
<input placeholder="Test" type="text" class="form-control" id="usr">
<label class="m-b-2"></label>
</div>
<div class="col-xs-8 col-xs-offset-2 col-md-6">
<input placeholder="Test" type="text" class="form-control" id="usr">
<label class="m-b-2"></label>
</div>
</div>
I have a bootstrap form with the following css code in it. I have tried to close up the blank spaces in the form by adding margin:0 attribute but still the spaces between the element is there.
css form code
<div class="row-fluid">
<form style="width: 90%; height: 100%; margin-top:1px;" method="post"novalidate="novalidate" class="form well">
<div class="row-fluid">
<div>
<label for="complaints">Message *</label>
<textarea style="width:100%;" name="complaints" rows="3" required></textarea>
</div>
</div>
<div class="form-actions">
<input style="width:100%; background-color:#da291c;" class="btn btn-primary" name="commit" type="submit" value="Send">
</div>
</form>
</div>
this is the picture of the above form
My challenge is to close the gaps on the areas pointed with arrows.
I am using this version of bootstrap
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
You can remove the margin-bottom that bootstrap adds to the class .control-group
.row-fluid div.control-group, div.form-actions {
margin-bottom: 0px;
}
div.my-form{
padding-bottom: 0px;
margin-top:0px;
padding-top:0px;
}
.control-group input,.control-group textarea{
margin-bottom: 0px;
}
form.form{
padding-bottom: 0;
padding-top:0;
}
UPDATED jsfiddle with your code
You can use this code:
input[type=text], .txtarea{
margin-bottom: 10px;
}
In bootstrap already they keep on the margin property always. we can overwrite that to solve your problem.
you need to add one class like this:
.splclass{
margin:0 !important;
padding:0 !important;
}
Add additionally in the form inline style like this:
<form style="width: 90%; height: 100%; margin-top:1px; padding-top:5px;" method="post"novalidate="novalidate" class="form well ">
i think it will helpful
Well if you don't want any space in between, you definitely don't want any margin. Move the CSS to it's own file:
.send {
width:100%;
background-color:#da291c;
}
.message {
width:100%;
}
.form {
width: 90%;
height: 100%;
margin: 0;
}
and html:
<div class="row-fluid">
<form class="form" method="post" novalidate="novalidate" class="form well">
<div class="row-fluid">
<div class="control-group span12">
<label for="name">Name *</label>
<input ng-model="name" name="name" type="text" class="input-block-level" required>
</div>
</div>
<div class="row-fluid">
<div class="control-group span12">
<label for="email">Email *</label>
<input name="email" placeholder="" type="email" class="input-block-level" ng-model="email"ng-change="id=email" required>
</div>
</div>
<div class="row-fluid">
<div class="control-group span12">
<label for="complaints">Message *</label>
<textarea class="message" name="complaints" rows="3" required></textarea>
</div>
</div>
<div class="form-actions">
<input class="btn btn-primary send" name="commit" type="submit" value="Send">
</div>
</form>
</div>
and you can see the fiddle here: https://jsfiddle.net/6j98311j/
i'm not very familiar with CSS, i'm trying to apply a border on my login form, here is the code i use:
login.html:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<div id="login_container">
<form action="#" method="POST">
<div class="row">
<label for="username" class="label">Username</label>
<input type="text" class="field" name="username" />
</div>
<div class="row">
<label for="password" class="label">Password</label>
<input type="password" class="field" name="password" />
</div>
</form>
</div>
css/style.css:
#login_container {
margin-top:50px;
margin-left: auto;
margin-right: auto;
width: 300px;
border:1px solid black;
display:block;
}
.field {
float:right;
margin-left: 10px;
}
label {
float:left;
}
.row{
display:block;
clear:both;
}
and the output:
Why does the border cross the password text field?
EDIT:
with
form{
border:1px solid black;
}
the output is:
Add overflow:auto; to your #login_container div.
jsFiddle example
Because the inner elements are floated, you need to specify the overflow property to bring the border back around them.