I'm trying out angular material and using the md-tabs but some reason when applying md-dynamic-height the tabs plus content if the content exceeds the length of the screen. I just what the content to scroll can't figure out what I'm doing wrong. Here's an example of what I am doing.
<md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content>
<!--First Tab-->
<md-tab md-dynamic-height label="First INFO">
<div class="">
<div class="bold">
</div>
<hr />
<img src="images/map-pin.png" width="45" height="45" class="left up10" />
<button class="btn-icon right up10"/>
<img src="images/compose.svg" width="25" height="25" />
</button>
<span></span>
<div >
</div>
<div style="clear: both"></div>
</div>
</md-tab>
<!--Second Tab-->
<md-tab md-dynamic-height label="Second INFO">
<div class="">
<div class="bold">
</div>
<hr />
<img src="images/map-pin.png" width="45" height="45" class="left up10" />
<button class="btn-icon right up10"/>
<img src="images/compose.svg" width="25" height="25" />
</button>
<span></span>
<div >
</div>
<div style="clear: both"></div>
</div>
</md-tab>
<!--Third Tab-->
<md-tab md-dynamic-height label="Third INFO">
<div class="">
<div class="bold">
</div>
<hr />
<img src="images/map-pin.png" width="45" height="45" class="left up10" />
<button class="btn-icon right up10"/>
<img src="images/compose.svg" width="25" height="25" />
</button>
<span></span>
<div >
</div>
<div style="clear: both"></div>
</div>
</md-tab>
Sample layout :
<md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content>
<md-tab label="1">
<md-content style="height:100%">
tab content here
</md-content>
</md-tab>
<md-tab label="2">
<md-content style="height:100%">
tab content here
</md-content>
</md-tab>
<md-tab label="3">
<md-content style="height:100%">
tab content here
</md-content>
</md-tab>
</md-tabs>
Try md-dynamic-height="" in md tabs
<md-tabs md-dynamic-height="">
Related
I am using the grid system to layout out three filters and a button. The button is partially outside the card. I want it to break to a new row if it can't fit.
I've tried playing with the col-lg- and col-auto, but can't seem to get that right combination.
<div class="row g-1">
<div class="col-lg-6 mb-3">
<div class="card shadow">
<div class="card-body">
<h3>Activity</h3>
<div class="row g-1 align-items-end">
<div class="col-lg-5 mb-3">
<label class="form-label">Location</label>
<asp:DropDownList ID="ctLocation" runat="server" CssClass="form-select"></asp:DropDownList>
</div>
<div class="col-lg-3 mb-3">
<label class="form-label">Start Date</label>
<asp:TextBox ID="ctStartDate" runat="server" CssClass="form-control datepicker"></asp:TextBox>
</div>
<div class="col-lg-3 mb-3">
<label class="form-label">End Date</label>
<asp:TextBox ID="ctEndDate" runat="server" CssClass="form-control datepicker"></asp:TextBox>
</div>
<div class="col-lg-1 mb-3">
<input type="button" id="ctRefresh" class="btn btn-outline-primary" value="Refresh" />
</div>
</div>
<hr />
<div class="mt-3">
<canvas id="dailyTraffic" height="100"></canvas>
</div>
</div>
</div>
</div>
The solution: add col-auto to the last column (i.e., the one which contains the button).
The class col-auto will push the button to a new line if there's not enough space for it.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="row g-1">
<div class="col-lg-6 mb-3">
<div class="card shadow">
<div class="card-body">
<h3>Activity</h3>
<div class="row g-1 align-items-end">
<div class="col-lg-5 mb-3">
<label class="form-label">Location</label>
<asp:DropDownList ID="ctLocation" runat="server" CssClass="form-select"></asp:DropDownList>
</div>
<div class="col-lg-3 mb-3">
<label class="form-label">Start Date</label>
<asp:TextBox ID="ctStartDate" runat="server" CssClass="form-control datepicker"></asp:TextBox>
</div>
<div class="col-lg-3 mb-3">
<label class="form-label">End Date</label>
<asp:TextBox ID="ctEndDate" runat="server" CssClass="form-control datepicker"></asp:TextBox>
</div>
<div class="col-auto mb-3">
<input type="button" id="ctRefresh" class="btn btn-outline-primary" value="Refresh" />
</div>
</div>
<hr />
<div class="mt-3">
<canvas id="dailyTraffic" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
Let's say you change "Location" column from col-lg-5 to col-lg-3. Now there's enough space for the button to be in the same line.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="row g-1">
<div class="col-lg-6 mb-3">
<div class="card shadow">
<div class="card-body">
<h3>Activity</h3>
<div class="row g-1 align-items-end">
<div class="col-lg-3 mb-3">
<label class="form-label">Location</label>
<asp:DropDownList ID="ctLocation" runat="server" CssClass="form-select"></asp:DropDownList>
</div>
<div class="col-lg-3 mb-3">
<label class="form-label">Start Date</label>
<asp:TextBox ID="ctStartDate" runat="server" CssClass="form-control datepicker"></asp:TextBox>
</div>
<div class="col-lg-3 mb-3">
<label class="form-label">End Date</label>
<asp:TextBox ID="ctEndDate" runat="server" CssClass="form-control datepicker"></asp:TextBox>
</div>
<div class="col-auto mb-3">
<input type="button" id="ctRefresh" class="btn btn-outline-primary" value="Refresh" />
</div>
</div>
<hr />
<div class="mt-3">
<canvas id="dailyTraffic" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
I am developing an application with IONIC 4 for android and IOS.
I add a side menu (ion-menu), it works perfectly on android.
But in IOS it is giving me problems, the menu opens perfectly. But when I want to close the menu. Graphically the menu closes, but when I try to interact with the application, only the options within the side menu are activated.
Only the side menu items are useful, the rest of the application is canceled.
This is the process.
Main page normally:
I open the side menu:
I close the menu:
All this options gets blocked:
But this options still are activated, even though the menu has been hidden.
This only happen in IOS, my specifications:
My code:
<ion-menu side="start" content-id="main-content">
<ion-header class="headermenu">
<div class="spacioemenuleft">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;">
<img alt="logo" style="width:18.9vw; height:10.6vh; border-radius: 50%;" src="{{pictureusuariomenu}}" >
</div> </div> </div>
</div>
<div class="spacioemenuright">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div class="textsaldo2" [innerHTML]="fullname"></div>
<div class="bloque">
<div style="float:left; width:70%; height:100%" class="textsaldo2">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;">
PIN: {{pinusuario}}
</div> </div> </div>
</div>
<div style="float:right; width:30%; height:100%; background-color:white;" (click)="copyText()">
<img alt="logo" style="width:100%; height:100%" src="assets/imgs/compartir-b.png" >
</div>
</div>
<span class="error ion-padding" style="color:white; font-weight:bold; margin-top:1em; padding-top:0em;" *ngIf="registrado">
PIN COPIADO!!!
</span>
</div>
</div>
</div>
</ion-header>
<ion-content >
<div class="ion-padding">
<div class="espacio2 margenboton" routerLink="/recargarsaldo">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;">
Recargar Saldo
</div> </div> </div>
</div>
<ion-list>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/profile">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/perfil.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/profile">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Mi perfil
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/notificaciones">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/11notificaciones.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/notificaciones">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Notificaciones
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%;padding:0.8em;" routerLink="/misretiros" >
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/6dolares.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/misretiros">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Mis retiros
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/historial">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/11historial.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/historial">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Historial
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/contacto">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/contact5.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/contacto">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Contáctanos
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;">
<img alt="logo" style="width:2.7vh; height:2.6vh;" src="assets/imgs/7cerrar.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;" (click)="cerrarsession();" >
Cerrar sesión
</div> </div> </div>
</div>
</ion-item>
</ion-list>
</div>
<div style="height: 15vh; background-color:#F3F3F3; padding:0.2em;">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;" >
<div style="float:left; width:40%; height:100%;" >
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:right;">
<p class="textblue2" style="font-weight:bold;">En alianza con:</p>
</div> </div> </div>
</div>
<div style="float:left; width:60%; height:100%; padding:0.1em; padding-top: 0.6em;" >
<img alt="logo" style="width:80%; height:auto" src="assets/imgs/Grupo517.png" >
</div>
</div> </div> </div>
</div>
</ion-content>
</ion-menu>
Any ideas?
<IonContent>
... other page components
{ authenticated ? <Menu/> : null }
</IonContent>
or what i have done in my example is not even render the router code that contains the menu when the user isn't authenticated
if (!authInfo || !authInfo.initialized) {
return (
<IonApp>
<IonLoading isOpen={true} />
</IonApp>
);
} else {
return (
<IonApp>
<>
{authInfo?.loggedIn === true ? (
<IonReactRouter>
<IonSplitPane contentId="main">
<Menu />
<IonRouterOutlet id="main">
<Route path="/page/:name" component={Page} exact />
<Route path="/tabs" component={TabRootPage} />
<Redirect from="/" to="/tabs" exact />
</IonRouterOutlet>
</IonSplitPane>
</IonReactRouter>
) : (
<IonReactRouter>
<Route
path="/create-account"
component={CreateAccountPage}
exact
/>
<Route path="/login" component={LoginPage} exact />
<Redirect from="/" to="/login" exact />
</IonReactRouter>
)}
</>
</IonApp>
);
}
See full app and source code here : https://github.com/aaronksaunders/ionic-sidemenu-tabs-auth-starter
I tried to write a form in jquery mobile. all field labels have a popup icon. This form worked well but now there is a problem! When I clicked in bottom popup icon, popup open in top of form and in a fixed position. I dont know what's happened. please help me. thank you.
<form class="form-inline" role="form" method="post" action="php/formUserP1.php" id="formP1" name="formP2">
<fieldset class="ui-grid-a">
<h2 class="ui-block-a">
<sup class="dont-print">
<a href="#Page01Tooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a>
</sup>
<div data-role="popup" id="Page01Tooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Personal Information
</p>
</div>
</h2>
<div id="imageBlock" class="ui-block-b" align="center">
<!-- Image -->
<div id="imagePreview"></div>
<div class="fileUpload">
<span>
Image
</span>
<input id="uploadImage" type="file" class="upload" name="image" />
<sup class="dont-print">
<a href="#uploadImageTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a>
</sup>
<div data-role="popup" id="uploadImageTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Your Image
</p>
<img src="images/image-sample.jpg">
</div>
</div>
<!-- End of Image -->
</div>
</fieldset>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="FirstNameFa" id="00" >
FirstNameFa
<sup class="dont-print">
<a href="#FirstNameFaTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="FirstNameFaTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write your first name using the Persian alphabet.
</p>
</div>
</label>
<input type="text" class="form-control input" data-clear-btn="true" placeholder=" "
name="FirstNameFa" id="FirstNameFa" maxlength="40" required>
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="FirstNameEn">
FirstNameEn
<sup class="dont-print">
<a href="#FirstNameEnTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="FirstNameEnTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
In Latin script, write your first name as it appears in your passport.
</p>
</div>
</label>
<input type="text" class="form-control" data-clear-btn="true" placeholder="Your First Name in English"
name="FirstNameEn" id="FirstNameEn" maxlength="40" required>
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="LastNameFa">
LastNameFa
<sup class="dont-print">
<a href="#LastNameFaTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="LastNameFaTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write your family name using the Persian alphabet.
</p>
</div>
</label>
<input type="text" class="form-control" data-clear-btn="true" placeholder=" "
name="LastNameFa" id="LastNameFa" maxlength="40" required>
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="LastNameEn">
.
<sup class="dont-print">
<a href="#LastNameEnTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="LastNameEnTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p>
In Latin script, write your family name as it appears in your passport.
</p>
</div>
</label>
<input type="text" class="form-control" data-clear-btn="true" placeholder="Your Last Name in English"
name="LastNameEn" id="LastNameEn" maxlength="40" required>
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<fieldset data-role="controlgroup" data-type="horizontal" id="Gender">
<legend>
Gender
<sup class="dont-print">
<a href="#GenderTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="GenderTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
What is your gender
</p>
<ul dir="ltr">
<li>
Male
</li>
<li>
Female
</li>
</ul>
</div>
</legend>
<label for="Male" class="radio-inline">
<input type="radio" class="form-control" name="Gender" value="1" id="Male" required>
</label>
<label for="Female" class="radio-inline">
<input type="radio" class="form-control" name="Gender" value="2" id="Female"
</label>
</fieldset>
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="PassportNo">
PassportNo
<sup class="dont-print">
<a href="#PassportNoTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="PassportNoTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write your passport number.
</p>
</div>
</label>
<input type="text" data-clear-btn="true" class="form-control" placeholder=": A11487661"
name="PassportNo" id="PassportNo" maxlength="30" required>
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
Nationality
<sup class="dont-print">
<a href="#NationalityTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="NationalityTooltip" class="ui-content" data-overlay-theme="a">
What is your nationality
</div>
</div>
<div>
BirthDate
<a href="#BirthDateTooltip" data-rel="popup" data-transition="flip"
class=" ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title="Help"></a>
<div data-role="popup" id="BirthDateTooltip" class="ui-content" data-overlay-theme="a">
Write your birthdate as it appears in your passport (day, month, year according to the Gregorian calendar)
</div>
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="CountryBirth">
CountryBirth
<sup class="dont-print">
<a href="#CityBirthTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="CityBirthTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write the name of the country and the city in which you were born.
</p>
</div>
</label>
<fieldset data-role="controlgroup" data-type="horizontal">
<select class="form-control" name="CountryBirth" id="CountryBirth" dir="ltr">
<option value="">
</option>
</select>
</fieldset>
<input type="text" data-clear-btn="true" class="form-control" placeholder=" . : "
name="CityBirth" id="CityBirth" maxlength="30">
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="CountryResidence">
CountryResidence
<sup class="dont-print">
<a href="#CountryResidenceTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="CountryResidenceTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write the name of the country and the city in which you live now.
</p>
</div>
</label>
<fieldset data-role="controlgroup" data-type="horizontal">
<select class="form-control" name="CountryResidence" id="CountryResidence" dir="ltr">
<option value="">
</option>
</select>
</fieldset>
<input type="text" data-clear-btn="true" class="form-control" placeholder=" . : "
name="CityResidence" id="CityResidence" maxlength="30">
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="HomeTel">
HomeTel
<sup class="dont-print">
<a href="#HomeTelTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="HomeTelTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write your home phone number, including the city and country code.
</p>
</div>
</label>
<input type="number" data-clear-btn="true" class="form-control" placeholder=": 00982122414393"
name="HomeTel" id="HomeTel" maxlength="15">
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="Mobile">
Mobile
<sup class="dont-print">
<a href="#MobileTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="MobileTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write your cell phone number, including the country code.
</p>
</div>
</label>
<input type="number" data-clear-btn="true" class="form-control" placeholder=": 0098912345678901"
name="Mobile" id="Mobile" maxlength="15" >
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="WorkTel">
WorkTel
<sup class="dont-print">
<a href="#WorkTelTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="WorkTelTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Write your work phone number, including the city and country code.
</p>
</div>
</label>
<input type="number" data-clear-btn="true" class="form-control" placeholder=": 00982122414393"
name="WorkTel" id="WorkTel" maxlength="15">
</div>
<div data-role="fieldcontain"> <!-- for inline label and input -->
<label for="Email">
Email
<sup class="dont-print">
<a href="#EmailTooltip" data-rel="popup" data-transition="flip"
class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini"
title=" "></a></sup>
<div data-role="popup" id="EmailTooltip" class="ui-content" data-overlay-theme="a"
style="max-width:350px;">
<p dir="ltr">
Your email address.
</p>
</div>
</label>
<input type="email" data-clear-btn="true" class="form-control" name="Email" id="Email" disabled/>
</div>
<br>
<input type="submit" class="form-control dont-print" data-icon="arrow-l" data-inline="true" name="next02" id="next02" value=" ">
<br>
</form>
Add data-position-to="window" to the buttons that open the pop-ups.
jQuery Mobile pop-up position.
href="#Page01Tooltip" data-rel="popup" data-transition="flip"
Use there: data-position="window"
Hi i am new for jquery mobile.I am developed a mobile app which use together with jquery mobile and phonegap i facing a problem nw. When keyboard is popup , it block my textbox. Please c my code below
phonegap AndroidManifest.xml
<activity
android:name="com.example.smartrealtor.MainActivity"
android:label="SmartRealtor"
android:windowSoftInputMode="adjustPan"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
android:hardwareAccelerated="true"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Jquery mobile.html
<!-- Tab 1 -->
<div id="nPersonal">
<!-- POP UP-->
<div data-role="popup" id="popupGallery" data-overlay-theme="b" style="background-color:white">
<p class="note2">Choose to take photo with camera or take picture from gallery</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" class="ui-btn-transparent ui-btn-icon-top ui-icon-takephoto ui-nodisc-icon" id="cameraBtn">
<br>
<br>
Take Photo<br>
</a>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn-transparent ui-btn-icon-top ui-icon-opengallery ui-nodisc-icon" id="galleryBtn">
<br>
<br>
Open Gallery<br>
</a>
</div>
</div>
</div>
<div data-role="popup" id="popupPhotoPortrait" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
Close<img id="imgLarge" alt="Photo portrait">
</div>
<!-- /POP UP-->
<div data-role="popup" id="popupSave" data-overlay-theme="b" style="width: 250px; height: 150px; align-content: center;">
<div data-role="header">
<h1>Record</h1>
</div>
<p class="note">Are you confirm to save?</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a">Cancel</a>
</div>
<div class="ui-block-b">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" id="btnSave" data-transition="none">Confirm</a>
</div>
</div>
</div>
<!-- /POP UP-->
<!-- Agent Detail -->
<div class="ui-grid-a loan">
<ul data-role="none" data-inset="true" class="login_from transparentForm">
<strong>Contact Information</strong>
<div style="text-align: center; display: block; width: 100%; height: 120px; border-bottom: 1px solid #dbdbdb">
<span style="font-size: 12px; text-align: center; color:#fff">Take Picture</span>
<div class="file-upload">
<img id="imgContactPic" style="width: 100px; height: 100px" />
</div>
</div>
<li>
<label>Name </label>
<span>
<input type="text" name="customername" id="txtCustomerName" data-role="none" required />
</span>
</li>
<li>
<label>Contact No. </label>
<span>
<input type="number" name="customerhpcontact" id="txtCustomerHPcontact" data-role="none" required>
</span>
</li>
<li>
<label>Date of birth </label>
<span>
<input type="date" data-role="none" id="txtDOB">
</span>
</li>
<li>
<label>Email</label>
<span>
<input type="email" name="customeremail" id="txtCustomerEmail" data-role="none">
</span>
</li>
<li>
<label>Address</label>
<span>
<input type="text" name="txtAddress" id="txtAddress" data-role="none">
</span>
</li>
<li>
<label>Occupation</label>
<span>
<input type="text" name="customeroccupation" id="txtCustomerOccupation" data-role="none">
</span>
</li>
<li>
<label>Category</label>
<span>
<div class="ui-field-contain">
<select name="select-native-1" id="ddlCategory" data-role="none" class="infoSelect" required>
<option value>Select Categories</option>
<option value="B">Buyer</option>
<option value="T">Tenant</option>
<option value="S">Seller</option>
<option value="I">Investor</option>
</select>
</div>
</span>
</li>
</ul>
</div>
<!-- /Agent Detail -->
</div>
<!-- /Tab 1 -->
</form>
</div>
I also try setting android:windowSoftInputMode="adjustResize" but, the adjustresize break my page css. My page, header and footer will jumping , once the keyboard appear
Please help. thanks
I'm building my first JQM site so I think I'm missing some simple little thing that's causing me a bunch of problems.
I have setup the page, header, content and footer and a panel for the menu. Then I have I have a js file with the following:
$(document).on('pageinit', function (event) {
alert('this works every time you navigate to another page');
$("#menu-panel").panel("open");//this works the first time only
$("#new-lump-sum").popup("open");//this never works
});
Can anyone tell me why I'm getting this behaviour instead of both the panel and the popup opening every time you navigate to another page?
I also can't open them programmatically from the browser console (using chrome)
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cashflow - IFA Portal</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link href="/Styles/System.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery.mobile-1.3.1.min.js"></script>
<script src="/Scripts/highcharts.js"></script>
<script src="/Scripts/System.js"></script>
</head>
<body class="computer android">
<div id="page-wrapper">
<div data-role="page" class="page ui-responsive-panel"><!-- Start Page -->
<div data-role="panel" id="menu-panel" data-position="left" data-display="reveal" data-theme="a" data-dismissible="false" class="">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search Items..." data-theme="a" data-filter-theme="a">
<li><img src="/Images/Icons/home.png" alt="" class="ui-li-icon"/>Home</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Tools</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Cashflow</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Clients</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Proposals</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Funds</li>
</ul>
</div>
<div id="header" data-role="header" data-theme="d">
<div id="top-border"></div>
<div class="floatleft">
</div>
<div id="logo">
<img src="/Images/AllanGray-Logo.png" />
</div>
<div class="floatleft header-toolbar" data-role="controlgroup" data-type="horizontal">
Favourites
<img src="/Images/Icons/179-notepad.png" class="ui-li-icon small-icon" />Notes
Display Settings
</div>
<div id="logout">
<section id="login">
Log In
</section>
</div>
<div id="display-options" data-role="popup" class="ui-content">
Close
<form>
<fieldset id="theme-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Theme</legend>
<input type="radio" name="theme" id="theme-1" value="android" checked="checked" />
<label for="theme-1" class="theme-option">Android</label>
<input type="radio" name="theme" id="theme-2" value="apple" />
<label for="theme-2" class="theme-option">Apple</label>
<input type="radio" name="theme" id="theme-3" value="windows" />
<label for="theme-3" class="theme-option">Windows</label>
</fieldset>
<br />
<fieldset id="size-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Screen Size</legend>
<input type="radio" name="size" id="size-1" value="computer" checked="checked" />
<label for="size-1" class="size-option">Computer</label>
<input type="radio" name="size" id="size-2" value="tablet" />
<label for="size-2" class="size-option">Tablet</label>
<input type="radio" name="size" id="size-3" value="phone" />
<label for="size-3" class="size-option">Phone</label>
</fieldset>
</form>
</div>
</div>
<div id="content" data-role="content">
<h2>Cashflow Calculator</h2>
<div class="ui-grid-a">
<div class="ui-block-a" style="padding-right:5px;">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Investment Assumptions</h3>
<div data-role="fieldcontain" class="narrow">
<label for="time">Time horizon (years)</label>
<input type="range" name="time" id="time" value="20" min="0" max="100" data-highlight="true" style="width"/>
<label for="nominal">Nominal return after unit trust fees (%)</label>
<input type="text" name="nominal" id="nominal" value="" />
<label for="inflation">Inflation rate p.a. (%)</label>
<input type="text" name="inflation" id="inflation" value="" />
<label for="administration-fees">Net platform administration fees (%)</label>
<input type="text" name="administration-fees" id="administration-fees" value="" />
<label for="advisor-fees">Financial advisor fees (%)</label>
<input type="text" name="advisor-fees" id="advisor-fees" value="" />
</div>
</div>
Add Contributions or Withdrawals
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Contributions & Withdrawals </h3>
<ul id="lump-sums" data-role="listview" data-split-icon="delete" data-split-theme="d">
<li>
<a>
<h3>Contribution: R20 000</h3>
<p class="topic"><strong>Recurres: 6 times</strong></p>
<p class="ui-li-aside"><strong>Start Date: 01/08/2013</strong></p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Contribution: R5000</h3>
<p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Withdrawal: -R25 000</h3>
<p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
</a>
Delete
</li>
</ul>
</div>
<div data-role="popup" id="new-lump-sum" class="ui-content">
Close
<form>
<fieldset id="lump-sum-type" data-role="controlgroup" data-type="horizontal">
<legend>Add New</legend>
<input type="radio" name="lump-sum-type" id="contribution" value="contribution" checked="checked" />
<label for="contribution" class="">Contribution</label>
<input type="radio" name="lump-sum-type" id="withdrawal" value="withdrawal" />
<label for="withdrawal" class="">Withdrawal</label>
</fieldset>
<label for="lump-sum-amount">Amount (R)</label>
<input type="text" name="lump-sum-amount" id="lump-sum-amount" value="" />
<label for="lump-sum-date">Date</label>
<input type="text" name="lump-sum-date" id="lump-sum-date" value="" />
<a data-role="button" data-theme="b" onclick="addLumpSum()">Add</a>
</form>
</div>
</div>
<div class="ui-block-b" style="padding-left:5px;">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Future Value Graph</h3>
<div id="container" style="width:100%; height:400px;">fgjfjfgjh</div>
<script type="text/javascript">
</script>
</div>
</div>
</div>
</div>
<div id="footer" data-role="footer">
<div id="bottom-border"></div>
<p>Copyright © 2013 Allan Gray. All Rights Reserved.</p>
</div>
<div data-role="panel" id="right-panel" data-position="right" data-display="overlay" data-theme="b">
<h3>Favourites</h3>
<div id="search-box">
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" placeholder="Search..." />
</div>
</div>
<script>
</script>
</div><!-- End Page -->
</div>
</body>
</html>
Popups and dialogs are tricky when it comes to opening them right after a page event occurs. To fix this issue, you need to use setTimeout to open a dialog or a popup.
$(document).on('pageinit', function() {
setTimeout(function () {
$('#new-lump-sum').popup('open');
}, 100); // delay above zero
});