I'm getting black "bars" on I open modal's on android's chrome, as show on my attachments, well, this is my code, and I'm using bootstrap 4.1. Anyone can help me?.
<div class="modal fade" id="modalCombos" tabindex="-100" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Combos</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#foreach (var item in combosList)
{
<div class="row" style="margin-bottom:5px">
<div class="btn btn-danger col-12" onclick="addItem('#item.Nome', '#item.Valor.ToString("F")')">
#item.Nome - R$ #item.Valor.ToString("F")
</div>
</div>
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
Change .fade.in opacity property on bootstrap.min.css from 1 to 0.99:
.fade.in{opacity:0.99}
Also try this on bootstrap.min.css:
.fade.in{opacity:1;-webkit-backface-visibility: hidden;}
Related
I have an ionic 1 application and I am getting a weird error on log in only on android. Only the first time when the user opens the application and logs in, It is logging perfectly. When he logs out and tries to log in again I am getting this error "Auth/Network-Request Failed" and cannot login unless he closes the application and reopens. I do not get whats the issue and why the first time it is working. This is my code.
<ion-content style="background-image:url(img/LoginBack.jpg); background-size:100% 100%;" ng-controller="LoginController">
<hr style="height:100px; visibility:hidden">
<div align="center">
<img src="img/loggo.png" style="width:43%;height:13vh">
</div>
<hr style="height:20px; visibility:hidden">
<div align="center">
<div style="width:100%;padding:5px 10px 5px 10px" align="center">
<h5 class="button" style="color:white;min-height:12px;line-height:12px;background-color:#3b5998;width:100%;color:white;border-radius: 20px"
ng-click="FacebookLogin()">
<div class="row" style="padding:0px">
<div class="col col-10" style="padding:3px 0 0 0">
<i class = "ion-social-facebook larger" style="margin-right:50px"> </i>
</div>
<div class="col col-80" align="center" style="padding:0;line-height:35px">
Sign in with Facebook
</div>
<div class="col col-20">
</div>
</div>
</div>
</div>
<div class="padding" style="width:100%;" align="center" ng-show="!toggle">
<button style="min-height:35px;line-height:35px;width:100%;border-radius: 20px" class="button button-balanced small_button"
ng-click="Switch()">
Already have an account? Log in
</button>
</div>
<div style="width:100%; padding:10px 10px 0 10px" ng-show="toggle">
<div align="center" style="padding-top:10px;padding-bottom:10px">
<input ng-model="registerusername" align="center" style="padding:20px;background-color:rgba(0, 0, 0, 0.4);padding-left:20px;color:#2ab041;border-radius:5px"
placeholder="Email" type="text" required>
<br>
<input align="center" ng-model="registerpassword" style="padding:20px;background-color:rgba(0, 0, 0, 0.4);padding-left:20px;color:#2ab041;border-radius:5px"
placeholder="Password" type="password" required>
</div>
<div class="col " style="background-color: transparent">
<h6 style="margin:5px 0 10px 0;padding:0px;min-height:6vh;line-height:6vh;width:100%;border-radius: 20px" class="button button-balanced small_button"
ng-click="LogIn(user)">
Sign in
</h6>
</div>
<div class="col col-10" style="background-color: transparent">
</div>
</div>
<div align="center">
<h4 style="margin-top:-2px;padding-top:0px;font-weight:bold;color:white; font-size:15px">
or
</h4>
<div class="padding" style="width:100%;" align="center">
<button style="min-height:35px;line-height:35px;width:100%;border-radius:20px;background-color:white;color:#2ab041" class="button button-balanced small_button"
ng-click="GoToRegister()">
Register with Email
</button>
</div>
<div align="center">
<h6 style="color:white" ng-click="GoToForgetPass()">
Forgot your password?
</h6>
</div>
</div>
</ion-view>
//JS FILE
firebase.auth().signInWithEmailAndPassword($scope.registerusername, $scope.registerpassword)
.then(function (user){
//GO HOMEPAGE
})
.catch(function (error) {
alert(errorCode);
});
did you use this method on signout?
firebase.auth().signOut().then(function() {
// Sign-out successful.
}, function(error) {
// An error happened.
});
<div class="mdl-layout--large-screen-only mdl-layout__tab-bar mdl-js-
ripple-effect mdl-color--primary-dark ">
Aboutus
Technology
Outsourcing
Training
Techblog
Careers
Contactus
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-
ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--
accent" id="add">
<i class="material-icons" role="presentation">add</i>
<span class="visuallyhidden">Add</span>
</button>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">MaterialDesignLite</span>
<nav class="mdl-navigation">
Overview
Features
Details
Technology
FAQ
</nav>
</div>
Question: mdl-layout__tab-bar tabs are synced with section id(example:#Aboutus ,#Technology),
Where as mdl-drawer needs separate .html file for each content,it is not working with section id (example:#Aboutus ,#Technology),is any possible ways to achieve it,rather creating separate html file.
Thanks
<div class="mdl-layout__tab-panelmdl-layout__drawer" id="Techblog">
<section>
<div>
<div>
<div class="techblogimage">
<img class="article-image" src="images/techblog/3.png" border="0" alt="">
</div>
</div>
</div>
</section>
</div>
Finally i got a solution..
adding mdl-layout__drawer in sectionblock
This will help few of them who got stuck in this..
I'm working with ionic/angular on android. There are two buttons in a form:
<ion-modal-view>
<ion-content>
<form>
<div class="list">
...
<label class="item">
<button ng-click="prefsSave(true)" class="button button-block button-positive">Save & Check</button>
<button ng-click="prefsSave(false)" class="button button-block button-positive">Save</button>
</label>
</div>
</form>
</ion-content>
</ion-modal-view>
The function to be called on click is defined in the controller:
$scope.prefsSave = function(check) {
...
}
The function is called always with ''true'' regardless of which button was pressed. What is wrong?
It seems, that the problem was caused by the HTML label tag. If I'm using span instead label it works correctly. I do not say,that I understand, but it works. So the final HTML:
<ion-modal-view>
</ion-header-bar>
<ion-content>
<form>
<div class="list">
...
<span class="item">
<button ng-click="prefsSave(true)" class="button button-block button-positive">Save & Check</button>
<button ng-click="prefsSave(false)" class="button button-block button-positive">Save</button>
</span>
</div>
</form>
</ion-content>
</ion-modal-view>
I am using Bootstrap v3.3.2 with JQuery 2.13 and JQueryMobile 1.4.5
The bootstrap carousel works smoothly on iPAD & Windows 8 Tablets but it almost does not work on Android tablets (v4.4.2)
On Android, the swipe event does not fire easily. You have to swipe (left or right) many times and then only one time it fires. So the swipe has issues on Android. While on other two platforms its like breeze.
Here is my code piece:
HTML
<div id="Carousel" class="carousel slide" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" ></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div>DATA 1</div>
</div>
<div class="col-sm-4">
<div>DATA 2</div>
</div>
<div class="col-sm-4">
<div>DATA 3</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div>DATA 4</div>
</div>
<div class="col-sm-4">
<div>DATA 5</div>
</div>
<div class="col-sm-4">
<div>DATA 6</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div>DATA 7</div>
</div>
<div class="col-sm-4">
<div>DATA 8</div>
</div>
<div class="col-sm-4">
<div>DATA 9</div>
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#Carousel" class="left carousel-control leftArrowIcon"></a>
<a data-slide="next" href="#Carousel" class="right carousel-control rightArrowIcon"></a>
</div>
JS
$("#afterLoginPage").on("pageshow", function( event ) {
$('#Carousel').each(function(){
var $myCarousel = $(this);
$myCarousel.swipeleft(function() {
$(this).carousel('next');
console.log("Carousel - next" );
});
$myCarousel.swiperight(function() {
$(this).carousel('prev');
console.log("Carousel - prev" );
});
});
});
Also tried in this way but no benefit:
$("#afterLoginPage").on("pageshow", function( event ) {
$("#Carousel").on("swiperight", function() {
console.log("Carousel - prev" );
$(this).parent().carousel('prev');
// $(this).carousel('prev'); // did not work as well
});
$("#Carousel").on("swipeleft", function() {
console.log("Carousel - next" );
$(this).parent().carousel('next');
// $(this).carousel('next'); // did not work as well
});
});
I have noticed strange thing - when I put ScrollableView into SwapView and I programmatically (after clicking on button) change view in SwamView and next give focus (click one elment in list) to list in ScrollableView, the first view appear under this one with list in ScrollableView which is currently main view (both are visible at the same time - one superimposed on the other). I use it in PhoneGap as a Android project. And the version of Dojo which I use is 1.9.
My code is:
<div id="view1" data-dojo-type="dojox/mobile/SwapView">
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='href:"page1.html", parseOnLoad: false, onLoad:NewClientForm.loadForm'></div>
</div>
<div id="view2" data-dojo-type="dojox/mobile/SwapView">
<div data-dojo-type="dojox.mobile.ContentPane" id="cview2" data-dojo-props='href:"page2.html", parseOnLoad: true'></div>
</div>
and the page2.html
<div id="offer_page">
<div class="pageLogo">
<img src="theme/images/logo.png" alt="" />
</div>
<header>
<h1 id="offer_page_client_name_header"> </h1>
</header>
<div id="new_client_nav_menu" class="pageNavMenu">
<div>menu</div>
</div>
<div id="new_client_nav_settings" class="pageNavSettings">
<div>set</div>
</div>
<div class="pageNavPrev">
<div id="offer_page_nav_prev" class="pageImageLink" data-dojo-type="dojox/mobile/Button" data-dojo-props='onClick: OfferPageForm.prevButton'><img src="theme/images/nav_prev.png" alt="" /></div>
</div>
<div class="pageNavNext">
<div id="offer_page_nav_next" class="pageImageLink" data-dojo-type="dojox/mobile/Button" data-dojo-props="onClick: OfferPageForm.nextButton"><img src="theme/images/nav_next.png" alt=""></div>
</div>
<ul data-dojo-type="dojox/mobile/TabBar" data-dojo-props='barType:"standardTab", center:false'>
<li data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props='selected:true, moveTo:"tab1"'>Client data</li>
<li data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props='moveTo:"tab2"'>Needs analysis</li>
<li data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props='moveTo:"tab3"'>Offers</li>
<li data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props='moveTo:"tab4"'>Simulations</li>
</ul>
<div id="tab1" data-dojo-type="dojox.mobile.View" class="tabView">
Client data:
</div>
<div id="tab2" data-dojo-type="dojox.mobile.View" class="tabView">
Needs analysis
</div>
<div id="tab3" data-dojo-type="dojox.mobile.View" class="tabView">
<div class="offersLeftPanel">
<div class="offersLeftPanelTableHeader">
<div class="offersLeftPanelTableDate">Creation date</div>
<div class="offersLeftPanelTableProduct">Product</div>
<div class="offersLeftPanelTableName">Name</div>
<div class="offersLeftPanelTableRisk">Risk Profile</div>
<div class="offersLeftPanelTableStatus">Status</div>
<div class="offersLeftPanelTableSigned">Signed</div>
<div class="offersLeftPanelTableActions">Actions</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props="height: '88%'">
<ul data-dojo-type="dojox/mobile/EdgeToEdgeList">
<li data-dojo-type="dojox.mobile.ListItem" class="offersLeftPanelTableRow">
<div class="offersLeftPanelTableDate">2013-03-25 08:00</div>
<div class="offersLeftPanelTableProduct">iSave Target</div>
<div class="offersLeftPanelTableName">iSavetarget-Medium-1</div>
<div class="offersLeftPanelTableRisk">Neutral</div>
<div class="offersLeftPanelTableStatus">New</div>
<div class="offersLeftPanelTableSigned">No</div>
<div class="offersLeftPanelTableActions"></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem" class="offersLeftPanelTableRow">
<div class="offersLeftPanelTableDate">2013-03-25 08:00</div>
<div class="offersLeftPanelTableProduct">iSave Target</div>
<div class="offersLeftPanelTableName">iSavetarget-Medium-1</div>
<div class="offersLeftPanelTableRisk">Neutral</div>
<div class="offersLeftPanelTableStatus">New</div>
<div class="offersLeftPanelTableSigned">No</div>
<div class="offersLeftPanelTableActions"></div>
</li>
...
</ul>
</div>
</div>
<div class="offersRightPanel">
<div data-dojo-type="dojox/mobile/Button" class="offersOtherNeedsButton">Other uncovered needs</div>
<div class="offersBottomButtons">
<div data-dojo-type="dojox/mobile/Button" class="offersConsolidateButton">Consolidate offers and issue</div>
<div data-dojo-type="dojox/mobile/Button" class="offersIssueButton">Issue proposal</div>
</div>
</div>
</div>
<div id="tab4" data-dojo-type="dojox.mobile.View" class="tabView">
Simulations
</div>
page1.html looks very similar, but ther are no lists and ScrollableViews.
The most interesting thing is the fact that it occurs not every time and not on every devices on which I have a chance to test it (I tested it on Samsung Galaxy Tab 2? - here I have noticed this issue, Asus Transformer and one "no name").
Thanks in advance for any help.
The HTML in your page2.html seems malformed (the top-level is not closed). Besides that, the HTML you posted uses JavaScript and CSS pieces which are missing. All in one, I can't correctly run your code to see if I reproduce.
On the other side, one of the SwapView tests in dojox/mobile/tests (test_SwapView.html) includes a button which programmatically transitions to a swap view - quite close to what you describe. Do you reproduce using this sample or can you modify it to reproduce your issue?
Finally, telling the Android version of the devices where you reproduce would help too.