tell me how to do that would border separating INPUT did not reach the edge ?
i used to bootstrap3 Here is a layout:
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" placeholder="username">
<input type="text" class="form-control" placeholder="e-mail">
<input type="text" class="form-control" placeholder="tel">
</div>
or can you tell me another solution ? thank you.
Bootstrap seems to add padding to the input-group class.
You could possibly override that using:
.input-group{
padding:0;
}
Or, you could scrap bootstrap (best thing you'll do to learn css), and create your own class:
.group {
background: blue;
padding-left: 20px;
position: relative;
}
.group:before {
position: absolute;
content: "#";
left: 0;
}
<div class="group">
<input type="text" class="form-control" placeholder="username">
<input type="text" class="form-control" placeholder="e-mail">
<input type="text" class="form-control" placeholder="tel">
</div>
Related
https://ibb.co/3M8TjjY
Codepen
https://codepen.io/shon-lucky/pen/WNozGRe?editors=1100
Trying to center this form and its beating me up. So far i have used margin: auto. But everytime i do the form centers but the input elements are not centered in the form. I have used positioning where i made the parent container relative and made the form absolute but the everything dissapears before i even try to move it. Can someone help me with this plz
<form action="">
<div class="firstrow">
<label for="How Many People">How Many People</label>
<input type="text">
</div>
<div class="firstrow">
<label for="date">Date</label>
<input type="text">
</div>
<div class="firstrow">
<label for="time">Time</label>
<input type="text">
</div>
<br style="clear:both">
<div class="secondrow">
<label for="name">Name</label>
<input type="text" placeholder="Your full name">
</div>
<div class="secondrow">
<label for="email">Email</label>
<input type="text">
</div>
<div class="secondrow">
<label for="Phone">Phone</label>
<input type="text" placeholder="You phone">
</div>
</div>
</form>
</section>
.section4{
width:100%;
height: 380px;
background-color: #374a5c;
}
.section4 .wrapper{
width:80%;
height:380px;
margin:auto;
border: 1px solid red;
}
form{
}
label,input{
display:block;
}
.firstrow{
float: left;
}
.secondrow{
float:left;
}
Thank you for the Codepen! Here is a fix to center the form elements:
Link to the edited pen : https://codepen.io/pathiout/pen/YzpaLdR?editors=1100
Here is the css I used :
.firstrow {
display: inline-block;
margin: 10px auto;
}
.secondrow {
display: inline-block;
}
Basically I removed the "float left" attributes that prevents any centering from parent. Is this an acceptable solution for you ?
Have you tried text-align? Sometimes in HTML, the text align can center html element other than text, I've used it many times already.
<div style="text-align: center"><input type="text"> ....
I have Select2 in wicket, and I want to add form validation on it. I use atributte required, but it doesnt work. I want that select2 after unsuccessful validation have red background, or at least red border. When I try to submit form with required attribute, It dont do any validation. Select where I try to do validation is origin country. Can someone give me a point, how to achive this behaiviour? Thanks for any help.
<wicket:head xmlns:wicket="http://wicket.apache.org/">
<style>
/*.form-group .form-control {*/
/* padding: 0;*/
/* height: 33px;*/
/* }*/
.p-0 {
padding: 0px !important;
height: 30px;
}
</style>
</wicket:head>
<wicket:panel xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/">
<div class="col-xs-12">
<div class="col-xs-12">
<div class="form-group">
<div class="col-sm-3">
<input type="submit" value="Request" class="btn btn-danger"/>
</div>
<div class="col-sm-3">
<label for="quotationId" wicket:id="quotationIdLabel"></label>
<div>
<input wicket:id="quotationId" type="text" size="20"/>
</div>
</div>
<div class="col-sm-3">
<label for="product" wicket:id="productLabel"></label>
<div>
<select class="form-control" wicket:id="product"/>
</div>
</div>
<div class="col-sm-3">
<label for="contract" wicket:id="contractLabel"></label>
<div>
<input type="hidden" wicket:id="contract"/>
</div>
</div>
<div class="col-sm-3" style="padding: 0">
<label for="customer" wicket:id="customerLabel"></label>
<div>
<input class="form-control p-0" type="hidden"
wicket:id="customer" />
</div>
</div>
<div class="col-sm-3">
<label for="serviceLevel" wicket:id="serviceLevelLabel"></label>
<div>
<select class="form-control" wicket:id="serviceLevel"/>
</div>
</div>
<div class="col-sm-3">
<label for="equipmentType" wicket:id="equipmentTypeLabel"></label>
<div>
<input class="form-control p-0" type="hidden" wicket:id="equipmentType"/>
</div>
</div>
<div class="col-sm-3">
<label for="commodity" wicket:id="commodityLabel"></label>
<div>
<select class="form-control" wicket:id="commodity"/>
</div>
</div>
<span class="col-sm-3">
<label for="originCountry" wicket:id="originCountryLabel"></label>
<div>
<input type="hidden" wicket:id="originCountry" required/>
</div>
</span>
<div class="col-sm-3">
<label for="originDgfStation" wicket:id="originDgfStationLabel"></label>
<div>
<input type="hidden" wicket:id="originDgfStation"/>
</div>
</div>
<div class="col-sm-3">
<label for="destinationCountry" wicket:id="destinationCountryLabel"></label>
<div>
<input type="hidden" wicket:id="destinationCountry"/>
</div>
</div>
<div class="col-sm-3">
<label for="destinationDgfStation" wicket:id="destinationDgfStationLabel"></label>
<div>
<input type="hidden" wicket:id="destinationDgfStation"/>
</div>
</div>
<div class="col-sm-3">
<label for="shippingTerms" wicket:id="shippingTermsLabel"></label>
<div>
<select class="form-control" wicket:id="shippingTerms"/>
</div>
</div>
</div>
<br/>
</div>
</div>
<div class="clearfix"></div>
</wicket:panel>
I think the problem is with hidden fields which can not be declared as required in HTML. You might need to use some hack to use a regular text field and hide it with CSS. See this answer: make hidden field required
there is an issue with aliging of forms...
Here is what I am trying to do...
make a contact form on the left and to the right put the logo of the company..
So two divs of col-md-6 are made.. on the first div i am putting the form with class of "form-horizontal"
Hence I am arranging Form labels in "col-md-2" and form fields in "col-md-4"
Yet those form labels and fields are coming side-by-side... check image...
Here is the code...
<section id="contact">
<div class="col-md-12 text-center" style="background-image: url('images/head-background.png'); height: 100px; margin: 120px 0 10px 0;"><h2 style="margin-top:40px;">Contact Us</h2></div>
<div class="col-md-6">
<div style="font-family:'MV Boli'; font-size: 20px;">
<h4>Reach Us</h4>
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-md-2 control-label">Name</label>
<div class="col-md-4">
<input type="text" name="name" placeholder="Your name" class="form-control">
</div>
<label for="email" class="col-md-2 control-label">E-Mail</label>
<div class="col-md-4">
<input type="email" name="email" placeholder="Your E-Mail" class="form-control">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-6">
<img src="images/logo-vertical.png" class="img-thumbnail">
</div>
<section>
Please help people, on the verge of closing my first web-design project :)
I think this is your need, Please try this, this is not your need please give me the clear input,
<section id="contact">
<div class="col-md-12 text-center" style="background-image: url('images/head-background.png'); height: 100px; margin: 120px 0 10px 0;"><h2 style="margin-top:40px;">Contact Us</h2></div>
<div class="col-md-6">
<div style="font-family:'MV Boli'; font-size: 20px;">
<h4>Reach Us</h4>
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-md-2 control-label">Name</label>
<div class="col-md-12">
<input type="text" name="name" placeholder="Your name" class="form-control">
</div>
<label for="email" class="col-md-2 control-label">E-Mail</label>
<div class="col-md-12">
<input type="email" name="email" placeholder="Your E-Mail" class="form-control">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-6">
<img src="images/logo-vertical.png" class="img-thumbnail">
</div>
<section>
You don't need to make container col-md-12 for your form and image.Just make equal structure
<div class="container">
<div class="row">
<div class="col-md-6">
form here
</div>
<div class-"col-md-6">
// your image
</div>
</div>
</div>
I am attempting at making a drop down box appear as soon as you click on an input text area, revealing more boxes (i.e info to complete).
this is a link to the wireframes I am basing my design on :
https://drive.google.com/file/d/0BxNRMs44yAigWmRneC1GTUZheGs/view?usp=sharing
I have used Bootstrap so far and can't seem to successfully add the drop down, and would appreciate any help/guidance.
<div id="popup3" class="popup">
<h3>Add your locations here</h2>
<form role="form">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address"/>
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-camera"></i>
<input type="text" class="form-control" placeholder="Address" />
</div>
<div class="form-group">
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
<textarea class="form-control" rows="1" ></textarea>
</div>
</form>
</div>
<div id="popup4" class="popup">
<h3>Choose the categories that best define your drift</h3>
<form role="form">
<select multiple class="form-control" id="sel">
<option>Art</option>
<option>Entertainment</option>
<option>History</option>
<option>Landmarks</option>
<option>Music</option>
<option>Nature</option>
<option>Oddities</option>
</select>
</form>
</div>
and this is my css :
/* enable absolute positioning */
.inner-addon {
position: relative;
}
/* style icon */
.inner-addon .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
}
/* align icon */
.left-addon .glyphicon { left: 0px;}
.right-addon .glyphicon { right: 0px;}
/* add padding */
.left-addon input { padding-left: 30px; }
.right-addon input { padding-right: 30px; }
I'm using sky-form library and bootstrap 3 to render my forms.
I have 3 inputs that I would like to wrap together.
I know that this requires custom css rules but I can't make it work as expected.
Please see attached image to better understand my need.
10x
Here's a start. You may want to fiddle with the focus highlights a bit.
http://jsfiddle.net/isherwood/vqkma/
<style>
.joined-left {
margin-right: -10px;
}
.joined-right {
margin-left: -10px;
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
</style>
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control joined-left" id="exampleInputEmail2" placeholder="Enter email" />
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control joined-right" id="exampleInputPassword2" placeholder="Password" />
</div>