I am trying to position a div with arrow in bootstrap form field but the pointing arrow is pointing to the next row. Here is my code:
<h3>Rregistration </h3>
<div class="control-group">
<label class="control-label" for="inputName">Name</label>
<div class="controls">
<input type="text" id="inputName" placeholder="Name">
</div>
</div>
<div class="container">
<div id="pointer"></div>
</div>
and the CSS
.container {
margin-top: 10px;
}
body {background:#ff004e;padding:40px}
.container {
background:white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width:250px;
height:100px;
display: block;
position: relative;
}
#pointer{
border-right:solid 20px #FFF;
/* border-left: solid 5px transparent; */
border-top: solid 10px transparent;
border-bottom: solid 10px transparent;
position:absolute;
width: 0;
height: 0;
top: 10px;
left:-20px
}
The JsFiddle link is here: http://jsfiddle.net/barnamah/Epj6z/13/
try this
http://jsfiddle.net/Epj6z/15/
<h3>Rregistration </h3>
<div class="control-group">
<label class="control-label" for="inputName">Name</label>
<div class="controls">
<input type="text" id="inputName" placeholder="Name" style="float:left">
<div class="span3">
<div id="pointer"></div>
</div>
</div>
</div>
body {background:#ff004e;padding:40px}
.span3 {
background:white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width:250px;
height:100px;
display: block;
position: relative;
}
Related
Im trying to make two froms on one page. one right underneather the other. The first form is to put the main information in and then the second form is suppossed to be a report. The problem is that the second form wont allow any text to be put into the text box, it doesnt even seem to regonise that there is a text box on the page.
Any ideas why this might be happening?
Thanks
* {
box-sizing: border-box;
}
#tl {
padding: 1em;
background: #f9f9f9;
border: 1px solid #c1c1c1;
margin-top: 2rem;
width: 1400px;
height:190px;
margin-left: auto;
margin-right: auto;
padding: 1em;
text-transform: uppercase;
}
#tl input {
margin-bottom: 1rem;
background: #fff;
border: 1px solid #9c9c9c;
}
#report {
padding: 1em;
background: #f9f9f9;
border: 1px solid #c1c1c1;
margin-top: 2rem;
width: 1400px;
height:690px;
margin-left: auto;
margin-right: auto;
padding: 1em;
text-transform: uppercase;
}
#report input {
margin-bottom: 1rem;
background: #fff;
border: 1px solid #9c9c9c;
}
.fdate{
position:relative;
left:60px;
top:30px;
}
.fsales{
position:relative;
left:320px;
bottom:22px;
}
.fservice{
position:relative;
left:650px;
bottom:75px;
}
.fpart{
position:relative;
left:1000px;
bottom:127px;
}
.fqty{
position:relative;
left:20px;
bottom:120px;
}
.fhour{
position:relative;
left:376px;
bottom:175px;
}
.fcust{
position:relative;
left:691px;
bottom:225px;
}
.fname{
position:relative;
left:1068px;
bottom:280px;
}
.inputs{
position:relative;
top: 20px;
}
.title1{
position:relative;
bottom:430px;
left:500px;
}
<!--form for top level info-->
<div id = "tl">
<form>
<div class = "inputs">
<div class="fdate">
<label for="fdate">Date:</label>
<input type="text" id="fdate" name="fdate"><br><br>
</div>
<div class="fsales">
<label for="fsales">Sales Order:</label>
<input type="text" id="fsales" name="fsales"><br><br>
</div>
<div class="fservice">
<label for="fservice">Service Order:</label>
<input type="text" id="fservice" name="fservice"><br><br>
</div>
<div class="fpart">
<label for="fpart">Part Number:</label>
<input type="text" id="fpart" name="fpart"><br><br>
</div>
<div class="fqty">
<label for="fqty">Quantity:</label>
<input type="text" id="fqty" name="fqty"><br><br>
</div>
<div class="fhour">
<label for="fhour">Hours:</label>
<input type="text" id="fhour" name="fhour"><br><br>
</div>
<div class="fcust">
<label for="fcust">Customer:</label>
<input type="text" id="fcust" name="fcust"><br><br>
</div>
<div class="fname">
<label for="fname">Name:</label>
<input type="text" id="fname" name="fname"><br><br>
</div>
</div>
<div class = "title1">
<div> Missing & Damaged Report</div>
</div>
</form>
</div>
<!--second form for missing parts-->
<div id = "report">
<form>
<div class="P1">
<label for="P1">Part Number:</label>
<input type="text" id="P1" name="P1"><br><br>
</div>
</form>
</div>
The problem is postion:relative; to input class see work example:
* {
box-sizing: border-box;
}
#tl {
padding: 1em;
background: #f9f9f9;
border: 1px solid #c1c1c1;
margin-top: 2rem;
width: 1400px;
height:190px;
margin-left: auto;
margin-right: auto;
padding: 1em;
text-transform: uppercase;
}
#tl input {
margin-bottom: 1rem;
background: #fff;
border: 1px solid #9c9c9c;
}
#report {
padding: 1em;
background: #f9f9f9;
border: 1px solid #c1c1c1;
margin-top: 2rem;
width: 1400px;
height:690px;
margin-left: auto;
margin-right: auto;
padding: 1em;
text-transform: uppercase;
}
#report input {
margin-bottom: 1rem;
background: #fff;
border: 1px solid #9c9c9c;
}
.fdate{
position:relative;
left:60px;
top:30px;
}
.fsales{
position:relative;
left:320px;
bottom:22px;
}
.fservice{
position:relative;
left:650px;
bottom:75px;
}
.fpart{
position:relative;
left:1000px;
bottom:127px;
}
.fqty{
position:relative;
left:20px;
bottom:120px;
}
.fhour{
position:relative;
left:376px;
bottom:175px;
}
.fcust{
position:relative;
left:691px;
bottom:225px;
}
.fname{
position:relative;
left:1068px;
bottom:280px;
}
.inputs{
top: 20px;
}
.title1{
position:relative;
bottom:430px;
left:500px;
}
<!--form for top level info-->
<div id = "tl">
<form>
<div class = "inputs">
<div class="fdate">
<label for="fdate">Date:</label>
<input type="text" id="fdate" name="fdate"><br><br>
</div>
<div class="fsales">
<label for="fsales">Sales Order:</label>
<input type="text" id="fsales" name="fsales"><br><br>
</div>
<div class="fservice">
<label for="fservice">Service Order:</label>
<input type="text" id="fservice" name="fservice"><br><br>
</div>
<div class="fpart">
<label for="fpart">Part Number:</label>
<input type="text" id="fpart" name="fpart"><br><br>
</div>
<div class="fqty">
<label for="fqty">Quantity:</label>
<input type="text" id="fqty" name="fqty"><br><br>
</div>
<div class="fhour">
<label for="fhour">Hours:</label>
<input type="text" id="fhour" name="fhour"><br><br>
</div>
<div class="fcust">
<label for="fcust">Customer:</label>
<input type="text" id="fcust" name="fcust"><br><br>
</div>
<div class="fname">
<label for="fname">Name:</label>
<input type="text" id="fname" name="fname"><br><br>
</div>
</div>
<div class = "title1">
<div> Missing & Damaged Report</div>
</div>
</form>
</div>
<!--second form for missing parts-->
<div id = "report">
<form>
<div class="P1">
<label for="P1">Part Number:</label>
<input type="text" id="P1" name="P1"><br><br>
</div>
</form>
</div>
I am creating a simple vertical stepper component with html & css. And trying to design like this. I strucked in the css part some alignment issues are coming.
CSS
.steps-container .step::before {
display: inline-block;
content: "";
font-size: 10px;
color: #fff;
text-align: center;
background-color: #e1e1e1;
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
right: 4px;
top: 2px;
}
.steps-container .step.active::before {
background-color: green;
}
.step-vertical {
border-left: 1px solid #e1e1e1;
margin-bottom: 5px;
margin-left: 5px;
}
HTML
<div>
<div class="steps-container">
<span class="step inactive">1</span>
<div class="step-vertical">
<div>
<h5 class="text-grey">label text 1</h5>
<button>Continue</button>
</div>
</div>
</div>
<div class="steps-container">
<span class="step active">2</span>
<div class="step-vertical">
<div>
<h5 class="text-grey">label text 2</h5>
<button>Continue</button>
</div>
</div>
</div>
</div>
.
From the output i want the numbers 1 and 2 inside the circle and label text should align next to the circle. I don't know how to achieve this. Ur suggestions are helpful.
Is this how you want it? added the :before css to span added display: inline-block; to .step-vertical to bring it next to the span.
.steps-container .step {
display: inline-block;
content: "";
font-size: 10px;
color: #fff;
text-align: center;
background-color: #e1e1e1;
/* width: 20px; */
/* height: 20px; */
border-radius: 50%;
position: relative;
right: 4px;
top: 2px;
padding: 5px 10px;
color: black;
vertical-align: top;
}
.steps-container .step.active::before {
background-color: green;
}
.step-vertical {
border-left: 1px solid #e1e1e1;
margin-bottom: 5px;
margin-left: 5px;
height:200px
}
h5{margin-top: 5px;
display: inline-block;}
button{
display:block
}
.ml-2{
margin-left:10px
}
<div>
<div class="steps-container">
<span class="step inactive">1</span>
<h5 class="text-grey">label text 1</h5>
<div class="step-vertical">
<div>
<textarea class="ml-2" name="" id="" cols="30" rows="10">
</textarea>
<button class="ml-2">Continue</button>
</div>
</div>
</div>
<div class="steps-container">
<span class="step inactive">2</span>
<h5 class="text-grey">label text 2</h5>
<div class="step-vertical">
<div>
<textarea class="ml-2" name="" id="" cols="30" rows="10"> </textarea>
<button class="ml-2">Continue</button>
</div>
</div>
</div>
</div>
I'm trying to create a form that sticks at the bottom of the div that says "General" and "programming."
Here's a picture:
I've tried many things, and can't seem to get the form to appear... When I do get something to appear, I can't make it stick to the bottom either. Can anyone help?
I'm using bootstrap
Heres my HTML:
<div class="chatroom">
<div id="contain">
<div id="channels">
<div class="list-group">
General
Programming
</div>
<div id="bar"></div>
<form id="create-channel">
<div class="form-group">
<input type="text" id="c" class="form-control" autocomplete="off"></div>
</form>
</div>
<div id="chat">
<ul id="messages">
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
<div class="input">
<form>
<div class="form-group">
<input type="text" id="m" class="form-control" autocomplete="off"></div>
</form>
</div>
</div>
</div>
</div>
and CSS:
body {
background-color: azure;
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
background-size:cover;
}
.chatroom {
width: 90vw;
height: 80vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
border: 2px solid white;
border-radius: 30px;
background-color: white;
opacity:.8;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
flex-direction: column;
}
.input {
height: 40px;
width: 98%;
margin-left:1%;
margin-top: auto;
}
#chat .form-control{
border-bottom-right-radius: 30px;
border-top-right-radius: 30px;
}
#chat{
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
float: right;
height:100%;
width: 75%;
display: flex;
flex-direction: column;
}
#channels{
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
background-color: white;
width:25%;
float: left;
height:100%;
overflow-y: hidden;
}
#bar{
background-color:black;
height:100%;
float: right;
width: 3px;
}
#contain{
height:100%;
}
.list-group{
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
font-size:20px;
width:calc(100% - 3px);
background-color:#bcbcbc;
float:left;
display:inline-block;
}
It works fine when I rearrange the bar div below your form. Check here: https://jsfiddle.net/vj2fyuLm/
<form id="create-channel">
<div class="form-group">
<input type="text" id="c" class="form-control" placeholder="one" autocomplete="off"></div>
</form>
<div id="bar"></div>
Update
You can have your entire form inside the list group like this: https://jsfiddle.net/vj2fyuLm/3/
<div class="list-group">
General
Programming
<form id="create-channel">
<div class="form-group">
<input type="text" id="c" class="form-control" placeholder="one" autocomplete="off"></div>
</form>
</div>
Can you remove the div with id #bar? It seems that by floating that to the right, you get some layout funk.
By removing that, the form field shows up then you can style it as you desire:
http://jsfiddle.net/20nhLz3x/4/
hello I one simple but annoying problem. I managed to use css and bootsatrap to create the responsive webpage that i wanted. However, when i used position:relative my input (text field) got disabled. Any idea why?
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo">
<img class="img-responsive" src="uv.png">
</div>
<div class="login-form">
<h1>United Volunteers</h1>
<div class="form-group">
<label class="input-title">Username</label>
<input type="text" class="form-input" placeholder="Username">
</div>
<div class="form-group">
<label class="input-title">Password</label>
<input type="password" class="form-input" placeholder="Password">
</div>
</div>
</div>
</div>
.login-form {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:400px;
background-color: white;
padding: 100px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: -1;
}
.form-input {
width: 100%;
display: block;
height: 35px;
padding: 6px 12px;
font-size: 12px;
font-family: sans-serif;
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
line-height: 1.5;
}
This is because of z-index: -1;. Its set to negative value.
Just make it positive like:
.login-form {
z-index: 1;
}
Or look at the snippet below:
.login-form {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:400px;
background-color: white;
padding: 100px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: 1;
}
.form-input {
width: 100%;
display: block;
height: 35px;
padding: 6px 12px;
font-size: 12px;
font-family: sans-serif;
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
line-height: 1.5;
}
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo">
<img class="img-responsive" src="uv.png">
</div>
<div class="login-form">
<h1>United Volunteers</h1>
<div class="form-group">
<label class="input-title">Username</label>
<input type="text" class="form-input" placeholder="Username">
</div>
<div class="form-group">
<label class="input-title">Password</label>
<input type="password" class="form-input" placeholder="Password">
</div>
</div>
</div>
</div>
Hope this helps!
I'm trying to float 2 divs next to each other and I want the right div to give a margin in relation to it's parent while the left div is shown in front of the margin of the right div.
I have this code below with some labels and input fields. I gave the inputwrapper a margin-left of 220px to align the inputfields vertically but they don't.
So my quetion is how to get these inputfields vertically aligned without using a table?
Thanks in advance
Code snippet:
* {
box-sizing: border-box;
}
html, body {
margin: 0px;
padding: 0px;
font-family: Geneva, sans-serif;
font-size: 13pt;
}
.registerwrapper {
border: 1px black solid;
height: auto !important;
width: 600px;
display: block;
padding: 10px;
margin: 50px auto;
}
.labelwrapper {
border: 1px red solid;
float: left;
display: block;
z-index: 100;
}
.inputwrapper {
border: 1px blue solid;
margin-left: 220px;
float: left;
display: block;
z-index: 1;
}
.row {
border: blueviolet 1px solid;
position: relative;
padding: 3px;
width: auto!important;
display: block;
overflow: auto;
}
.row:after {
content: "";
clear: both;
display: block;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/layout_register.css" />
</head>
<body>
</body>
<div class="registerwrapper">
<form action="" method="post">
<div class="row">
<div class="labelwrapper"><label for="username">Username:</label></div>
<div class="inputwrapper"><input type="text" name="username" id="username" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password">Choose a password:</label></div>
<div class="inputwrapper"><input type="password" name="password" id="password" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password_again">Enter your password again:</label></div>
<div class="inputwrapper"><input type="password" name="password_again" id="password_again" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="name">Name:</label></div>
<div class="inputwrapper"><input type="text" name="name" id="name" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="inputwrapper"><input type="submit" value="Register" /></div>
</div>
</form>
</div>
</body>
</html>
Use position: absolute; for labelwrapper class.
* {
box-sizing: border-box;
}
html, body {
margin: 0px;
padding: 0px;
font-family: Geneva, sans-serif;
font-size: 13pt;
}
.registerwrapper {
border: 1px black solid;
height: auto !important;
width: 600px;
display: block;
padding: 10px;
margin: 50px auto;
}
.labelwrapper {
position: absolute;
border: 1px red solid;
float: left;
display: block;
z-index: 100;
}
.inputwrapper {
border: 1px blue solid;
margin-left: 220px;
float: left;
display: block;
z-index: 1;
}
.row {
border: blueviolet 1px solid;
position: relative;
padding: 3px;
width: auto!important;
display: block;
overflow: auto;
}
.row:after {
content: "";
clear: both;
display: block;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/layout_register.css" />
</head>
<body>
</body>
<div class="registerwrapper">
<form action="" method="post">
<div class="row">
<div class="labelwrapper"><label for="username">Username:</label></div>
<div class="inputwrapper"><input type="text" name="username" id="username" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password">Choose a password:</label></div>
<div class="inputwrapper"><input type="password" name="password" id="password" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password_again">Enter your password again:</label></div>
<div class="inputwrapper"><input type="password" name="password_again" id="password_again" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="name">Name:</label></div>
<div class="inputwrapper"><input type="text" name="name" id="name" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="inputwrapper"><input type="submit" value="Register" /></div>
</div>
</form>
</div>
</body>
</html>
Just change the following classes in your css file
.labelwrapper {
border: 1px red solid;
float: left;
}
.inputwrapper {
border: 1px blue solid;
float: right;
margin-right:100px;
}