I want to put + and - buttons inside input box but bootstraps input-group-btn property is not working in materialize CSS framework
<div class="row marg">
<h6 class="small">Selling Quantity</h6>
<div class="input-field input-group col s12">
<span class="suffix btn-number" data-type="minus" data-field="num">
<a class="waves-effect waves-light ">
<i class="material-icons grey-text text-darken-1 left">remove</i>
</a>
</span>
<input type="text" name="num" class="form-control input-number" value="">
<span class="suffix btn-number" data-type="plus" data-field="num">
<a class=" waves-effect waves-light "><i class="material-icons grey-text text-darken-1 left">add</i></a>
</span>
</div>
</div>
There is no class like "input-group" in Materialize.
Bootstrap and Materialize differ in class names.
Check their Forms.html - http://materializecss.com/forms.html
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">First Name</label>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">phone</i>
<input id="icon_telephone" type="tel" class="validate">
<label for="icon_telephone">Telephone</label>
</div>
</div>
</form>
Related
I have as part of a form this contact information section:
<div class="row">
<div class="col s12">
<i class="material-icons prefix">account_circle</i>
<input id="nameico" type="text" class="validate">
<label for="nameico">Contact Name</label>
</div>
<div class="col s12">
<i class="material-icons prefix">email</i>
<input id="emailico" type="email" class="validate">
<label for="emailico">Contact Email</label>
</div>
<div class="col s12">
<i class="material-icons prefix">phone</i>
<input id="telico" type="tel" class="validate">
<label for="telico">Contact Phone</label>
</div>
</div>
However all three label are overlapping each other all inside the first input field for the persons name.
Here is my Code may be it can help you.
JSFiddle link - JSFiddle
HTML Code -
<div class="row">
<div class="col s12 input-field">
<i class="material-icons prefix">account_circle</i>
<input id="nameico" type="text" class="validate">
<label for="nameico">Contact Name</label>
</div>
<div class="col s12 input-field">
<i class="material-icons prefix">email</i>
<input id="emailico" type="email" class="validate">
<label for="emailico">Contact Email</label>
</div>
<div class="col s12 input-field">
<i class="material-icons prefix">phone</i>
<input id="telico" type="tel" class="validate">
<label for="telico">Contact Phone</label>
</div>
</div>
I have this login form and I want to center align the button but I can't seem to align it perfectly. What's the best way to center align it?
<form class="col s12">
<div class="row">
<div class="input-field col s10 offset-s1">
<input id="last_name" type="text" class="validate">
<label for="last_name">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s10 offset-s1">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="col s6 offset-s4">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</form>
Please help. Thank you!
Make your div containing the button the same width as your form inputs and then simply add the center-align class like so:
<form class="col s12">
<div class="row">
<div class="input-field col s10 offset-s1">
<input id="last_name" type="text" class="validate">
<label for="last_name">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s10 offset-s1">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<!-- CHANGED THE DIV BELOW (Changed size to col s10 offset-s1
to match the divs above and added center-align -->
<div class="col s10 offset-s1 center-align">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</form>
Try to add the attribute text-align: center; to the button container.
To do so I've added a class and included the css in the code below.
<style>
.center-text {
text-align: center;
}
</style>
<form class="col s12">
<div class="row">
<div class="input-field col s10 offset-s1">
<input id="last_name" type="text" class="validate">
<label for="last_name">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s10 offset-s1">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="col s6 offset-s4 center-text">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</form>
I am trying to place a login form in a Bootstrap 3 navbar. I am trying to make the username and password input boxes into input groups. I know a similar question has been asked and answered here before, but none of the solutions work because I need two input groups in a single form.
This is what I have so far:
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><a class="navbar-brand" href="/">My Site</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<form action="/login" class="navbar-form navbar-right" method="post" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
<input class="form-control" name="andrew_id" placeholder="Andrew ID" type="text" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i>
</span>
<input class="form-control" name="secret" placeholder="Secret Words" type="password" />
</div>
</div>
<button class="btn btn-primary" type="submit">Log In</button>
</form>
</div>
</div>
</div>
Also in a JSFiddle: http://jsfiddle.net/x6hk4/
Pretty much the two inputs and the button should be right aligned and be inline with the rest of the navbar.
This needs some work still, but perhaps it will put you in the right direction:
http://jsfiddle.net/technotarek/5rGFX/
<div class="container">
<nav class="navbar navbar-inverse navbar-default">
<div class="col-sm-3">
<a class="navbar-brand">Brand</a>
</div>
<form class="navbar-form">
<div class="col-sm-3 col-sm-offset-2">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-1">
<button class="btn btn-primary btn-block" type="button">GO</button>
</div>
</form>
</nav>
</div>
It's loosely based off of my responses to Two rows in a navbar with a column spanning two rows
I have the following markup:
<div class="container-fluid">
<h2>Transfer Options:</h2>
<div class="row well well-sm">
<div class="col-xs-6">
<div id="sendTypeRadio" class="btn-group-vertical" >
<span class="input-group-addon">
<input id="radioEmail" type="radio" name="sendType" value="email" disabled>Email
</span>
<span class="input-group-addon">
<input id="radioAttachments" type="radio" name="sendType" value="attachments" disabled>Attachments
</span>
<span class="input-group-addon">
<input id="radioBoth" type="radio" name="sendType" value="both" disabled>Email and attachments
</span>
</div><!-- /input-group -->
</div><!-- /.col-xs-6 -->
</div>
</div>
The problem is the buttons are all next to each other on the x-axis. I have been changing things for a day. Moving it out of the row tag and back in, removing almost all the formatting and such. What I want to maintain is the input-group-addon styling, but I want each button on a new row. I've searched and found nothing, any clues?
In asking my question I came up with a really crappy answer:
<div class="container-fluid">
<h2>Transfer Options:</h2>
<div class="row well well-sm">
<div class="col-xs-6">
<div id="sendTypeRadio" class="btn-group-vertical" >
<div class="row">
<div class="col-xs-2">
<span class="input-group-addon">
<input id="radioEmail" type="radio" name="sendType" value="email" disabled>Email
</span>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<span class="input-group-addon">
<input id="radioAttachments" type="radio" name="sendType" value="attachments" disabled>Attachments
</span>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<span class="input-group-addon">
<input id="radioBoth" type="radio" name="sendType" value="both" disabled>Email and attachments
</span>
</div>
</div>
</div><!-- /input-group -->
</div><!-- /.col-xs-6 -->
</div>
This gives me each item on a new row but absolutely ruins the styling of Bootstrap radio buttons
I have a ion content that I fill with a div. This works great when the screen size is larger than the div content. If it is smaller, then it assigns the height of the view, and when you scroll down it doesn't fill the whole content. It can be seen in the following example:
This is basically the html:
<ion-header>
<div id="headerTab" [class]="loginStyle">
<ul style="justify-content: center; display: flex;" class="tabs z-depth-1">
<li class="tab col"><a (click)="setTabIndex(0)" class="active" href="#enter">ENTRAR</a></li>
<li class="tab col"><a (click)="setTabIndex(1)" href="#signup">REGISTRO</a></li>
</ul>
</div>
</ion-header>
<ion-content>
<div id="background" [class]="loginStyle" style="margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center;">
<div class="valign-wrapper center-align tabs-content" *ngIf="loginTabVisible" [#showAnimation] (#showAnimation.done)="reloadTabs()">
<form *ngIf="loginVisible" [#showAnimation] (#showAnimation.done)="reloadLoginPage()">
<div class="row">
<div class="input-field col s12">
<input id="correo" type="email" class="validate" [(ngModel)]="userEmail" name="userEmail">
<label for="correo">Email</label>
</div>
<div class="input-field col s12">
<input id="pass1" type="password" class="validate" [(ngModel)]="userPassword" name="userPassword">
<label for="pass1">Contraseña</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a class="btn bg_color_s" (click)="login()">Continuar</a>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a (click)="setLoginPageIndex(1)" class="">¿Olvidaste tu contraseña?</a>
</div>
</div>
</form>
<form *ngIf="resetPasswordVisible" [#showAnimation] (#showAnimation.done)="reloadLoginPage()">
<div class="row">
<div class="input-field col s12" style="color: #fff">
<p> Por favor, introduzca su correo. Le enviaremos un email con insrucciones para restablecer su contraseña </p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="correo" type="email" class="validate" [(ngModel)]="userEmail" name="userEmail">
<label for="correo">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a class="btn bg_color_s" (click)="login()">Recuperar contraseña</a>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a (click)="setLoginPageIndex(0)" class="">Volver al inicio de sesión</a>
</div>
</div>
</form>
</div>
<div class="center-align tabs-content" *ngIf="registerTabVisible" [#showAnimation] (#showAnimation.done)="reloadTabs()">
<form *ngIf="registerVisible" [#showAnimation] (#showAnimation.done)="reloadRegisterPage()">
<div class="row">
<div class="input-field col s12">
<input name="newUser.firstName" [(ngModel)]="newUser.firstName" id="first_name" type="text" class="validate">
<label for="first_name">Nombres</label>
</div>
<div class="input-field col s12">
<input name="newUser.lastName" [(ngModel)]="newUser.lastName" id="last_name" type="text" class="validate">
<label for="last_name">Apellidos</label>
</div>
<div class="input-field col s12">
<input name="newUser.birthday" [(ngModel)]="newUser.birthday" id="birthday" type="text" class="validate datepicker">
<label for="birthday">Fecha de nacimiento</label>
</div>
<div class="input-field col s12">
<input name="newUser.email" [(ngModel)]="newUser.email" id="correor" type="email" class="validate">
<label for="correor">Email</label>
</div>
<div class="input-field col s12">
<input name="password" [(ngModel)]="newUser.password" id="passr1" type="password" class="validate">
<label for="passr1">Contraseña</label>
</div>
<div class="input-field col s12">
<input name="passwordCheck" [(ngModel)]="passwordCheck" id="passr2" type="password" class="validate">
<label for="passr2">Repita contraseña</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a (click)="signUp()" class="btn bg_color_s">continuar</a>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a (click)="toggleRegisterPro()" class="">{{ toggleRegisterProMessage }}</a>
</div>
</div>
</form>
<form *ngIf="proTypeVisible" [#showAnimation] (#showAnimation.done)="reloadRegisterPage()">
<div class="row">
<div style="width:90%;margin:auto">
<p>
<label>
<input name="group1" type="radio" />
<span>Jugador Profesional</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" />
<span>Campo de Golf/Pitch and putt</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" />
<span>Tienda de Golf</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" />
<span>Otros servicios relacionados</span>
</label>
</p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
continuar
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a (click)="toggleRegisterPro()" class="">{{ toggleRegisterProMessage }}</a>
</div>
</div>
</form>
</div>
</div>
</ion-content>
The problem can be summed up to:
<ion-content>
<div style="height:100%; background-color: red">
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
</div>
</ion-content>
The problem is that the content overflows the div. We can make use of overflow: overlay to solve the issue.
Simply add in the container div this property:
<ion-content>
<div style="height:100%; background-color: red; overflow: overlay">
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
</div>
</ion-content>