I want to add "back button" panel for my app but only for iphones.
I am using vs2013 Multi Device Hybrid Apps plugin to develope mobile app. After a lot errors and problems I managed to start coding phase, the thing is android devices have panel to "back" or other stuff. But I need to set it also for iphones. Project has "merges" folder, I believe that part using for it. (I dont want to add that extra button for whole project, only iphone is enough for me as you know android devices have panel to "back" or other stuff.)
If its possible; how can I do that? Here is one of my page example ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Föy</title>
<link href="css/index.css" rel="stylesheet" />
<script src="scripts/jquery-1.8.3.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/login.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#btnLogin").click(function () {
window.location = "main.html";
})
});
</script>
</head>
<body>
<div class="container" id="login-block">
<div class="row">
<div class="col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
<h3 class="animated bounceInDown">FÖY Fatura Ödeme Sistemleri</h3>
<div class="login-box clearfix animated flipInY">
<div class="login-logo">
<img src="images/logo.png" alt="Company Logo" />
</div>
<hr />
<div class="login-form">
<div class="alert alert-error hide">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Hata!</h4>
İşlem Sırasında Hata Oluştu
</div>
<div>
<input type="text" class="form-control" id="txtUser" placeholder="Bayi Kodu" required />
<input type="password" class="form-control" id="txtPassword" placeholder="Şifre" required />
<button type="button" id="btnLogin" class="btn btn-red">GİRİŞ</button>
</div>
<div class="login-links">
<a href="forgot-password.html">
Şifremi Unuttum?
</a>
<br />
<a href="sign-up.html">
Bayi Değilim? <strong>Bayi Ol!</strong>
</a>
</div>
</div>
</div>
<div class="social-login row">
<div class="fb-login col-lg-6 col-md-12 animated flipInX">
<strong>Facebook</strong> ile bağlan
</div>
<div class="twit-login col-lg-6 col-md-12 animated flipInX">
<strong>Twitter</strong> ile bağlan
</div>
</div>
</div>
</div>
</div>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
Thank You , Best Regards
Put your platform specific file within the merges\ios\ folder and it should get picked up during build. More information and guidance can be found here
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've encountered an error while running my application. I'm seeing this error on my console when I run the application
Uncaught TypeError: Cannot read property 'fn' of undefined
at util.js:68
at util.js:10
at bootstrap.min.js:6
at bootstrap.min.js:6
Here is my source code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!------ Include the above in your HEAD tag ---------->
<div class="sidenav">
<div class="login-main-text">
</div>
</div>
<div class="main">
<div class="col-md-6 col-sm-12">
<div class="login-form">
<form>
<div class="form-group">
<label>User Name</label>
<input type="text"id="userid" class="form-control" placeholder="User Name">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" id="password" class="form-control" placeholder="Password">
</div>
<input type="button" class="btn btn-black" value="Login" onclick="NullValidator()" #*window.location='Url.Action("Dashboard", "Dashboard")*# />
#*<button type="submit" class="btn btn-black">Login</button>*#
<button type="submit" class="btn btn-secondary">Register</button>
<div class="form-group">
<a style="float:left">Forget Password ? </a>
</div>
</form>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
</body>
</html>
I've tried searching for the fn here but I didn't use it in this page and also on other pages of the application. So I can't determine the cause of the error.
I've solved my problem by adding this code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
In w3.css there is no option to prepare a form in such a way so that the inputs and labels are appeared on the same line. I am trying but could not fix the problem. Please help to fix the problem.
<div class="w3-row-padding">
<div class="w3-third">
<label class="w3-label">User Name</label>
</div>
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="Name">
</div>
</div>
This is the code I actually wanted:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-row-padding">
<div class="w3-quarter">
<p> <label class="w3-label" type="text">User Name</label><p>
</div>
<div class="w3-threequarter">
<p><input class="w3-input w3-border w3-round" type="text"
placeholder="Enter your username"></p>
</div>
<div class="w3-quarter">
<p> <label class="w3-label" type="text">Passwords</label></p>
</div>
<div class="w3-threequarter">
<p><input class="w3-input w3-border w3-round" type="text"
placeholder="Enter your passwords"></p>
</div>
</div>
</body>
I need to change the panel color of the parent that is open. I was told I could use something called "panel-class" but my attempts to use if have been unsuccessful. I copied the sample code directly from the "example" that was provided but still the panel color does not change. I am trying to use this in an MVC _Layout.cshtml page. Could that be the reason?
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-sanitize.js"></script>
<script src="~/Scripts/ui-bootstrap-custom-tpls-0.13.3.js"></script>
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/app/AccordionCtrl.js"></script>
<script src="~/Scripts/app/generalsearchService.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
</div>
<div class="float-right">
<nav>
</nav>
</div>
</div>
</header>
<div>
</div>
<div ng-app="myModule" ng-controller="AccordionCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel {{panelClass || 'panel-default'}}">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
<span ng-class="{'text-muted': isDisabled}">{{heading}}</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
<p>
<button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
<button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
</p>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="oneAtATime">
Open only one at a time
</label>
</div>
<accordion close-others="oneAtATime">
<accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</accordion-group>
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</accordion-group>
<accordion-group heading="Dynamic Body Content">
<p>The body of the accordion group grows to fit the contents</p>
<button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</accordion-group>
<accordion-group heading="Custom template" template-url="group-template.html">
Hello
</accordion-group>
<accordion-group heading="Delete account" panel-class="panel-danger">
<p>Please, to delete your account, click the button below</p>
<button class="btn btn-danger">Delete</button>
</accordion-group>
<accordion-group is-open="status.open">
<accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
</accordion>
</div>
<div id="myBody" style="margin-top:50px; margin-left:320px; width:80%; position:absolute">
#RenderBody()
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
Here is what it looks like when I run it:
As you can see, the text color changes on the one example, but the panel color does not change on the "Delete" tab. Thanks in advance for any assistance. Have a great day all!
I have the answer for you, check out my github page:
https://github.com/brendancopley/customDirectives/tree/master/custom-accordion-ui-bootstrap
Here's the example DEMO https://brendancopley.github.io/customDirectives/custom-accordion-ui-bootstrap/
I made a Custom Directive of UI-Bootstrap Accordion.
To answer your question, it's really simple:
.panel.panel-open {
color: orangered
}
Or you can add an id to your uib-accordion-group and then include it in the css to have different color when opened for each heading you want.
<div uib-accordion-group id="anything" class="panel-white" is-open='menuStatus[2].isOpen'>
<uib-accordion-heading>
<i style="padding-right:10px;" class="pull-left glyphicon" ng-class="{'glyphicon-chevron-down': menuStatus[2].isOpen, 'glyphicon-chevron-up': !menuStatus[2].isOpen}"></i>Example Heading
</uib-accordion-heading>
<p>blah blah blah blah</p>
</div>
And then in your CSS add this
#anything.panel.panel-open {
color: #8f42f4; }
Per the examples here, you can see that the Delete account accordion uses the panel-class attribute to change/override the default class and the I can have markup, too! accordion shows how to use ng-class to set a class based on whether or not the accordion is open.
Either open the Plunker from this example or fork it and change the panel-class attribute from panel-danger to panel-success to see the change. Additionally, you can change the glyphicon-chevron-down and glyphicon-chevron-right classes to your own custom classes and they will get applied on open or close.
In the future, please read the documentation and examples thoroughly before asking for help. Per SO's own guidelines, show that you've attempted to solve the issue before asking for help.
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>