I want to position my button on the right side using CSS.
here's the script:
<input id="search" class="form-control" type="text" placeholder="Search Location" style="margin-left: 100px; margin-top: 10px; width: 30%; z-index: 1;">
<input type="button" class="btn btn-default" onclick="location.reload();" style="width: 10%; margin-top: 10px; position: absolute; z-index: 1; background-color: #ffffff; border: 1px solid #dce4ec; color: #2c3e50" value="Refresh" />
<div id="map" style="position: relative;"></div>
Try this
.search-form input {
display: inline-block;
}
<div class="search-form">
<input id="search" class="form-control" type="text" placeholder="Search Location" style="margin-left: 100px; margin-top: 10px; width: 30%; z-index: 1;">
<input type="button" class="btn btn-default" onclick="location.reload();" style="width: 10%; margin-top: 10px; position: absolute; z-index: 1; background-color: #ffffff; border: 1px solid #dce4ec; color: #2c3e50" value="Refresh" />
</div>
<div id="map" style="position: relative;"></div>
Add all into one container and position the container, then add width to both to be equal 100%:
<style>
.container {
position: absolute;
top: 10px;
left: 100px;
}
.container #search {
width:80%;
}
.container .btn {
width:20%;
}
</style>
<div class="container">
<input id="search" class="form-control" type="text" placeholder="Search Location">
<input type="button" class="btn btn-default" onclick="location.reload();" value="Refresh" />
</div>
or, if you use bootstrap3, just follow this link:
http://getbootstrap.com/css/#forms-inline
.main{
width:300px;
height:25px;
position:relative;
}
.button{
position:absolute;
right:-75px;
top:0px;
}
<form>
<div class="main">
<input type="text" style="width:100%;" placeholder="Search Here"/>
<button type="reset" class="button">Refresh</button>
</div>
</form>
Try It Once
Related
I intend to have a long input form centered. AFTER THAT I need to place a submit button 15px after the form's right end. Could you please help me to code it? Thank you.
Note: I want to have only the form centered and after that add a button.
My attempt:
<div style="background-color: red; width: 100%; ">
<form action="file.php">
<center><input type="text" name="c2" style="width: 79%; font-size:25pt;"></center>
<input type="submit" value="send" style="position: relative; left: 15px">
</form>
</div>
Adding a photo:
Flexbox would be one of several possibilities.
.wrapper {
display:flex;
align-items: center;
justify-content: center;
}
.inp {
width: 79%;
font-size:25pt;
}
<div style="background-color: red; width: 100%; ">
<form action="file.php">
<div class="wrapper">
<input type="text" name="c2" class="inp">
<br/>
<input type="submit" value="send" style="position: relative; left: 15px">
</div>
</form>
</div>
UPDATED (again)
.main { display: flex; }
.a, .b, .c { background: red; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}
.inp {
width: 79%;
font-size:25pt;
}
.sub {
position: relative;
right: 15px;
top:10px;
}
<div class="main">
<div class="a"></div>
<div class="b">
<form action="file.php">
<div class="wrapper">
<input type="text" name="c2" class="inp">
</div>
</form>
</div>
<div class="c">
<input type="submit" value="send" class="sub">
</div>
</div>
UPDATE (2)
.wrapper {
display:flex;
align-items: center;
justify-content: center;
}
.inp {
width: 79%;
font-size:25pt;
position: relative; left: 15px
}
.sub {
position: relative; left: 30px
}
<div style="background-color: red; width: 100%; ">
<form action="file.php">
<div class="wrapper">
<input type="text" name="c2" class="inp">
<br/>
<input type="submit" value="send" class="sub">
</div>
</form>
</div>
You can do something like this, using flexbox.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
.form-container {
background-color: red;
width: 100%;
display:flex;
flex-flow: row nowrap;
justify-content:center;
padding: 10px 0;
}
<form action="file.php">
<div class="form-container">
<input type="text" name="c2" style="width: 79%; font-size:25pt;">
<input type="submit" value="send" style="position: relative; left: 15px">
</div>
</form>
I need to position the textbox and button inline and that's correct. But when I try different view example tablet view the textbox fit but the button stay in the position. Please see the image.
<input id="search" class="form-control" type="text" placeholder="Search Location" style="margin-left: 100px; margin-top: 10px; position: absolute; width: 30%; z-index: 1;">
<input type="button" class="btn btn-default" onclick="location.reload();" style="margin-left: 700px; width: 10%; margin-top: 10px; position: absolute; z-index: 1; background-color: #ffffff; border: 1px solid #dce4ec; color: #2c3e50" value="Refresh" />
<div id="map" style="position: relative;"></div>
using this #chaitz9:
<input id="search" class="form-control" placeholder="Search Location" style="margin-top: 10px; width: 30%; z-index: 1; margin-left: 100px;" type="text">
<input class="btn btn-default" onclick="location.reload();" style="margin-top: 10px; z-index: 1; background-color: rgb(255, 255, 255); border: 1px solid rgb(220, 228, 236); color: rgb(44, 62, 80); width: 15%;" value="Refresh" type="button">
<div id="map" style="position: relative;"></div>
the output:
Edited: Try using this CSS. I have now wrapped the input fields into a div and given the div property of display: table. And to the input fields display: table-cell
.loc_div{
display: table !important;
width:100%;
}
#search{
margin-left: 100px;
margin-top: 10px;
width: 30%;
z-index: 1;
position:relative;
display:table-cell;
}
.btn {
background-color: #ffffff;
border: 1px solid #dce4ec;
color: #2c3e50;
margin-top: 10px;
width: 20%;
z-index: 1;
margin-left: 10px;
display:table-cell;
}
<div class="loc_div">
<input id="search" class="form-control" placeholder="Search Location" type="text">
<input class="btn btn-default" onclick="location.reload();" value="Refresh" type="button">
</div>
<div id="map" style="position: relative;"></div>
I created an overlay with div over top of it, right now I am trying to center the div over top of the overlay, I tried messing around the left and right but nothing worked.
.request-estimate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background-color: rgba(0,0,0,0.8);
display: none;
}
.request-estimate-box {
display: none;
height: 400px;
width: 40%;
margin: 0 auto;
background-color: #FFF;
z-index: 99999;
position: fixed;
top: 15%;
padding: 20px;
border-radius: 5px;
}
And here is the CSS
<div class="request-estimate"></div>
<div class="request-estimate-box">
<h1>Request Free Estimate</h1>
<form action="" method="post">
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" />
</p>
<p>
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" />
</p>
<p>
<label for="phone">Phone</label>
<input type="phone" name="phone" id="phone" class="form-control" />
</p>
<p>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-default" />
</p>
</form>
</div>
.request-estimate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background-color: rgba(0,0,0,0.8);
/*display: none;*/
}
.request-estimate-box {
/*display: none;*/
height: 400px;
width: 40%;
margin-left:-20%; /*add this = width/2*/
background-color: #FFF;
z-index: 99999;
position: fixed;
top: 15%;
left:50%; /*add this*/
padding: 20px;
border-radius: 5px;
}
<div class="request-estimate"></div>
<div class="request-estimate-box">
<h1>Request Free Estimate</h1>
<form action="" method="post">
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" />
</p>
<p>
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" />
</p>
<p>
<label for="phone">Phone</label>
<input type="phone" name="phone" id="phone" class="form-control" />
</p>
<p>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-default" />
</p>
</form>
</div>
Solution: https://jsfiddle.net/gqqqeLfL/
request-estimate-box was not being contained by request-estimate.
Originally:
<div class="request-estimate"></div>
<div class="request-estimate-box"></div>
Changed to:
<div class="request-estimate">
<div class="request-estimate-box"></div>
</div>
Furthermore, removed position:fixed since that glues the element to an exact position thus nullifing your margin-auto. Now the position default is position:relative and the margin:auto is properly executed.
I see two alternatives :
.request-estimate-box {
height: 400px;
width: 40%;
background-color: #FFF;
z-index: 99999;
position: fixed;
top: 15%;
left: 0;
right: 0;
margin: auto;
padding: 20px;
border-radius: 5px;
}
http://codepen.io/anon/pen/dPLxPJ?editors=110
And :
.request-estimate-box {
height: 400px;
width: 40%;
background-color: #FFF;
z-index: 99999;
position: fixed;
top: 15%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 20px;
border-radius: 5px;
}
http://codepen.io/anon/pen/ByEXyM?editors=110
And a margin half it's width from the center of course, like Tambo is suggesting.
Good day developers! I would like to ask if how can I make my form appear on top of my image? The problem is that my form appear at the bottom. Here's the image of my screenshot.
Here are my codes:
HTML
<body>
<div class="container" align="center">
<div id="image">
<img src="assets/img/imac.png" style="width:640px; height:678">
</div>
<div id="loginForm">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please sign in</h3>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me"> Remember Me
</label>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
</fieldset>
</form>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #2ecc71;
}
.container {
width: 1000px;
height: 700px;
margin-top: 100px;
}
#loginForm{
width: 500px;
height: 400px;
}
Make the #image be position:absolute and fill the .container (which is made position:relative) with it.
body {
background-color: #2ecc71;
}
.container {
width: 1000px;
height: 700px;
margin-top: 100px;
position:relative;
}
#loginForm {
width: 500px;
height: 400px;
position:relative;
z-index:10;
}
#image{
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
}
<div class="container" align="center">
<div id="image">
<img src="http://dummyimage.com/600x678/cccccc/ffffff.jpg&text=monitor+image" style="width:640px; height:678">
</div>
<div id="loginForm">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please sign in</h3>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
</fieldset>
</form>
</div>
</div>
</div>
</div>
Create a div the size of the image, and make the image the background image for the div.
Then place a div container inside this div for the form itself. You can then use CSS to position the form div using margins.
<div id="image-container">
<div id="form-container">
// your form
</div>
</div>
#image-container {
width: 500px;
height: 500px;
background: url(/* your image */);
}
#form-container {
width:350px;
margin: 30px auto 0 auto;
}
Obviously, you need to replace the sizes with ones of your actual image, and the margin values to make your form content fit within the screen of the computer in your image.
That should work, I'm coding this on my phone so apologies if I miss something trivial!
I used the last example and made it simpler. Just adjust for image size and use padding to position the form.
<div style="width:529px; height:220px; background-image:url('image.jpg')" align="center">
<div style="width:529px; padding: 165 0 0 0" align="center">
...form ...
<div>
<div>
Try this
* {
box-sizing: border-box;
font-family: sans-serif;
}
.form-container {
display: flex;
justify-content: center;
background: url("https://parrot-tutorial.com/images/mask-smog.jpg") no-repeat center;
background-size: cover;
position: relative;
min-height: 400px;
padding: 24px;
}
.my-form {
background-color: #fff;
padding: 16px;
}
.form-header {
text-align: center;
padding: 0;
margin-top: 0;
font-size: 2em;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: inline-block;
margin-bottom: .5rem;
}
.form-control {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #f1f1f1;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
}
.form-text {
color: #6c757d;
display: block;
margin-top: .25rem;
font-size: 80%;
font-weight: 400;
}
.btn {
display: block;
width: 100%;
font-weight: 400;
color: #ffffff;
cursor: pointer;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
background-color: #007bff;
}
<div class="form-container">
<form action="/html/form-action.php" class="my-form" method="POST">
<h2 class="form-header">Login</h2>
<div class="form-group">
<label for="exampleEmail">Email address</label>
<input type="email" class="form-control" id="exampleEmail" placeholder="Enter email" name="uemail">
<small class="form-text">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="examplePassword">Password</label>
<input type="password" class="form-control" id="examplePassword" placeholder="Password" name="pwd">
</div>
<div class="form-group">
<input type="checkbox" id="exampleCheck" name="saveinfo">
<label for="exampleCheck">Remember me</label>
</div>
<button type="submit" class="btn">Submit</button>
</form>
</div>
Reference:Add a Form on Image
I'm trying to change the div #header-search when focus the input #search. so when people focus the search field get bigger!
<div id="header-search">
<form >
<div class="input-box">
<input id="search" type="search" name="q" value="" class="input-text required-entry" maxlength="128" placeholder="Search" autocomplete="off">
<button type="submit" title="Search" class="button search-button"></button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
</form>
</div>
Style:
#header-search{
display: block;
position: absolute;
top: 0px;
left: 200px;
width: 40%;
height: 80px;}
#search{
width: 100%;
height: 80px;
}
#search:focus #header-search{
left: 0px;
width: 100%;
}