From getmdl.io/components/index.html#layout-section
I opened link to
https://codepen.io/anon/pen/MEoBqG
When I saved html code and opened it in few browsers locally. I see that menu button is mispositioned.
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
</body>
</html>
How I can fix the misposition of menu icon? Why it looks good on codepen but not locally?
screenshot with mispositioned icon
The only difference between Codepen code and your code is the the missing <!DOCTYPE html>. At first, you might wonder, so what? sure the browser can handle it, right?. The truth is that, omitting <!DOCTYPE html> forces your browser to render your page in Quirks Mode.
So, what can go wrong in quirks mode? A lot of things can go wrong in quirks mode. I suspect that flexbox does not work as intended in your case (I will look into it and come back later).
Some useful info:
MDN: Quirks Mode and Standards Mode
MDN: Mozilla Quirks Mode Behavior
How to tell if a browser is in “quirks” mode?
Why does my div height 100% work only when DOCTYPE is removed?
Related
What HTML5 tags best suited to build this mobile web app which needs to runs inside webViews of various smartphone platforms "iOS, Android, Window, ..." ?
The title in the middle of the header will change, The label and number of buttons on the footer will change, the content in the middle will have many data input controls (textfields, radio groups,...) so needs to scroll vertically but with the header and footer fixed. The side navigator shows up at initial start and can slide out with a swipe gesture or by hitting the top left☰ menu button.
Thank you
Is something like this best suited?
<body>
<section id="firstpage" data-role="page">
<div data-role="header">
<h1>Activity</h1>
</div>
<div class="ui-content">
<p>This is the content on page 1</p>
<!-- put some kind of a table with cells here -->
</div>
<div data-role="footer">
<!-- Buttons go here -->
</div>
</section>
</body>
Yes that is a good representation of it:
<body>
<section id="firstpage" data-role="page">
<div data-role="header">
<h1>Activity</h1>
</div>
<div class="ui-content">
<p>This is the content on page 1</p>
<!-- put some kind of a table with cells here -->
</div>
<div data-role="footer">
<!-- Buttons go here -->
</div>
</section>
<section id="secondpage" data-role="page">
<div data-role="header">
<h1>label2</h1>
</div>
<div class="ui-content">
<p>This is the content on page 1</p>
<!-- put some kind of a table with cells here -->
</div>
<div data-role="footer">
<!-- Buttons go here -->
</div>
</section>
</body>
As far as I can tell this isn't a duplicate question because it's a bit different than the other questions on this topic.
I'm using Google's Material Design Lite and the footer will not stay at the bottom of the page properly.
I've seen the different fixes using this trick
<div class="content">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
and I've tried using this method
#footer {
bottom: 0;
width: 100%;
position: absolute; (or fixed)
}
The first option doesn't work because Material Design Lite actually uses the footer tag. And to be honest I don't really want to do that anyway because it seems kind of sloppy to me.
The CSS method for the footer almost works but there are a few problems. When using position: absolute; it doesn't always keep the footer on the bottom of the page and it will sometimes cover content. When I try fixed the footer is always kept at the bottom of the page but when there is enough content for the page to scroll it stays at the bottom of the screen and covers content. Both fixed and absolute will keep the footer at the bottom of the screen not the page, which means that when there is enough content to scroll the footer covers content at the edge of the screen.
The behavior for fixed can be reproduced 100% of the time, but for absolute I haven't figured out what causes it to work sometimes and not others.
This is the code I have for the footer
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<button class="mdl-mini-footer--social-btn social-btn social-btn__twitter">
<span class="visuallyhidden">Twitter</span>
</button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__blogger">
<span class="visuallyhidden">Facebook</span>
</button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__gplus">
<span class="visuallyhidden">Google Plus</span>
</button>
</div>
<div class="mdl-mini-footer--right-section">
<button class="mdl-mini-footer--social-btn social-btn__share">
<i class="material-icons" role="presentation">share</i>
<span class="visuallyhidden">share</span>
</button>
</div>
</footer>`
Has anyone else had this issue or have any ideas on a solution?
Edit to add more information:
The issue isn't with the height of the body or html they are both at 100%.
Full Layout Code
<body>
<div class="site mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<!-- Header Content Here -->
</div>
</header>
<div class="mdl-layout__drawer">
<!-- Drawer Content -->
</div>
<main class="mdl-layout__content">
<!-- View Content Here -->
</main>
<footer class="mdl-mini-footer">
<!-- Footer Content -->
</footer>
<div class="mdl-layout__obfuscator"></div>
</div>
</body>
I managed to do that by:
1. Without waterfall header
Moving the footer element outside the main element
Set the style of the .mdl-layout__content element to"flex: 1 0 auto"
Example:
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
...
</header>
<main class="mdl-layout__content" style="flex: 1 0 auto;">
...
</main>
<footer class="mdl-mega-footer">
...
</footer>
</div>
</body>
2. With waterfall header
Just by moving the footer element outside the main element
Example:
<body>
<div class="site mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<!-- Header Content Here -->
</div>
</header>
<div class="mdl-layout__drawer">
<!-- Drawer Content -->
</div>
<main class="mdl-layout__content">
<!-- Main Content -->
</main>
<footer class="mdl-mini-footer">
<!-- Footer Content -->
</footer>
</div>
</body>
Tests:
Short content: http://codepen.io/kabudahab/pen/vGdVQM
Long content: http://codepen.io/kabudahab/pen/JXpmpv
I was having the same problem, where a mdl-mini-footer was overlapping with my mdl-layout__content.
My solution was to keep the tags separate, i.e.
<main class="mdl-layout__content">
...
</main>
<footer class="mdl-mini-footer">
...
</footer>
and modify the classes as follows (taking inspiration from #K.A.D's first solution above)
.mdl-layout__content {
flex: 1 0 auto;
}
.mdl-mini-footer {
flex: 0 0 auto;
}
The modification of the footer class was necessary to stop the footer growing into spaces I didn't want it to (the first 0 in 0 0 auto).
Try This
<main class="mdl-layout__content">
<div class="page-content">
</div>
<div class="mdl-layout-spacer"></div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer__link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
</main>
Just Add:
<div class="mdl-layout-spacer"></div>
After:
<div class="page-content"></div>
I faced the same issue as you. After browsing through many tutorials and 2 questions like this, I had a peek at one of the templates provided by MDL and noticed that the footer is included within the main section. I find it higly counter-intuitive but the footer element should be specified just before the closing tag, NOT after it.
See the screenshot of the markup which is now working fine. I'm working on the website of TEDx GEC.Visit the tedx GEC website to see the footer in action.(changes will be uploaded by 20-07-2016, anyone visiting before that will notice that the footer overlaps the content. Here's the screenshot:Notice the closing main tag is after the footer.
Is there any easy solutions to get parallax effect up and running really easy?
I just want a simple and neat effect on my header. This is my page: www.arcanova.no/bolig
I want the header text "Bolig" to scroll faster than the picture behind it.
Here is my html code:
<section class="band banner">
<div class="container">
<div class="row">
<div class="columns sixteen">
<div class="duk"><p></p> </div>
<div class="overskrift_firma">
<h2>Bolig</h2>
</div>
</div> <!--/columns sixteen banner-->
</div><!--/ row-->
</div> <!-- / container-->
</section> <!-- / band -->
The picture is the background of the band banner section class.
See this fiddle
$(window).scroll(function(){
$('#back').css({'top':''+(-($(this).scrollTop()*0.05))+'px'});
});
Hope from above you will get an idea of how parallax works
I'm organizing my webpage for best semantic and accessibility practice. I have the desktop navigation and the mobile navigation. Is it semantically okay to have two navigation tags with its role?
This is my structure:
<!DOCTYPE html>
<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
<head>
</head>
<body class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<section class="social-top">
<a title="Twitter" data-original-title="" href="#6"></a>
<a title="Twitter" data-original-title="" href="#6"></a>
<a title="Twitter" data-original-title="" href="#6"></a>
</section>
<header class="header" role="banner">
<!-- Header block -->
<nav class="mainnav" role="navigation">
<!-- Main navigation block for Desktop view -->
</nav>
<nav class="mainnav-mob" role="navigation">
<!-- MOBILE Navigation content block -->
</nav>
</header>
<div id="page-body">
<main role="main">
<!-- site content -->
</main>
</div>
<footer role="contentinfo">
<!-- Footer block -->
</footer>
</body>
</html>
It is semantically OK to use the navigation role twice. However to differentiate between the element perhaps use aria-labelledby as well. See Using ARIA Landmarks to identify regions of a page.
If the navigation is the same consider using a plugin such as Responsive Nav so the information is not unnecessarily repeated.
I have a header and footer plus a listview in the main html5 body but the issue that I am having is that when the listView is large, it scrolls the whole page including the header.
what I am trying to achieve is to just make the listview scrollable and nothing else so that the header and footer is always visible.
Is this possible in html5/jquery?
edit:
Here is what I have tried.
<link href="src/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="src/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<body>
<div data-role="page" id="page">
<div data-role="header" data-position="fixed">
Back
<h1>Claim Items</h1>
</div>
<div data-role="content">
<h3 style="margin-left:1em">The Demo Title</h3>
<ul data-role="listview" id="itemList" data-inset="true" data-scroll="true">
<li>1: demo</li>
<li>2: demo</li>
<li>3: demo</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" class="ui-bar">
<div data-role="navbar">
<ul>
<li>Add an Item</li>
<li> Remove an Item</li>
<li>Add comment</li>
</ul>
</div>
</div>
</div>
</body>
I think that you are asking for a fixed toolbar:
In browsers that support CSS position: fixed (most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don't support fixed positioning, the toolbars will remain positioned in flow, at the top or bottom of the page.
To enable this behavior on a header or footer, add the data-position="fixed" attribute to a jQuery Mobile header or footer element.
Fixed header markup example:
<div data-role="header" data-position="fixed">
<h1>Fixed Header!</h1>
</div>
Fixed footer markup example:
<div data-role="footer" data-position="fixed">
<h1>Fixed Footer!</h1>
</div>
Working demo here.
<div data-role="header" data-position="fixed" data-id="header1" data-tap-toggle="false" style="border-bottom:4px solid #f57122;">
<h1>Header</h1>
</div>
In my experience you need also to set data-tap-toggle to false, because you dont want the header to disappear if they click anywhere on the page. Also you need this data-id, if you have multiple pages you need the header on each page to have the same data-id so the jquery mobile will not replace current header of the active page.
EDIT:
If you experience blinking during page transitions on the actual device you have to add this to your index html also
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />