The code is like below:
<div id="deposit-limit-187034" class="widget deposit-limit">
<div class="article deposit-limit-text">
<div class="hidden deposit-limit-edit" data-view-group="deposit-limit" data-view="deposit-limit-edit" style="display: none;">
<div class="hidden deposit-limit-confirm" data-view-group="deposit-limit" data-view="deposit-limit-confirm" style="display: none;">
<div class="hidden deposit-limit-set" data-view-group="deposit-limit" data-view="deposit-limit-set" style="display: block;">
<label>
<input type="radio" checked="checked" name="timelimit" value="0">
<span class="custom-radio"></span>
24 timer
</label>
</div>
<div class="group-field">
<label>
<input type="radio" name="timelimit" value="1">
<span class="custom-radio"></span>
7 dage
</label>
</div>
<div class="group-field">
<label>
<input type="radio" name="timelimit" value="2">
<span class="custom-radio"></span>
30 dage
</label>
</div>
<p> </p>
<fieldset class="amount-field-container">
<p></p>
<p class="deposit-error deposit-limit-set-error hidden"> Vælg venligst en tidsramme og indtast et gyldigt beløb </p>
<button class="btn has-icon-suffix deposit-set">
</form>
</div>
<div class="hidden deposit-limit-active" data-view-group="deposit-limit" data-view="deposit-limit-active" style="display: none; opacity: 0;">
The X path is as follows:
//[(#data-view='deposit-limit-set') and (#style='display: block;')]//[(#class='field-group field-row radio-container')]//div//label/input[contains(#name,'timelimit') and contains(#value, '2')]
Sometimes it clicks the radio button and sometimes I get "Element is not click-able" at point(345,802.5).
Please help
Related
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>
I am trying to divide 4 radio buttons into two lines using bootstrap 4 alpha6, but I can't:
<div id="payment-table" class="row">
<div class="col-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="paymentMethod" data-id="1" checked autocomplete="off">
<img src="imgs/cash.png">
</label>
<label class="btn btn-primary">
<input type="radio" name="paymentMethod" data-id="2" autocomplete="off">
<img src="imgs/visa.png">
</label>
<label class="btn btn-primary">
<input type="radio" name="paymentMethod" data-id="3" autocomplete="off">
<img src="imgs/split.png" id="split">
</label>
<label class="btn btn-primary">
<input type="radio" name="paymentMethod" data-id="4" autocomplete="off">
<img src="imgs/master.png">
</label>
</div>
</div>
</div>
Here's what I get:
I tried to remove "btn-group" class, and I get:
And I can't align them to fit full width, as I want two radio buttons per line, and each line has full width with 50% for each radio button.
I tried to give each one "col-6", and here's what I get:
Any suggestion?
actually we need to use only col class. by nesting we determine how many columns will be there.
Try this
.btn-primary {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="payment-table" class="row">
<div class="col">
<div class="" data-toggle="buttons">
<div class="row">
<div class="col">
<label class="btn btn-primary active col">
<input type="radio" name="paymentMethod" data-id="1" checked autocomplete="off">
<img src="imgs/cash.png">
</label>
</div>
<div class="col">
<label class="btn btn-primary col">
<input type="radio" name="paymentMethod" data-id="2" autocomplete="off">
<img src="imgs/visa.png">
</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<label class="btn btn-primary col">
<input type="radio" name="paymentMethod" data-id="3" autocomplete="off">
<img src="imgs/split.png" id="split">
</label>
</div>
<div class="col">
<label class="btn btn-primary col">
<input type="radio" name="paymentMethod" data-id="4" autocomplete="off">
<img src="imgs/master.png">
</label>
</div>
</div>
</div>
</div>
Hope this helps!
How to remove the space between button and two inputs in form div #roleSearch ? (#inputCode + #btnOpenSearch + #inputDescription)
<div id="roleSearch" class="col-md-2 ">
<input id="inputCode" type="text" class="form-control int-number col-sm-1" />
</div>
<div class="col-md-1">
<!-- Open a popup to search the code -->
<a id="btnOpenSearch" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> </a>
</div>
<div class="col-md-9">
<input id="inputDescription" type="text" class="form-control col-md-9 " />
</div>
</div>
http://jsfiddle.net/computeiro/rfehs6bg/72/
what you want ? remove space only or all things (#inputCode + #btnOpenSearch + #inputDescription) gone into a single line.
i solve this plz saw this link
<div class="row">
<form>
<div class="col-md-12 form-group">
<label for="inputCnpj">Patner</label>
<div class="entity-search form-group row input-group" style="display: table" >
<div class="col-md-2 p0" style="display: table-cell">
<input type="text" class="form-control int-number" />
</div>
<div class="col-md-1 p0" style="display: table-cell; vertical-align: top;">
http://jsfiddle.net/amitmonsterme/1o0rhq1b/2/
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 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>