i have design an html5 android app using bootstrap 3.3 and i have display 12 col in portrait mode
col-xs-12
<div class="col-xs-12 col-xs-6">
<div class="panel panel-card">
<div class="item">
<div class="bottom text-white p">
Title
</div>
</div>
<div class="p">
<h3>Paracosm</h3>
<p>
The titles of Washed Out's breakthrough song and the first single from Paracosm share the
two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
</p>
</div>
</div>
</div>
i want to display 6 col in landscape mode how to do this..
col-xs-6
Related
working on Cordova android application with framework 7, I create bottom bar as a music player, and top of the bottom bar add song progress bar.
To add progress bar div on the top position I use CSS property -position: absolute. its display fine at my device and many other devices I tested but some Android devices face some issue like song progress bar displayed middle of the bottom bar.
<div class="views pageview">
<div class="view view-main">
<div class="toolbar toolbar-bottom hidden-toolbar" id="buttomBar" style="opacity: 0;height: 80px;">
<div class="toolbar-inner">
<div class="myProgress2" id="myProgress2" style="background-color: grey; width:100%;position: absolute!important;">
<div id="myBar2" class="myBar2" style="width: 3%;height: 10px;background-color:#00bcd4;"></div>
</div>
<div class="list-block" id="songname" onclick="showToolbar();">
<a href="#" class=" size-30 item-link smart-select">
<select name="fruits" id="tracklistappend" onchange="getAudioUrl(this)">
</select>
<div class="item-content">
<img src="img/pula.jpg" width="70px" height="50px" id="trackimage">
<div class="item-inner">
<div class="item-title" id="trackNameNclipName"></div>
</div>
</div>
</a>
</div>
<span style="margin-left: 2px;" id="duration"></span>
<a onclick="playButton()" class="link size-50 left" id="play"><i class="fa fa-play-circle" aria-hidden="true"></i></a>
<a onclick="puseButton()" class="link size-50 left" id="pause"><i class="fa fa-pause-circle" aria-hidden="true"></i></a>
</div>
</div>
<div class="pages">
<div data-page="index" class="page no-navbar no-toolbar navbar-hidden toolbar-hidden hide-toolbar-on-scroll">
<div class="page-content landingpage">
<div class="content-block" style="height:60px;"></div>
<div class="logo main col12"> <img src="img/bplogo.png" alt=""> </div>
</div>
</div>
</div>
</div>
</div>
other android devices like Samsung j2 progress bar displayed like above
on my device progress bar displayed at the top
You need to set up a consistent code for each major change in webview.
Explore the user fragmentation per webview version in order to decide which support you're in need to give.
If you're on first version, try to refer to webview-supported html5 and CSS.
I'm using bootstrap to make a responsive webapp.
I started doing some tests with a navbar and a form in my website, the problem is the navbar in android because is being rendered with full width (like a desktop view) and chrome (for android) shows a zoom and this is not the idea behind the responsive UI.
I also tried on my windows phone and it's rendering correctly, this happends with black berry mission tool for web develop wich emulates a tablet or mobile view.
So the problem now is android...
My code for the navbar is this:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'vetpet.views.index.showIndex' %}">Vetpet Alpha</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Veterinarias <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><span class="fa fa-plus" style="color:green"></span>Agregar Veterinaria</li>
<li><span class="fa fa-list " ></span>Listar</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Do you use the bootstrap basic template?
http://getbootstrap.com/getting-started/#template
If not, make sure you use the correct viewport settings. Have a look at this page:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Also keep in mind that css calculations are not available in androids default browser before 4.4. But you can use a workaround for this (box-sizing, positive padding, negative margin).
And in case you didn't know, you can use chrome to simulate webkit mobile devices. This also includes touch screen simulation, sensors and so on although it is not a perfect simulation:
https://developers.google.com/web/fundamentals/tools/test/emulator
I'm designing a page containing footer which contains long text box depending on the mobile device and a button adjacent to it, which will remain fix without considering the mobile device.
Following is the code:
<div data-role="footer" data-position="fixed"
data-theme="e" style="position: fixed;" class="ui-grid-a">
<div class="ui-block-a">
<input type="text" id="addComment" name="addComment" data-inline="true"></div>
<div class="ui-block-b">
</div>
</div>
Can we manipulate the ui-block-a width, to capture 80% of the width and remaining 20% only for the button??
Or is there some other possibility?
I want to make the appearance of the footer resembling as it is instagram while viewing comments or adding comments.
Use this
<div class="ui-block-a" style="width:80% !important">
jsFiddle
I have a phonegap windows phone 8 app with jquery mobile for styling. I am using the fixed footer for navigation. The footer however floats a few pixels above from the bottom of the phone.
Ive completed the android/Ios version of the application. Im using Adobe Phonegap build to build my application. Android/IOS version is working perfectly. But now im trying to test the Windows Phone 8 version of the app and also i've tested in phone browsers as well its working perfectly in windows 8 phone,ios and android. but i build windows phone app (app.xap) and installed in windows phone and footer is not positioned as expected there is gap above from the bottom.
Please help me out. Any kinda help would be deeply appreciated. Thanks =)
<div data-role="page" data-theme="a" id="page_Login">
<div data-role="header" data-theme="a" class="okn_applicationTitleLogo">
<img src="Content/mobile/themes/default/images/logo.png" />
</div>
<div data-role="content" data-theme="a" id="loginpage" >
<div class="okn_contentContainer">
Login
<div data-role="fieldcontain" class="ui-hide-label">
<label for="txtLogin">Username</label>
<input type="email" name="txtLogin" id="txtLogin" data-bind="value: Username" placeholder="Username" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="txtPassword">Password</label>
<input type="password" name="txtPassword" id="txtPassword" data-bind="value: Password" placeholder="Password" />
</div>
<div data-role="fieldcontain">
<label>
<input type="checkbox" name="chkRememberLogin" data-bind="checked: RememberMe " />
Remember me</label>
</div>
</div>
<div data-role="footer" data-id="footer_Main" id="firstFooter" data-theme="a" >
<h4>© <span class="footer_copyrightYear">2000</span> <span class="footer_version"></span></h4>
</div>
</div>
</div>
change footer div like this:
<div data-role="footer" data-position="fixed" style="position: absolute">
Or you can add position absolute directly in your jquery mobile CSS if you prefer.
I'm trying to do a slide transition but all I see is a fade. Slide works on a Chrome browser but it does not work when loaded onto the phone.
<body onload="onLoad()">
<div data-role="page" id="index">
<div class="fixed-top-bar" data-role="header">Title1</div>
<div class="body-container" data-role="content">
<div class="container">
<ul>
<li>page</li>
<li>World</li>
<li>This</li>
<li>Is A</li>
<li>List</li>
</ul>
</div>
</div>
<div data-role="footer"></div>
</div>
<div data-role="page" id="second">
<div class="fixed-top-bar" data-role="header">Title2</div>
<div class="body-container" data-role="content">
<div class="container">
<ul>
<li>page</li>
<li>World</li>
<li>This</li>
<li>Is A</li>
</ul>
</div>
</div>
<div data-role="footer"></div>
</div>
</body>
There is the body of my html. currently do not have any custom js. Anyone know why I'm not seeing a slide transition?
Edit: I am having this problem on an Android 2.3.6 device. Motorola Atrix 4G to be exact.
Edit: I tried playing around with other transitions other than slide. None of them seem to work. It only gives me a fade.
Edit: I tested my code on iOS and it seems to work just fine. Not sure why it isn't working on Android.
I missed out one very important piece of information on the JQuery Mobile website.
To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).
That pretty much answers the question...