I'm trying to create a menu that collapses into a button when the page is viewed on a phone. I'm using bootstrap, but for this navigation, I wanted to design the nav differently, so I made my own.
The button does not become visible when the media changes to phone, but the navigation does disappear. How do I make the button appear when the media size changes?
I've tried many things, and this is what I have right now:
HTML:
<div class="pattern col-lg-12 col-md-12 col-sm-6">
<div class="banner col-lg-3 col-md-3 col-sm-2">
<img src="img/logo4.png">
</div>
<!-- menu -->
<div class="navbar-header">
<button class="mnav-toggle" type="button" id="mnav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="mnav col-lg-9 col-med-9 col-sm-4" id="navbar-main">
<ul class="mnav-list" id="mnav-list">
<li class="mnav-item">Contact</li>
<li class="mnav-item">About</li>
<li class="mnav-item">Artists</li>
<li class="mnav-item">Studios</li>
<li class="mnav-item">Gear</li>
</ul>
</div>
</div>
CSS:
#media (max-width: 767px)
{
.mnav-list {display: none;}
}
#mnav-toggle
{
display: none;
}
from what I can see you need to first add the "display:block" into your query as stated in comment above and secondly the media query should be placed UNDER your baseline css rules like this:
Working Example
#mnav-toggle
{
width:20px; height:50px;
background:red;
display: none;
}
#media all and (max-width: 767px)
{
.mnav-list {display: none;}
#mnav-toggle{ display: block;}
}
This is because css rules that are written later gets precedence over the rules written earlier for the same element.
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.
When user is clicking on input field to put email or password my footer is coming up on the fields .
<div class=" bar bar-footer myfooter ">
<p class="login-p">Don't have an account?
<b class="forgot-details-link">
<a ng-href="#/signup" ng-click="reload('signup')">Sign Up</a>
</b>
</p>
</div>
Css
.myfooter{
background-color: transparent;
display: block;
position: fixed;
background: rgba(250, 250, 250, 0.07);
border-top: solid 1px rgba(250,250,250,0.30)
}
What I want to know is because it occupies the directives ionic delivery for you, for example in the documentation is clearly the footer in question.
<ion-content class="has-footer">
Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
If you take this structure, combined with its css, you should not have display problems. Also I suggest that modifications of these classes and added to the framework, only modify colors, text sizes, fonts, etc, since they are ready to run correctly. This is only if you occupy these directives.
just add scroll="false" to your <ion-content scroll="false">
and also please check in controller to add this :
cordova.plugins.Keyboard.disableScroll(true);
I want to layout one page like this: screenshot1, screenshot2.
The page includes three sections -- header (orange section), content (pink section), footer (blue section) --
The header and footer will be fixed on the screen. The content will scroll when needed.At the same time, when you focus any of the three inputs (located in the different sections), the keyboard can't cover the input, neither do the other section.
I have tried some methods, but I can't find a perfect method compatible with all the mobile browsers.
In china there is a quirk browser called UC, in version 9.0 UC when the keyboard displays, there is a blank area at the end of page. This blank area won't disapper until you touch the screen and scroll the page, like this the blank area in the end of page.
I inspected this area thrown winer, the blank area isn`t a part of the HTML, have been confused by this problem .
I need your help!
Any suggestions?
I have tried this layout:
html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
{{wing.view('pages/demo/css')}}
</head>
<body>
<div id="doc">
<div class="header">this is header
<div>input some chinese chars:<input type="text"/></div>
</div>
<div class="content">this is content
<div>input some chinese chars:
数学库 - 开源中国社区
Math.js 是个JavaScript 和写真—Tag—电影网—www.M... 电影网
<input type="text"/></div>
</div>
<div class="footer">this is footer
<div>input some chinese chars:<input type="text"/></div>
</div>
</div>
</body>
</html>
css(less):
#import url(../lang/base.less);
html, body, #wing-page-content, #doc {
height: 100%;
}
#doc {
.display();
.flex-direction(column);
}
.content {
.flex();
background-color: #f99690;
}
.header {
height: 44px;
background-color: #e76000;
}
.footer {
height: 44px;
background-color: #0073FD;
}
.content {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
base.less--->https://github.com/codio/Flex.less/blob/master/flex.less
<html>
<body style="height:100%; width:100%">
<div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;">
</div>
</body>
</html>
I am trying to create a mobile-only site using ASP.NET MVC and Bootstrap. I've created a form, part of which appears below.
<form action="/Client/InitializeProgram" class="form-horizontal" method="post" role="form">
<div class="wizard-step">
<h4>General Information</h4>
<div class="form-group">
<label class="col-md-2 control-label" for="DateOfBirth">Date of Birth</label>
<div class="col-md-10">
<input Placeholder="MM/DD/YYYY" class="form-control" data-val="true" data-val-date="The field Date of Birth must be a date." data-val-required="Date of birth is required" id="DateOfBirth" name="DateOfBirth" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="DateOfBirth" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="Gender">Gender</label>
<div class="col-md-10">
<div class="radio">
<input checked="" id="Gender_0" name="Gender" type="radio" value="0"></input>
<label for="Gender_0">Male</label>
</div>
<div class="radio">
<input id="Gender_1" name="Gender" type="radio" value="1"></input>
<label for="Gender_1">Female</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Height</label>
<div class="col-md-10">
<input Placeholder="Feet" class="form-control" data-val="true" data-val-number="The field HeightFeet must be a number." data-val-required="The height feet is required" id="HeightFeet" name="HeightFeet" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="HeightFeet" data-valmsg-replace="true"></span>
<input Placeholder="Inches" class="form-control" data-val="true" data-val-number="The field HeightInches must be a number." data-val-required="The height inches is required" id="HeightInches" name="HeightInches" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="HeightInches" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</form>
I'm using my Android phone for testing and have noticed something strange. When the page with my form is fist loaded, everything fits within my phone's display, exactly as expected.
But when I click in one of the text boxes, it appears to zoom in slightly, making my page content a little wider than my phone. So a small portion of the page is not visible unless I scroll horizontally.
If I rotate my phone into landscape orientation, the display is wider. However, it appears that phone zooms again so that the page is again a little too wide for the display (by about the same percent).
I can't tell what's going on and am having trouble finding anything on this. Has anyone here seen this? Can anyone explain what's happening? My preference is to format my page so that it fits within my device's display.
EDIT
If it makes any difference, I have the following in <head> section of my page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Also, I have the following CSS on this page. It was provided by someone else who was helping me to get my tables to fit within the phone screen.
body {
padding-top: 50px;
padding-bottom: 20px;
}
/*
Re-enable word wrapping in table cells.
Can we simplify with .table-responsive > .table th, .table-responsive > .table td ?
*/
#media screen and (max-width: 767px) {
.table-responsive>.table>thead>tr>th,
.table-responsive>.table>tbody>tr>th,
.table-responsive>.table>tfoot>tr>th,
.table-responsive>.table>thead>tr>td,
.table-responsive>.table>tbody>tr>td,
.table-responsive>.table>tfoot>tr>td {
white-space: normal;
}
}
It happens on Iphones too, not sure if it is the same cause on Android but setting the font-size to 16px on every control seems to stop the auto zooming effect on Iphone.
Here is the css to set font-size on every control:
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
font-size: 16px !important;
}
So, i'm scratching my head here in frustration at the android browser! Android version 2.3.6.
What is wrong with this thing? The next and before(perhaps previous) buttons
do not work! ...on some basic jquery form fields.
Having:
<div data-role="page">
<div data-role="header">
<img src="img/logo.png" style="margin-top:15px;">
</div>
<div data-role="content">
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
</form>
</div>
</div>
But... if I remove data-role="header" the damn thing start working??!!
No problem of course on the Safari browser! Which is superb as usual.
Please can somebody help me?
My understanding is that if you want to add a back button you need to add a data-add-back-btn="true" to your page div. I don't see that in your example. OTOH, the hardware back button should work as well.
What is it that doesn't work?
So, after many hours... i noticed stuff in my css was breaking this functionality...
/*article, aside, details, figcaption, figure, footer, header, hgroup, nav,
section { display: block; } audio, canvas, video { display: inline-block;
*display: inline; *zoom: 1; } audio:not([controls]) { display: none; }
[hidden] { display: none; } html { font-size: 100%; overflow-y: scroll;
-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }*/
Removed above and it worked.
Not sure, might be the boilerplate used.