I would like the button to be placed at the same height as the other elements. But I don't know how to do this. I'm lost in the blocks...
btn print
How could I place the button at the same height as the dropdowns?
Here is an idea of my code below
.wrapper-component {
width: 95%;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="mt-5 home-content wrapper-component ">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-auto">
<!-- Type -->
<label for="type" class="col-form-label">TYPE</label>
</div>
<select class="form-select" style="max-width: 240px">
<option selected disabled value="">Choice an item</option>
<!-- ALL -->
<option [value]="'ALL'">ALL</option>
<!-- IN -->
<option [value]="'IN'">IN</option>
<!-- OUT -->
<option [value]="'OUT'">OUT</option>
</select>
<div class="col-auto">
<label for="status" class="col-form-label">STATUS</label>
</div>
<select class="form-select" style="max-width: 240px">
<option selected disabled value="">Choice a status</option>
<!-- ALL -->
<option [value]="''">ALL</option>
<!-- ENCODE -->
<option [value]="'1'">ENCODE</option>
<!-- DELETE -->
<option [value]="'8'">DELETE</option>
<!-- DONE -->
<option [value]="'9'">DONE</option>
</select>
</div>
<div class="float-end">
<div class="col-md-12">
<!-- Print -->
<button class="btn btn-secondary ml-2" (click)="printPage()">Print</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Simply add another <div class="col-auto"> with the button inside.
See the snippet below.
.wrapper-component {
width: 95%;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="mt-5 home-content wrapper-component ">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-auto">
<!-- Type -->
<label for="type" class="col-form-label">TYPE</label>
</div>
<select class="form-select" style="max-width: 240px">
<option selected disabled value="">Choice an item</option>
<!-- ALL -->
<option [value]="'ALL'">ALL</option>
<!-- IN -->
<option [value]="'IN'">IN</option>
<!-- OUT -->
<option [value]="'OUT'">OUT</option>
</select>
<div class="col-auto">
<label for="status" class="col-form-label">STATUS</label>
</div>
<select class="form-select" style="max-width: 240px">
<option selected disabled value="">Choice a status</option>
<!-- ALL -->
<option [value]="''">ALL</option>
<!-- ENCODE -->
<option [value]="'1'">ENCODE</option>
<!-- DELETE -->
<option [value]="'8'">DELETE</option>
<!-- DONE -->
<option [value]="'9'">DONE</option>
</select>
<div class="col-auto ms-auto">
<button class="btn btn-secondary ml-2" (click)="printPage()">Print</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I would like to know if it is possible to position the label and the input on the same line, please. I don't know how to do this in Bootstrap 5.
Thank you in advance for your help.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container pt-5">
<form (ngSubmit)="login()">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">User</label>
<input type="text" class="form-control" name="exampleInputEmail1" style="width: 40%" aria-describedby="emailHelp" [(ngModel)]="loginForm.user" required maxlength="4">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" name="exampleInputPassword1" style="width: 40%" [(ngModel)]="loginForm.password" required maxlength="4">
</div>
<button type="submit" class="btn btn-primary">Connection</button>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container pt-5">
<form (ngSubmit)="login()">
<div class="mb-3">
<div class="d-inline-flex align-items-center">
<label for="exampleInputEmail1" class="form-label" style="min-width: 100px !important">User</label>
<input type="text" class="form-control" name="exampleInputEmail1" style="width: 40%" aria-describedby="emailHelp" [(ngModel)]="loginForm.user" required maxlength="4">
</div>
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<div class="d-inline-flex align-items-center">
<label for="exampleInputPassword1" class="form-label" style="min-width: 100px !important">Password</label>
<input type="password" class="form-control" name="exampleInputPassword1" style="width: 40%" [(ngModel)]="loginForm.password" required maxlength="4">
</div>
</div>
<button type="submit" class="btn btn-primary">Connection</button>
</form>
</div>
</body>
</html>
I just switched to JQuery Mobile 1.4, now when I do page transition, both header and footer lose css styling for a while before applying again.
IOS 7.04
Main index file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
<script type="text/javascript" src="js/library/phonegap/cordova_ios.js"></script>
<link rel="stylesheet" type="text/css" href="css/library/JQuery/jquery.mobile-1.4.0.css">
<link rel="stylesheet" type="text/css" href="css/application/base.css">
<script data-main="js/main.js" src="js/library/require/require.js"></script>
</head>
<body class="main_body">
</body>
</html>
some pages that transit between each other with header and footer
page1
<div id="login_template_wrapper">
<div id="leftmainmenu" class="menu-container" data-position="left" data-display="overlay">
</div>
<div data-role="header" data-position="fixed" data-id="iheader" data-tap-toggle="false" data-hide-during-focus="false">
<h1><%print(T('LOGIN'));%></h1>
<!-- <a id="menu_link" data-role="button" data-icon="gear" data-position="left"><%print(T('LEFTMAINMENU'))%></a> -->
</div><!-- /header -->
<div data-role="content" class="main-content">
<div id="login-content_wrapper" class="content_wrapper">
<div class="content_inner">
<div id="login_input">
<div data-role="label"><%print(T('USERNAME'));%></div><input bc-data-role="input" class="login-form" name="username" value="<%print(logindata['du'])%>"/>
<div data-role="label"><%print(T('PASSWORD'));%></div><input bc-data-role="input" class="login-form" type="password" name="password" value="<%print(logindata['dp'])%>"/>
<input type="submit" class="login-form" data-role="button" id="login_submit" value="<%print(T('LOGIN'));%>"/>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="rememberme" id="rememberme" <%if (logindata['rm']) {print('checked');}%> />
<label for="rememberme"><%print(T('REMEMBER_ME'))%></label>
<input type="checkbox" name="rememberpass" id="rememberpass" <%if (logindata['rp']) {print('checked');}%> />
<label for="rememberpass"><%print(T('REMEMBER_PASSWD'))%></label>
</fieldset>
</div>
</div>
</div><!-- /content inner -->
</div><!-- /content wrapper-->
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="ifooter" data-tap-toggle="false" data-hide-during-focus="false">
<div id="login_links" data-role="controlgroup" data-type="horizontal">
<a data-role="button" data-icon="edit" href="#registration"><%print(T('REGISTRATION'))%></a>
<a data-role="button" data-icon="refresh" href="#passwordretrieval"><%print(T('RETRIEVEPASSWORD'))%></a>
</div>
</div><!-- /footer -->
</div>
page2
<div id="registration_template_wrapper">
<div data-role="header" data-position="fixed" data-id="iheader" data-tap-toggle="false" data-hide-during-focus="false">
<h1><%print(T('REGISTRATION'));%></h1>
<%print(T('BACK'))%>
</div><!-- /header -->
<div data-role="content" class="main-content">
<div id="login-content_wrapper" class="content_wrapper">
<div class="content_inner">
<ul id="registration_input" data-role="listview" data-inset="true">
<li><div data-role="label"><%print(T('USERNAME1'));%></div><input bc-data-role="input" class="registration-form" id="USERNAME1" name="USERNAME1" value="" data-mini="true"/></li>
<li><div data-role="label"><%print(T('USERNAME2'));%></div><input bc-data-role="input" class="registration-form" id="USERNAME2" name="USERNAME2" value="" data-mini="true"/></li>
<li><div data-role="label"><%print(T('PASSWORD1'));%></div><input bc-data-role="input" class="registration-form" type="password" id="PASSWORD1" name="PASSWORD1" value="" data-mini="true"/></li>
<li><div data-role="label"><%print(T('PASSWORD2'));%></div><input bc-data-role="input" class="registration-form" type="password" id="PASSWORD2" name="PASSWORD2" value="" data-mini="true"/></li>
<!--
<li><div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="showpass" id="showpass"/>
<label for="showpass"><%print(T('SHOWPASS'))%></label>
</fieldset>
</div></li>
<li><button id="registration_clean"><%print(T('CLEAN'))%></button></li> -->
<li><button id="registration_save"><%print(T('REGISTRATION'))%></li></button>
</ul>
</div><!-- /content inner -->
</div><!-- /content wrapper-->
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="ifooter" data-tap-toggle="false" data-hide-during-focus="false">
<div id="login_links" data-role="controlgroup" data-type="horizontal">
<a data-role="button" data-icon="edit" href="#registration"><%print(T('REGISTRATION'))%></a>
<a data-role="button" data-icon="refresh" href="#passwordretrieval"><%print(T('RETRIEVEPASSWORD'))%></a>
</div>
</div><!-- /footer -->
</div>
I load page template through backbone view, and do the page transition use the following code
$.mobile.changePage(__this.currentView.$el, {'reverse': reverse, 'changeHash': false, 'transition': mobile_transition});
Everything worked fine in 1.4 alpha and beta, but in 1.4 release, the header and footer loses css styling for a while before applying css style again.
I had the same problem. My solution was to directly add data-theme="a" to the header.
<div data-role="header" data-position="fixed" data-id="iheader" data-tap-toggle="false" data-hide-during-focus="false" data-theme="a">
<h1><%print(T('REGISTRATION'));%></h1>
<%print(T('BACK'))%>
</div><!-- /header -->
I believe this is something to do with the new theme inheriting mechanism but i cant seem to find any useful documentation on the subject.
I tried the Max's answer but it didn't work for me.
The "fixed" header/footer are moved outside the containing "page" div during transition and moved back in after the animation. You should add additional css selectors to apply the styling on the moved header/footer.
For example if you current selector is .ui-page-theme-a .ui-bar-a .ui-btn.back-link , add another selector for your css like .ui-mobile-viewport .ui-bar-a .ui-btn.back-link. This is because the header/footer is no longer inside .ui-page-theme-a and is inside .ui-mobile-viewport during the transition.
Hope it helps!
I am currently working on a project requiring jQuery mobile for a Blackberry Smartphone webworks app. I discovered that I cannot access any content below screen height on my page.
I have tried iscrollview, but it doesn't work well after compiling it into .COD file. Any suggestions will be appreciated.
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.iscrollview-pull.css" />
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js"></script>
<div data-role="content" class="content_div">
<div class="content-secondary">
<div class="Main-holder" id="Main-holder" style="background-color:#fff; overflow-y:scroll; height:500px;">
<form id="mylogin" data-iscroll>
<div class="form-row">
<div class="reg-label">Username:</div>
<input name="username" id="username" type="text" />
<div style="clear:both"> </div>
</div>
<div class="form-row">
<div class="reg-label">Password:</div>
<input id="password" name="password" type="password" />
<div style="clear:both"> </div>
</div>
<div class="form-row">
<div align="right" class="sub-but-wrapper">
<a data-role="button" id="loginSubmit"style="width:90px;" data-theme="b">Login</a>New User?<span id="loader" style="display:none"></span>
<!--
<input data-role="button" type="button" name="loginSubmit" id="loginSubmit"style="width:90px;" data-theme="b" value="Login" /> New User?<img src="images/ajax-loader.gif" id="loader" style="display:none" />
-->
</div>
<label></label><div style="clear:both"> </div>
</div>
<div class="form-row" style="height:100px">
<div style="clear:both"> </div>
</div>
</form>
</div>
</div>
</div>
I have a PhoneGap+jQuery Mobile android index.html file.
<div data-role="page" id="dashboard"> has a <ul><li> like this.
<li>
정보 입력
</li>
when I click #enterInfo li, the page sometimes changes correctly to this page.
<!-- page enterInfo -->
<div data-role="page" data-theme="b" id="enterInfo">
<div data-role="header" data-position="inline">
cancel
<h1>정보 입력</h1>
save
</div><!-- /header -->
<div data-role="content" id="enterInfo" >
<p>
<form method="post" class="dialog" id="enterInfoForm" action="http://wafflemaker.kr/flatlens/enterInfo.php" data-ajax="true">
<fieldset>
<div data-role="fieldcontain">
<p id="juminP">
<label for="jumin">주민등록번호</label>
<input type="text" id="jumin1" name="jumin1" size="6" />-<input type="password" id="jumin2" name="jumin2" size="6" />
<label for="age">연령</label>
</p>
<select name="age">
<option value="20s" selected>20대</option>
<option value="30s">30대</option>
<option value="40s">40대</option>
<option value="50s">50대</option>
<option value="60s">60대</option>
</select>
<label for="as_dong">주소(지역구를 찾아줍니다)</label>
<input type="text" id="as_dong" name="as_dong" value=""/>
</div>
<input type="button" id="as_search" name="as_search" value="검색">
<!--
<a href="index.html" rel="external" data=role="button" data-icon="arrow-r" data-iconpos="right" data=theme="a"
onclick="searchAddress(document.getElementById('as_dong').value);">검색</a>
-->
<a class="button" type="submit" id="enterInfoFormSubmit" name="submit" href="#">전송</a>
</fieldset>
</form>
</p>
<div id="as_show"></div>
검색어 -> 부산광역시 : 부산광역시를 가지는 주소를 표시<br>
검색어 -> 거제3동 : 거제3동을 가지는 주소를 표시
</div><!-- /content -->
But after 4-5 repetition of clicking on li -> cancel, the screen changes to phone call screen, with numbers 1270-50193.
What the bug. Can you please help it out?
In your code snippet the ids are duplicated:
<div data-role="page" data-theme="b" id="enterInfo">
<div data-role="content" id="enterInfo" >
When the proper value is selected I want to open the div with id="new_firm" in a modal dialog. I can't get the dialog to open. I know that the script get's executed since the alert pops up. Can anyone please tell me what's wrong here?
<!DOCTYPE html>
<html>
<head>
<title>FileReader Example</title>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0.css" />
<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
function openNewFirmDialog() {
var selected = $("#select_firm option:selected");
var ddValue = selected.text();
if(ddValue === "Add a new company") {
//alert(ddValue);
$('#new_firm').dialog({modal:true});
}
}
</script>
</head>
<body>
<div data-role="page" id="add_details">
<div data-role="content">
<h2>Register hours</h2>
hei
<div data-role="fieldcontain">
<select id="select_firm" data-native-menu="false" onchange="openNewFirmDialog()">
<label for="select_firm" class="select">Select firm:</label>
<option data-placeholder="firm">Firm</option>
<option value="internal">Internal</option>
<option value="new_firm_option">Add a new company</option>
</select>
</div>
<input type="text" id="descritptionTxt" value="Description"/>
<div data-role="controllgroup" data-type="horizontal">
<input type="range" id="number_of_hours" min="0" max="24" step="0.25" value="0" />
<input type="range" id="number_of_minutes" min="0" max="24" step="0.25" value="0" />
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Overview</li>
<li>Add hours </li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="new_firm">
<h2>Add a new firm</h2>
<textarea id="the_new_firm" value="New firm"/>
</div>
</body>
I think you need to add reference to jQuery UI if you want to use dialogs. Available for download here: http://jqueryui.com/demos/dialog/