Having an issue with the bootstrap grid columns not lining up when using radio buttons in the grid. essentially all the columns should line up exactly but they are not. The example has virtually no styling but as you can see the columns are not lining up as you would expect. Goal is to make the column and rows dynamic so user can add and edit new column and rows.
You need to expand the snippet to see the issue.
<!DOCTYPE html>
<html>
<head>
<title>Radio Bootstrap Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.row {
outline: 1px dotted rgba(0, 0, 0, 0.25);
}
[class*="col-md"] {
outline: 1px dotted rgba(0, 0, 0, 0.5);
}
.textAlignCenter {
text-align: center;
}
label {
padding: 4px;
}
</style>
</head>
<body>
<form novalidate="novalidate">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Same/Different Example</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-4 textAlignCenter">
<div class="form-group">
<label class="">Very <br>Disinterested </label>
</div>
</div>
<div class="col-md-2 textAlignCenter">
<div class="form-group">
<label class="">Somewhat <br>Disinterested </label>
</div>
</div>
<div class="col-md-2 textAlignCenter">
<div class="form-group">
<label class="">Somewhat <br>Interested </label>
</div>
</div>
<div class="col-md-2 textAlignCenter">
<div class="form-group">
<label class="">Very <br>Interested </label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group ">
<label class="col-md-4">Travel</label>
<div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Very Disinterested">
</div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Somewhat Disinterested">
</div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Somewhat Interested">
</div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Very Interested">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group ">
<label class=" col-md-4">Fashion</label>
<div class="cbl -radio">
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Interested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Interested">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group ">
<label class=" col-md-4">Health & Fitness</label>
<div class="cbl -radio">
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Interested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Interested">
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Use Bootstrap table to fix align.
Or replace the code using this code.
<!DOCTYPE html>
<html>
<head>
<title>Radio Boostrap Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
table,th,tr,td,thead,tbody {
border: 1px dotted #ccc;
}
</style>
<body>
<div class="container py-5">
<form novalidate="novalidate">
<h4 class="">Same/Different Example</h4>
<table class="table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col" class="text-center">Very <br>Disinterested</th>
<th scope="col" class="text-center">Somewhat <br>Disinterested</th>
<th scope="col" class="text-center">Somewhat <br>Interested</th>
<th scope="col" class="text-center">Very <br>Interested</th>
</tr>
</thead>
<tbody class="text-center">
<tr>
<td>Travel</td>
<td><input type="radio" name="travel" value="Very Disinterested"></td>
<td><input type="radio" name="travel" value="Somewhat Disinterested"></td>
<td><input type="radio" name="travel" value="Somewhat Interested"></td>
<td><input type="radio" name="travel" value="Very Interested"></td>
</tr>
<tr>
<td>Fashion</td>
<td><input type="radio" name="fashion" value="Very Disinterested"></td>
<td><input type="radio" name="fashion" value="Somewhat Disinterested"></td>
<td><input type="radio" name="fashion" value="Somewhat Interested"></td>
<td><input type="radio" name="fashion" value="Very Interested"></td>
</tr>
<tr>
<td>Health & Fitness</td>
<td><input type="radio" name="health" value="Very Disinterested"></td>
<td><input type="radio" name="health" value="Somewhat Disinterested"></td>
<td><input type="radio" name="health" value="Somewhat Interested"></td>
<td><input type="radio" name="health" value="Very Interested"></td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
Think I found a suitable solution for radio and check input specific row/columns. For those specific rows I eliminated the gutters on the cols using the following CSS:
.no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Radio Boostrap Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.row {
outline: 1px dotted rgba(0, 0, 0, 0.25);
}
[class*="col-md"] {
outline: 1px dotted rgba(0, 0, 0, 0.5);
}
.textAlignCenter {
text-align: center;
}
.no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
label {
padding: 4px;
}
</style>
</head>
<body>
<form class="container-fluid" novalidate="novalidate">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Same/Different Example</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 textAlignCenter">
<div class="form-group">
<label class=""></label>
</div>
</div>
<div class="col-md-2 textAlignCenter">
<div class="form-group">
<label class="">Very <br>Disinterested </label>
</div>
</div>
<div class="col-md-2 textAlignCenter">
<div class="form-group">
<label class="">Somewhat <br>Disinterested </label>
</div>
</div>
<div class="col-md-2 textAlignCenter">
<div class="form-group">
<label class="">Somewhat <br>Interested </label>
</div>
</div>
<div class="col-md-2 textAlignCenter">
<div class="form-group">
<label class="">Very <br>Interested </label>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-12">
<div class="form-group ">
<label class="col-md-4">Travel</label>
<div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Very Disinterested" onclick="socratesProcess.ToggleRadioSelection(event,'Dataset.Scratch.Text6')">
</div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Somewhat Disinterested" onclick="socratesProcess.ToggleRadioSelection(event,'Dataset.Scratch.Text6')">
</div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Somewhat Interested" onclick="socratesProcess.ToggleRadioSelection(event,'Dataset.Scratch.Text6')">
</div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Very Interested" onclick="socratesProcess.ToggleRadioSelection(event,'Dataset.Scratch.Text6')">
</div>
</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-12">
<div class="form-group ">
<label class=" col-md-4">Fashion</label>
<div class="cbl -radio">
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Interested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Interested">
</div>
</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-12">
<div class="form-group ">
<label class=" col-md-4">Health & Fitness</label>
<div class="cbl -radio">
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Interested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Interested">
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
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 selecting date from calendar in two places in the same page,But the calendar id is dynamic and not able to pick the static value suggestion please how to use in selenium webdriver
<p-calendar id="effectiveFromDate" class="ng-touched ng-dirty ng-valid" inputstyleclass="form-control" name="effectiveFromDate" placeholder="MM/DD/YYYY" required="">
<!--template bindings={}-->
<span class="ui-calendar">
<input id="dp1479794880786" class="form-control hasDatepicker ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-hover" placeholder="MM/DD/YYYY" readonly="" type="text"/>
<!--template bindings={}-->
</span>
<p-calendar id="effectiveToDate" class="ng-pristine ng-valid ng-touched" inputstyleclass="form-control" name="effectiveToDate" placeholder="MM/DD/YYYY">
<!--template bindings={}-->
<span class="ui-calendar">
<input id="dp1479794880787" class="form-control hasDatepicker ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-hover" placeholder="MM/DD/YYYY" readonly="" type="text"/>
<!--template bindings={}-->
</span>
I am using the below code but not able to use in the same page
driver.findElement(By.className("ui-calendar")).click();
<p-accordiontab id="invOverviewTab" header="Invoice Overview" styleclass="margin-b-10">
<div class="ui-accordion-header ui-state-default ui-corner-all ui-state-active">
<div class="ui-accordion-content-wrapper" style="">
<div class="ui-accordion-content ui-widget-content">
<div class="col-md-6 col-sm-6 col-xs-12 margin-t-10 margin-b-10">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="item form-group">
<div class="item form-group invoice-config marginB">
<div class="form-group">
<label for="effectiveFromDate">
<p-calendar id="effectiveFromDate" class="ng-touched ng-dirty ng-valid" inputstyleclass="form-control" name="effectiveFromDate" placeholder="MM/DD/YYYY" required="">
<!--template bindings={}-->
<span class="ui-calendar">
<input id="dp1479805294453" class="form-control hasDatepicker ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-hover" placeholder="MM/DD/YYYY" readonly="" type="text"/>
<!--template bindings={}-->
</span>
<!--template bindings={}-->
</p-calendar>
<p class="text-danger" hidden="">Effective From Date is required</p>
</div>
<!--template bindings={}-->
<div class="form-group">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 margin-t-10 margin-b-10">
<div class="col-md-12 col-sm-12 col-xs-12 form-group text-right">
</div>
</div>
</p-accordiontab>
<p-accordiontab id="invOverviewTab" header="Invoice Overview" styleclass="margin-b-10">
<div class="ui-accordion-header ui-state-default ui-corner-all ui-state-active">
<div class="ui-accordion-content-wrapper" style="">
<div class="ui-accordion-content ui-widget-content">
<div class="col-md-6 col-sm-6 col-xs-12 margin-t-10 margin-b-10">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="item form-group">
<div class="item form-group invoice-config marginB">
<div class="form-group">
<label for="effectiveFromDate">
<p-calendar id="effectiveFromDate" class="ng-touched ng-dirty ng-valid" inputstyleclass="form-control" name="effectiveFromDate" placeholder="MM/DD/YYYY" required="">
<!--template bindings={}-->
<span class="ui-calendar">
<input id="dp1479805294453" class="form-control hasDatepicker ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-hover" placeholder="MM/DD/YYYY" readonly="" type="text"/>
<!--template bindings={}-->
</span>
<!--template bindings={}-->
</p-calendar>
<p class="text-danger" hidden="">Effective From Date is required</p>
</div>
<!--template bindings={}-->
<div class="form-group">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 margin-t-10 margin-b-10">
<div class="col-md-12 col-sm-12 col-xs-12 form-group text-right">
</div>
</div>
</p-accordiontab>
<p-accordion id="accMenu" class="custom-theme-accordion">
<div class="ui-accordion ui-widget ui-helper-reset">
<p-accordiontab id="billClientTab" header="Bill To Client Information">
<div class="row">
<p-accordiontab id="invOverviewTab" header="Invoice Overview" styleclass="margin-b-10">
<div class="ui-accordion-header ui-state-default ui-corner-all ui-state-active">
<div class="ui-accordion-content-wrapper" style="">
<div class="ui-accordion-content ui-widget-content">
<div class="col-md-6 col-sm-6 col-xs-12 margin-t-10 margin-b-10">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="item form-group">
<div class="item form-group invoice-config marginB">
<div class="form-group">
<!--template bindings={}-->
<div class="form-group">
<label for="effectiveToDate">Effective To Date</label>
<p-calendar id="effectiveToDate" class="ng-untouched ng-pristine ng-valid" inputstyleclass="form-control" name="effectiveToDate" placeholder="MM/DD/YYYY">
<!--template bindings={}-->
<span class="ui-calendar">
<input id="dp1479805294454" class="form-control hasDatepicker ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-hover" placeholder="MM/DD/YYYY" readonly="" type="text"/>
<!--template bindings={}-->
</span>
<!--template bindings={}-->
</p-calendar>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 margin-t-10 margin-b-10">
<div class="col-md-12 col-sm-12 col-xs-12 form-group text-right">
</div>
</div>
</p-accordiontab>
if span tag is child element of p-calender tag:
If you want to click effectiveFromDate then use the following XPATH:
driver.findElement(By.xpath("//*[#id='effectiveFromDate']/span")).click();
If you want to click on effectveToDate:
driver.findElement(By.xpath("//*[#id='effectiveToDate']/span")).click();
Instead of clicking the calender, you can directly enter the Date in FromDate (MM/DD/YYYY format) by identifying input tag as follows:
driver.findElement(By.xpath("//*[#id='effectiveFromDate']/span/input")).sendKeys("01/01/1990");
Similarly for To Date
driver.findElement(By.xpath("//*[#id='effectiveToDate']/span/input")).sendKeys("02/01/1990");
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.
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
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>