I'm trying to get a full width button inside my materialize css card and I've achieved the following result so far.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
<div class="col s12">
<div class="card teal lighten-4">
<div class="card-content">
<article id="post-946650" class="post-946650 page type-page status-publish hentry">
<p><input id="id_func_calc" type="hidden" value="[[{"assign":["#_z"],"eval":"#y/#x"}]]">
</p>
<div class="mathquill-embedded-latex mathquill-rendered-math"><span class="text">Travel time(in minutes)</span>
<input id="x" class="oInp" size="3" type="text" autocomplete="off"><br>
<span class="text">Miles to destination</span> <input id="y" class="oInp" size="3" type="text"><br>
<span class="text">Avg speed</span> <input id="_z" class="oInp oOutp" disabled="disabled" size="3" type="text" style="width: 3em;">
</div>
<p><input class="clcbtn waves-effect waves-light btn col s12" type="button" value="Solve"></p>
</article>
</div>
</div>
</div>
</div>
But the issue is the button is not inside the card and only half. Any help is appreciated.
Add row to the 4th div which is with the class name card-content
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
<div class="col s12">
<div class="card teal lighten-4">
<div class="card-content row">
<article id="post-946650" class="post-946650 page type-page status-publish hentry">
<p><input id="id_func_calc" type="hidden" value="[[{"assign":["#_z"],"eval":"#y/#x"}]]"></p>
<div class="mathquill-embedded-latex mathquill-rendered-math">
<span class="text">Travel time(in minutes)</span>
<input id="x" class="oInp" size="3" type="text" autocomplete="off"/><br>
<span class="text">Miles to destination</span>
<input id="y" class="oInp" size="3" type="text"><br>
<span class="text">Avg speed</span>
<input id="_z" class="oInp oOutp" disabled="disabled" size="3" type="text" style="width: 3em;"><br>
<p><input class="clcbtn waves-effect waves-light btn col s12" type="button" value="Solve"></p>
</div>
</article>
</div>
</div>
</div>
</div>
Related
I have a conditional div which will be available for user when selected. Inside that div, I need to show a drop down menu using v-repeat.
The problem is - v-repeat is not working with that v-if in parent div. When I remove v-if, it's showing data perfectly. But when use v-if, it's not working.
Moreover, there is no error in console log.
<div class="ui blue segment" v-if="client.legal_status == 'C'">
<h3 class="ui dividing header">Rappresentante legale</h3>
<div class="inline fields">
<div class="two wide field">
<label>Nome e Cognome</label>
</div>
<div class="seven wide field">
<input type="text" placeholder="Nome" name="rep_firstname" v-model="client.rep_firstname" />
</div>
<div class="seven wide field">
<input type="text" placeholder="Cognome" name="rep_lastname" v-model="client.rep_lastname" />
</div>
</div>
<div class="inline fields">
<div class="two wide field">
<label>Indirizzo</label>
</div>
<div class="fourteen wide field">
<input type="text" placeholder="Indirizzo" name="rep_address" v-model="client.rep_address" />
</div>
</div>
<div class="inline fields">
<div class="two wide field">
<label>CAP</label>
</div>
<div class="two wide field">
<input type="text" placeholder="CAP" name="rep_zip_code" v-model="client.rep_zip_code" />
</div>
<div class="two wide field">
<label>Città</label>
</div>
<div class="four wide field">
<input type="text" placeholder="Città" name="rep_city" v-model="client.rep_city" />
</div>
<div class="two wide field">
<label>Prov.</label>
</div>
<div class="four wide field">
<div id="rep_provinces-dropdown" class="ui search selection dropdown">
<input type="hidden" name="rep_province_id" v-model="client.rep_province_id">
<i class="dropdown icon"></i>
<div class="default text">Provincia</div>
<div class="menu">
<div class="item" v-repeat="province: provinces" data-value="#{{province.id}}">
<span class="description">#{{province.id}}</span> #{{province.name}}
</div>
</div>
</div>
</div>
</div>
<div class="inline fields">
<div class="two wide field">
<label>Cellulare</label>
</div>
<div class="six wide field">
<input type="text" placeholder="Cellulare" name="rep_mobile" v-model="client.rep_mobile" />
</div>
<div class="two wide field">
<label>Email</label>
</div>
<div class="six wide field">
<input type="text" placeholder="Email" name="rep_email" v-model="client.rep_email" />
</div>
</div>
</div>
how can I fix it?
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 integrating Bootstrap 3 with Kendo UI controls.
I am having alignment issues with multiple form-horizontal sections, here is the HTML
<ul id="acc-form-panelbar">
<li class="k-state-active">
<span class="k-link k-state-selected">Project Info</span>
<section style="padding:10px 0;">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="procod">Project Code</label>
<div class="col-sm-8">
<input id="procod" style="width: 25%;"/>
</div>
</div>
</div>
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="proshocod">Project Short Code</label>
<div class="col-sm-8">
<input id="proshocod" style="width: 25%;"/>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="form-horizontal form-widgets col-sm-12">
<div class="form-group">
<label class="control-label col-sm-2" for="protit">Project Title</label>
<div class="col-sm-10">
<input id="protit" style="width: 75%;" />
</div>
</div>
</div>
</section>
</li>
<li class="">
<span class="k-link">Users Info</span>
<div class="row" style="margin: 20px 0;">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-3" for="name">Name</label>
<div class="col-sm-8">
<input id="name" value="Bilal Haidar" style="width: 75%;" /> <!-- styles="width:100%;" -->
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="birthday">Birthday</label>
<div class="col-sm-8">
<input id="birthday" type="date" value="10/09/1979" style="width: 75%;" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="gender">Gender</label>
<div class="col-sm-8">
<select id="gender" style="width: 75%;"><option value="Male" selected="selected">Male</option><option value="Female">Female</option></select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="language">Language</label>
<div class="col-sm-8">
<select id="language" style="width: 75%;"><option value="English" selected="selected">English</option><option value="German">German</option></select>
</div>
</div>
</div>
</div>
</li>
</ul>
Anyone can tell me what's wrong with the alignment?
Thanks
First I will advice you strip your code of all inline styles, and the put every successive that should be on the same column in a div / section of class row. Bootstrap is based on the 12-grid system. That means once 12 columns are complete, the last element is dropped to a new line. Try these and see what will happen.
I'm attempting to render, side by side, form elements within a bootstrap modal dialog. Reason for this is that they're for all intents and purposes the same options, just representing options for different items and the current way it renders for users is basically:
<table>
<tr>
<td><!--Option Group 1--></td>
<td><!--Option Group 2--></td>
<td><!--Option Group 3--></td>
</tr>
</table>
So using the modal dialog example in the Bootstrap 3 documentation combined with the form-horizontal exampl in the Bootstrap 3 documentation plus some use of span to attempt to do a 50% width for each (and hopefully left-to-right tiling of the sections), I came out with:
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="addLabel">Title of Dialog</h4>
</div>
<form class="form-horizontal" role="form">
<div class="modal-body">
<div class="row">
<div class="span6">
<div class="form-group">
<label for="inputUser" class="col-sm-1 control-label">User</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputUser" value="" disabled="disabled">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-1 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
</div>
<div class="span6">
<div class="form-group">
<label for="inputUser" class="col-sm-1 control-label">User</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="inputUser" value="" disabled="disabled">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-1 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Add Request</button>
</div>
</form>
</div>
</div>
http://jsfiddle.net/isherwood/3zeMh/
The problem is that somewhere along the way, it is forcing each item to go new line so I have two "forms" that are 50% of the parent width (intentional) that are rendered vertically (not intentional). How can I make the two render side by side?
<div class="span6">
should be
<div class="col-sm-6">
2 times.
http://jsfiddle.net/isherwood/3zeMh/4
It needs a little further cleanup, but that's the primary issue. Here's one possible refinement: http://jsfiddle.net/isherwood/3zeMh/6
I'd probably make the labels wider and keep everything block for mobile, though.
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>