When user goes from fullscreen to window view in chrome or any browser. The main class mdl-layout__content seems to add a vertical (up and down) scrollbar, which means there are now two scrollbars on the right side of the users screen.
From what I have read, people are saying it is the footer that causes this issue, however I don't believe that to be the case, as I can do an easy fix by changing MDL css from
.mdl-layout__container {
position: absolute;
width: 100%;
height: 100%;
}
to
.mdl-layout__container {
position: absolute;
width: 100%;
height: auto !important;
}
However this fix is horrible, and means changing the code Google supplies.
Picture of issue:
Browser is full screen
Browser is now in a window and NOT full screen
Code header.tpl
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">TEST</span></span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" />
</div>
</div>
<button id="demo-menu-lower-right"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">chat</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
</div>
</header>
<div class="mdl-layout__drawer">
<div class="mdl-navigation card">
<div class="up background-tint">
<div class="text">
<h2>Russell Harrower</h2>
</div>
<div class="add"><i id="tooltip1" class="fa fa-paw" aria-hidden="true"></i>
<div class="mdl-tooltip" for="tooltip1">Your Pet's</div>
</div>
</div>
<div class="down">
<div>
<p>Followers</p>
<p>26</p>
</div>
<div>
<p>Following</p>
<p>21579</p>
</div>
<div>
<p>Like</p>
<p>976</p>
</div>
</div>
<div class="back">
<p>Users Pets goes here.</p>
</div>
<br>
</div>
<!-- END OF ANIMATED MENU -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
Feed.tpl
{*********************************************************
Multi line comment block with credits block
@ author: Harrower.xyz
@ maintainer: [email protected]
**********************************************************}
{* The header file with the main logo and stuff *}
{include file='./tpl-files/header.tpl'}
<div class="mdl-section__centre mdl-grid mdl-cell mdl-cell--12-col">
<div class="
">
<!-- this is the status box -->
<div id="show-dialog" class="mdl-card mdl-cell mdl-cell--8-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp card-height-small">
<div class="mdl-section__centre mdl-grid mdl-cell mdl-cell--12-col">
<div class="mdl-cell mdl-cell--1-col mdl-cell--top">
<div class="card__author">
<img src="http://lorempixel.com/40/40/sports/" alt="user">
</div>
</div>
<div class="mdl-cell mdl-cell--10-col mdl-cell--top">
<div class="mdl-card__title">
<h1 id="what_are_u_up_too" class="mdl-card__title-text">What are you up to?</h1>
</div>
</div>
<div id="tt3" class="icon material-icons">add_a_photo</div>
</div>
</div>
</div>
<!-- end status box -->
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media imgcl">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="fa fa-thumbs-o-up"></i></button>
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
<div class="mdl-cell mdl-cell--1-col mdl-cell--top">
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
</div>
</div>
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Learning Web Design</h1>
</div>
<div class="mdl-card__supporting-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--12-col-tablet mdl-cell--hide-phone mdl-cell--top">
<!-- LOST PET WIDGET -->
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--12-col-phone mdl-cell--12-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media imgcl" style="background-image:url('//static.pexels.com/photos/7720/night-animal-dog-pet.jpg');">
</figure>
<div class="mdl-card__title">
<h1 class="mdl-card__title-text card-lost_header">LOST: MELBOURNE CDB</h1>
</div>
<div class="mdl-card__supporting-text">
<p><b>Name:</b> SAMMY
<br>
<b>Last Seen:</b> 2 Days Ago, Bourke Street
<br>
<b>Kid Friendly:</b> Unsure
</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect">View Pet Profile</a>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="fa fa-share"></i></button>
</div>
</div>
<!-- LOST PET -->
</div>
</div>
{include file='./tpl-files/footer.tpl'}
footer.tpl
<div id="footer" class="navbar navbar-fixed-bottom">
<nav class="navbar navbar-gray" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-inner">
<div class="navbar-inner">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-left">
<li {if {$smarty.get.t} eq 'faq'}class="active"{/if}><a href="{$SCRIPT_NAME}?t=faq">FAQ</a></li>
<li {if {$smarty.get.t} eq 'tos'}class="active"{/if}><a href="{$SCRIPT_NAME}?t=tos">Terms Of Service</a></li>
<li {if {$smarty.get.t} eq 'privacy'}class="active"{/if}><a href="{$SCRIPT_NAME}?t=privacy">Privacy</a></li>
<li {if {$smarty.get.t} eq 'contact'}class="active"{/if}><a href="{$SCRIPT_NAME}?t=contact">Contact Us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li {if {$smarty.get.t} eq 'faq'}class="active"{/if}><a href="{$SCRIPT_NAME}?t=OneSpot">- In Loving Memory Of OneSpot</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<script src="{$smarty.current_dir}/javascript/bootstrap.min.js"></script>
</body>
</html>
Solution for the above
By doing the above it solved your issue, note any small small screens may still have issues.