I have a form which contains multiple elements, i have a primefaces calendar inside this form and i want to add a button beside the calendar input to allow user to set the date to null and clear the input field.
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="date-depart">Date Départ
</label>
<div class="row calendar-exibit col-md-3 col-sm-6 col-xs-12">
<fieldset style="margin-bottom: -10px">
<div class="control-group">
<div class="controls">
<div class="col-md-11 xdisplay_inputx form-group has-feedback" style="width: 85.667%; padding-left: 0px; border-radius: 3px;">
<p:calendar class="col-md-6 col-sm-6 col-xs-12" locale="fr" id="ddepart" readonlyInput="true" pattern="dd/MM/yyyy" mask="true" value="#{travailleMB.datedepart}" placeholder="--- Date Depart ---" style="border-radius: 3px; font-size: 12px; padding-right: 9px; padding-top: 3px;">
<p:ajax event="dateSelect" listener="#{travailleMB.saveSelect}" process="#this"/>
</p:calendar>
</div>
</div>
<div>
<h:button value="X" style="border-radius: 3px; font-size: 12px; margin-left:300px;"></h:button>
</div>
</div>
</fieldset>
</div>
</div>
the following image is the result of this source code : Form with input fields and the button
I tried to put the button in different places of this form-group without success
Hope someone knows how to do it
I have this structure with the help of following HTML and CSS:
HTML:
<div class="input-group">
<p:calendar styleClass="form-control radius-none" value="#{xBean.dateValue}" />
<span class="input-group-addon radius-none">
<p:commandLink actionListener="#{xBean.clearDateValue}">
<i class="fa fa-times"></i>
</p:commandLink>
</span>
</div>
CSS:
.input-group {
width: 100%;
display: table;
position: relative;
border-collapse: separate;
}
.input-group .form-control,
.input-group-addon,
.input-group-addon-with-link,
.input-group-btn {
display: table-cell !important;
}
.form-control {
display: block!important;
padding: 6px 12px!important;
font-size: 14px!important;
line-height: 1.42857143!important;
color: #555!important;
background-color: #fff!important;
background-image: none!important;
border: 1px solid #ccc!important;
border-radius: 4px;
margin-bottom: 0!important;
}
.radius-none {
border-radius: 0!important;
}
.input-group-addon:last-child,
.input-group-addon-with-link:last-child {
border-left: 0;
}
.input-group-addon,
.input-group-addon-with-link a,
.input-group-addon-with-link span {
padding: 13px 15px;
}
.input-group-addon,
.input-group-addon-with-link {
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #555;
text-align: center;
background-color: #fff;
border: 1px solid #ccc;
}
.input-group-addon,
.input-group-addon-with-link,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
Hope this will help you out!
Related
I want to put icon inside the input tag but its always in the bottom of input. i used bootstrap actually but for this i used custom style
here's the html:
<div class="form-group">
<label for="password" class="text-secondary">Password</label>
<div class="input-group">
<input id="password" type="password" class="form-login #error('password') is-invalid #enderror" name="password" required autocomplete="current-password">
<div class="input-group-append">
<span class="input-group-text" onclick="password_show_hide();">
<i class="fas fa-eye" id="show_eye"></i>
<i class="fas fa-eye-slash d-none" id="hide_eye"></i>
</span>
</div>
#error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
here's the css:
.form-login{
display: block;
width:100%;
font-size: 1rem;
font-weight: 400;
line-height:1.5;
border-color: #009DA9 !important;
border-style: solid !important;
border-width: 0 0 1px 0 !important;
padding: 0px !important;
color:black;
height: auto;
border-radius: 0;
background-color: #fff;
background-clip: padding-box;
}
.form-login:focus{
color: #495057;
background-color: #fff;
border-color: #fff;
outline: 0;
box-shadow: none;
}
what it's look like right now:
what i want to look like:
Well you can use position absolute to position the icon over the input.
You might need to change the top value a little bit and the padding-right value. Check the comment inside the snippet below
.input-group {
position:relative;
display:inline-block;
}
.input-group-text {
position: absolute;
right:0;
top: 0;
}
input {
padding-right: 20px; /* = icon width if you don't want the password to go under the icon */
}
<div class="input-group">
<input id="password" type="password" class="form-login" />
<div class="input-group-append">
<span class="input-group-text">
<i class="fas fa-eye" id="show_eye">icon</i>
</span>
</div>
</div>
You can use position absolute to position the icon over the input field. Check to code I posted below:
.form-group {
width: 50%;
position: relative;
}
.form-group i {
position: absolute;
right: 0px;
}
.icon {
padding: 10px 0px;
color: grey;
min-width: 5px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
border-radius: 10px;
border-color: solid lightgray;
}
<div class="form-group">
<label for="passowrd">Password</label>
<div class="input-set">
<i class="fas fa-lock icon">icon</i>
<input id="password" name="password" class="input-field" type="text" placeholder="password" />
</div>
</div>
I am trying to achieve borders on each print page, on chrome it works fine but in safari border is getting chopped.
I have created a div which is fixed. That div has borders so when window print is triggered, borders comes on all the pages on chrome, but not on safari.
Anyone has solution for this??
my code:
<div class="loading-mask" data-role="loader" style="display: none !important">
<div class="loader">
</div>
</div>
<div class="cutom-container"></div>
<div class="content-div">
<div>
<div class="logo-content">
<div class="logo-div">
<img class="print-logo" src="<?= $this->getViewFileUrl('images/cart-page-print-logo.png'); ?>" alt="<?= __('Print Header Logo'); ?>"/>
<p>
----- </h3>
</p>
<div class="input-container">
<label>Company Name : </label><span id="pcname"> </span>
</div>
<div class="input-container">
<label>Contact : </label><span id="pcontact"> </span>
</div>
<div class="input-container">
<label>Phone : </label><span id="pphone"> </span>
</div>
</div>
</div>
<div class="img-content">
<img class="promotional-img" src="<?= $this->getViewFileUrl('images/PRT-offer graphic.png'); ?>" alt="<?= __('Print Offer'); ?>"/>
</div>
</div>
<div>
<div class="input-container">
<label>Email : </label><span id="pemail"> </span>
</div>
<div class="input-container">
<label>Delivery Address : </label><span id="daddress"> </span>
</div>
<div class="input-container">
<label>Mailing Address : </label><span id="maddress"> </span>
</div>
</div>
<div>
<table id="product-list-print">
</table>
</div>
<div id="sub-total-print">
</div>
<div>
<div class="logo-content">
<p>
Shipping (Shipping rates are appox and apply to US Mainland ONLY)</br> - Please see Sales Specialist for exact quote. Shipping rates for Aff ordable Advantage Trailers do not apply. Park Model Units will require additional shipping fee. <strong>Estimate is valid for 7 days.</strong>
</p>
</div>
<div class="img-content">
<div>
To order this unit sign here
</div>
<div>
<canvas id="myCanvas" style="width: 100%">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
</div>
</div>
</div>
css :
/* Print page css */
.cutom-container{
border : solid #670827 5px;
border-radius: 10px;
position:fixed;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
/*border: 5px solid red;*/
}
.content-div{
padding: 10px 5px 5px 5px;
display: none;
}
.logo-content{
display: inline-block;
width: 64%
}
.img-content{
display: inline-block;
width: 35%
}
.print-logo{
width: 50%;
}
.logo-div{
text-align: center;
}
.promotional-img{
width: 100%;
}
.img-content{
text-align: center;
}
.input-container{
padding: 8px;
text-align: left;
border:solid #670827 1px;
font-size: 15px;
margin: 10px;
}
/* end */
.warranty-container{
padding: 10px;
font-size: 16px;
border: solid;
border-width: 1px;
}
.cart-product-warrenty{
display: none;
}
.center-align{
text-align: center;
}
#signArea{
margin-bottom:20px ;
}
#media print {
#page {
border : solid #670827 5px;
border-radius: 10px; }
.cart-container{
display: none;
}
.cutom-container{
display: block !important;
padding: 15px;
}
.content-div{
display: block !important;
padding: 15px;
}
.cart-product-warrenty{
display: contents;
}
.summary.title{
display: none;
}
#sub-total-print>.fieldset{
display: none;
}
#block-shipping{
display: none;
}
input.qty{
width: 50px !important;
padding: 0 !important;
text-align: center;
}
.product-item-name{
text-decoration: unset;
font-size: 1.8rem;
line-height: 1;
font-weight: 700;
padding-top: 0px;
}
.messages{
display: none;
}
a{
text-decoration: none !important;
}
}
#media only screen and (max-width: 600px) {
.modal-content{
width: 80%;
}
.current{
width: 250px !important;
}
.sign-pad{
width: 247px !important;
}
.modal-content{
margin-bottom: 55px;
}
.cart-product-warrenty{
display: none;
}
}
I am trying to align the button to the bottom of this div (so the bottom is flush with the bottom of textarea).
Codepen
I was able to do this by adding the following class to button:
.btn-bottom {
position: absolute;
top: 130px;
}
Unfortunately, doing so made the button disappear entirely on mobile:
How can I make the button align with the bottom of the textarea on desktop and with the left edge of the textarea on mobile?
<div class="padding">
<div class="container">
<div class="row">
<h3 class="text-center">Contact Us</h3>
<h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="col-md-4">
<label for="inputname">Name</label>
<input type="text" class="form-control" id="inputname">
</div>
<div class="col-md-4">
<label for="email">E-mail</label>
<input type="text" class="form-control" id="email">
</div>
<div class="col-md-4">
<label for="organization">Organization</label>
<input type="text" class="form-control" id="organization">
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="col-md-8">
<label for="message">Message</label>
<textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<hr />
</div>
You could set the columns of the elements containing the textarea and the button to be display: inline-block (you would have to set float: none for this to work) and then use vertical-align: bottom to align the elements to the bottom of the line that they're siting on.
I also added a class of .row--mod to the row of the element containing the textarea and the button to help target the elements.
.row--mod .col-md-8.col-md-offset-2 > * {
float: none;
display: inline-block;
vertical-align: bottom;
}
.row--mod .col-md-8.col-md-offset-2> :first-child {
margin-right: -4px;
width: 66.6667%;
}
Using inline-block creates extra spacing which you can get rid using a number of methods (I've opted for a negative margin).
See below for a demo:
body {
font-size: 12px !important;
font-family: 'Roboto Condensed', sans-serif !important;
font-weight: 400 !important;
}
.title-lighter {
font-family: 'Roboto', Arial, Helvetica, sans-serif;
color: #737373;
}
.centering {
float: none;
margin: 0 auto;
}
.btn-centering {
width: 90% !important;
margin-left: 5% !important;
margin-bottom: 5px !important;
}
.padding {
padding: 80px 0;
}
.contact-form {
background: #fff;
margin-top: 10%;
margin-bottom: 5%;
width: 70%;
}
.contact-form .form-control {
border-radius: 1rem;
}
.contact-form form {
padding: 14%;
}
.contact-form form .row {
margin-bottom: -7%;
}
.contact-form h3 {
margin-bottom: 8%;
margin-top: -10%;
text-align: center;
color: #0062cc;
}
.contact-form .btnContact {
width: 50%;
border: none;
border-radius: 1rem;
padding: 1.5%;
background: #dc3545;
font-weight: 600;
color: #fff;
cursor: pointer;
}
.btnContactSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #0062cc;
border: none;
cursor: pointer;
}
.centered-row {
text-align: center;
}
.btn-bottom {
display: table-cell;
vertical-align: bottom;
}
.box {
display: table !important;
width: 100%;
height: 100%;
}
#media (min-width: 992px)
{
.row--mod .col-md-8.col-md-offset-2 > * {
float: none;
display: inline-block;
vertical-align: bottom;
}
.row--mod .col-md-8.col-md-offset-2> :first-child {
margin-right: -4px;
width: 66.6667%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="padding">
<div class="container">
<div class="row">
<h3 class="text-center">Contact Us</h3>
<h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="col-md-4">
<label for="inputname">Name</label>
<input type="text" class="form-control" id="inputname">
</div>
<div class="col-md-4">
<label for="email">E-mail</label>
<input type="text" class="form-control" id="email">
</div>
<div class="col-md-4">
<label for="organization">Organization</label>
<input type="text" class="form-control" id="organization">
</div>
</div>
</div>
<div class="row row--mod">
<div class="col-md-8 col-md-offset-2">
<div class="col-md-8">
<label for="message">Message</label>
<textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<hr />
</div>
First look at the picture:
Like you see my center of page i mean this content with form on small resolution get over the navbar. This content is centered verticaly and horizontal by flex.
here is code and what i try:
html`
<nav>
<div class='row header-inner'>
<div class='col-md-10 col-lg-10 col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-sm-11 col-xs-12'>
<div class='row logo-inner'>
<img src="assets\static\Logo.png">
</div>
<div class='row menu-inner'>
<a class='menu-item' routerLink="/aboutUs" routerLinkActive="active">about us</a>
<a class='menu-item' routerLink="/skiCams" routerLinkActive="active">skicams</a>
<a class='menu-item' routerLink="/contactUs" routerLinkActive="active">contact</a>
</div>
</div>
</div>
</nav>
<div class='row content-inner'>
<div class='col-md-8 col-lg-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-sm-10 col-xs-12'>
<router-outlet></router-outlet>
</div>
</div>
<footer>
<div class='row center-block'>
<div class='col-md-offset-5 col-lg-offset-5 col-md-2 col-lg-2 col-sm-offset-5 col-sm-2 col-xs-offset-3 col-xs-6 footer-content'>
Powered by PGS
</div>
</div>
</footer>`
and css
footer {
border-top: 1px solid #40637e;
background-color: #282828;
position: fixed;
left: 0;
bottom: 0;
height: 110px;
width: 100%;
overflow:hidden;
}
.footer-content{
color :#959595;
border-top :1px solid #959595;
text-align: center;
margin-top:30px;
padding: 20px;
font-size: 10px;
}
.logo-inner{
margin: 35px 0px 35px 0px;
}
.header-inner{
border-bottom:1px solid #dbdbdb;
padding-bottom: 13px;
margin: 0;
}
.menu-inner{
margin:0px;
}
.menu-item{
margin-right: 40px;
padding-bottom: 15px;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
color:#545454;
}
.active{
border-bottom:1px solid #ef6716;
color: #ef6716;
}
a:hover, a:focus {
color: #ef6716;
text-decoration: none;
}
.content-inner{
background-color:#f8f8f8;
margin: 0;
/*margin-bottom:200px;*/
}
#media(max-width : 768px){
.menu-item{
margin-right:30px;
padding-bottom: 14px;
font-size: 14px;
text-transform: uppercase;
}
.menu-inner{
margin:0px;
text-align: center;
}
.logo-inner{
margin: 35px 0px 35px 0px;
text-align: center;
}
}
could you help my do something like this when the height is smaller the page start scrolling ?
It looks like you're missing your flexbox code in your question. Without seeing it all, I'd suggest trying to remove flexbox in the smaller breakpoints and just using display: block; and making sure your <div class='row content-inner'> element is statically positioned (position: static;).
http://jsfiddle.net/9FG4f/4/
I tried a different way to line up the labels and textfields in the form area along with the button horizontally, but the email label and txtfield is not aligned perfectly.
HTML
<div class="prefill2">
<h1>Need a Real Estate Expert?</h1>
<form class="action3" name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
<div id="action3-fname">
<label class="nick-3">Full Name:</label>
<input type="text" class="name2" name="full_name" />
</div>
<div id="action3-email">
<label class="nick-4">Email Address:</label>
<input type="text" class="email2" name="email">
</div>
<div id="action3-button">
<input type="submit" class="btn2" value="JOIN NOW" name="submit">
</div>
</form>
</div>
CSS
#action3-fname {
display:inline-block;
}
#action3-email {
display:inline-block;
}
#action3-button {
display:inline-block;
}
.action3 .name2 {
border:thin #999 solid;
border-radius:5px;
float:left;
height:22px;
margin-bottom:10px;
margin-left: 1px;
margin-top: 8px;
padding: 4px;
width: 210px;
}
.action3 .email2 {
border: thin #999 solid;
border-radius: 5px;
height: 22px;
margin-left: 22px;
margin-top: -8px;
padding: 4px;
width: 210px;
}
.action3 .nick-3 {
color:#000000;
}
.action3 .nick-4 {
margin-left:23px;
color:#000000;
}
.action3 .btn2 {
background: none repeat scroll 0 0 #ff8400;
border: medium none;
border-radius: 5px;
color: #FFFFFF;
cursor: pointer;
font-size: 22px;
font-weight: bold;
height: 40px;
margin-bottom: 15px;
text-align: center;
width: 140px;
margin-left:10px;
}
I'd get rid of the floats and the margin-tops. Like so:
.action3 .email2 {
border: thin #999 solid;
border-radius: 5px;
height: 22px;
margin-left: 22px;
padding: 4px;
width: 210px;
}
Here's a fiddle: http://jsfiddle.net/disinfor/9FG4f/8/
EDIT
Updated with fiddle that closes all tags correctly and combines the first three lines of CSS into a class.
.actionClass {
display:inline-block;
}
<div class="prefill2">
<h1>Need a Real Estate Expert?</h1>
<form class="action3" name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
<div id="action3-fname" class="actionClass">
<label class="nick-3">Full Name:</label><br />
<input type="text" class="name2" name="full_name" />
</div>
<div id="action3-email" class="actionClass">
<label class="nick-4">Email Address:</label><br />
<input type="text" class="email2" name="email" />
</div>
<div id="action3-button" class="actionClass">
<input type="submit" class="btn2" value="JOIN NOW" name="submit" />
</div>
</form>
</div>
Get rid of the <br>, get rid of the float's and it should all line up nicely.
.action3 .name2 {
border:thin #999 solid;
border-radius:5px;
/* float:left; <-- remove this */
height:22px;
margin-bottom:10px;
margin-left: 1px;
margin-top: 8px;
padding: 4px;
width: 210px;
}
Here is your updated fiddle
I actually made them float left and corrected a couple margins. Button and everything lined up together.
Here's my updated fiddle
#action3-fname {
float:left;
}
#action3-email {
float:left;
}