So my problem is that I have set my view to be width & height 100%; which works well but once some of the content within the view causes a scrollbar to appear it scrolls into whitespace. As if the view's overflow is hidden but the content is still making the page scroll.
I was unable to make a fiddle since I required multiple html files to load and render views so Ill post some code and images about the issue and hopefully someone can catch the problem. I suspect it is most likely a CSS issue with my positioning system but I have been unable to resolve it.
::HTML::
!!!this is the Index page
<!DOCTYPE html>
<html ng-app="appMain">
<head>
<title>MY APP</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
<!-- CSS imports -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- JS imports -->
<!-- Angular JS Primary Scripts -->
<script src="scripts/angular.js"></script>
<script src="scripts/angular-ui-router.js"></script>
<!-- Angular JS subScripts for controllers etc. -->
<script src="main.js" ></script>
</head>
<body>
<div class="makeBackground" ui-view></div>
</body>
</html>
!!!!this is the sign-in.html page:
<div class="loginBackground makeBackground"></div>
<div class="transparentContainer">
</div>
::JS - Module::
(function() {
var appMain = angular.module('appMain', ['ui.router']);
swiftMain.config(function($stateProvider, $urlRouterProvider) {
// if url not defined redirect to login
$urlRouterProvider.when('', "/sign-in");
// if nonexistant url defined redirect to sign-in
$urlRouterProvider.otherwise("/sign-in");
// Now set up the states
$stateProvider
.state('sign-in', {
url: "/sign-in",
templateUrl: "templates/views/sign-in.html"
});
});
}());
::CSS::
.makeBackground {
position: relative; top: 0;
width: 100%; height: 100%;
}
.geminiBlue {
background-color: #074d77;
}
/* fancy 'e' bg on login background and courselist */
.loginBackground {
background-image: url(../images/login_back.png), url(../images/geminiBlue.png);
background-position: center top, left top;
background-repeat: no-repeat, repeat;
}
.transparentContainer {
border-radius: 20px;
background-color: rgba( 255,255,255,0.4 );
width: 500px;
height: 600px;
position:absolute;
z-index:15;
top:50%;
left:50%;
margin:-300px 0 0 -250px;
}
the CSS above shows that the transparentContainer class has a fixed width and height that will create a scroll at lower resolutions; but the view allows the scroll and hides the content as can be seen below here:
How to get the view to expand with the content within it?
position: absolute; is your friend.
.makeBackground {
position: absolute;
top: 0;
width: 100%; height: 100%;
}
.geminiBlue {
background-color: #074d77;
}
/* fancy 'e' bg on login background and courselist */
.loginBackground {
background-image: url(http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png);
background-color:#00D;
background-position: center top, left top;
background-repeat: no-repeat, repeat;
}
.transparentContainer {
border-radius: 20px;
background-color: rgba( 255,255,255,0.4 );
width: 70%;
height: 70%;
position:absolute;
z-index:15;
margin: 15%; /*-300px 0 0 -250px;*/
}
<div class="makeBackgrounnd" >
<div class="loginBackground makeBackground">
<div class="transparentContainer"> </div>
</div>
</div>
Resolved:
The Issue was the css. by setting the top level containers overflow property to hidden and using margins instead of position: relative; with pixel adjusts my content now fits within the page.
Related
I have a full screen Google Maps Div, and I added an Input to be used as a searchbox. This is the code:
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
position: fixed;
}
.container, .container > div, .container > div #map {
height: inherit;
}
.mapcanvas {
display: block;
position:absolute;
height:100%;
bottom:0;
top:0;
left:0;
right:0;
margin-top:0px; /* adjust top margin to your header height */
}
</style>
<body onload="initializeMap()">
<div id="map" class="mapcanvas"></div>
<input class="form-control" placeholder="Insert the place you are looking for" type="text" id="input_location">
</div>
</body>
<script>
function initializeMap() {
map = new google.maps.Map(document.getElementById("map"),
{
tilt:0
,center:new google.maps.LatLng(41.946, 13.499)
,zoom:7
,mapTypeId: google.maps.MapTypeId.SATELLITE
,mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
}
}
);
const input = document.getElementById("input_location");
const searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);
}
</script>
When I open this page on the smartphone, the searchBox is very, very small.
How can I control the size of this? I tried with Bootstrap classes class="form-control form-control-lg" and with style="font-size:36px" but nothing happens.
Any ideas?
This is the problem with the responsiveness of your webpage. A mobile browser is rendering your website as a desktop website.
To eliminate this problem simply insert
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the <head>...</head> of your homepage.
Output
There is also a suggestion for you. If your page looks like what you have shared above then make some changes to it.
Put the <script>...</script> inside the <body>...</body>and don't forget to include <html>, <head> etc to your webpage.
The problem was not directly related to Google maps API.
It was related to a web forward that uses an iframe tag.
This causes the mobile browser to render the desktop version of the page.
please some one helps, how to scroll the content top and bottom using buttons and hidden scroll bar. below my example code.
<!DOCTYPE html>
<html>
<head>
<button onclick="scrollWin(0, 50)">Scroll down</button>
Click one of the buttons (multiple times) to scroll the document window.
<p>Look at each scrollbar to see the effect.</p>
<p>Click one of the buttons (multiple times) to scroll the document window.</p>
<p>Look at each scrollbar to see the effect.</p>
<button onclick="scrollWin(0, -50)">Scroll up</button><br><br>
<script>
function scrollWin(x, y) {
window.scrollBy(x, y);
}
</script>
</body>
</html>
<style>
button {
border: 0;
border-radius: 2px;
width: 100%;
background-color: #efefef;
}
.my-custom-scrollbar {
position: relative;
height: 200px;
overflow: auto;
}
</style>
I am working on a popup window using ngDialog. Here is some code:
<style>
.ngdialog.dialogforpopup .ngdialog-content
{
width : 1100px;
margin-top:-100px;
padding-top:10px;
}
</style>
Template
<div style="height:800px;width:1040px;padding-left:5px;padding-top:5px;
padding-right:5px"
</div>
<div class="ngdialog-buttons" style="margin-top:10px">
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="cancel()">Cancel</button>
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="save()">Save</button>
</div>
Directive
ngDialog.open({
template: 'editor.html',
controller: 'editorController',
className: 'ngdialog-theme-default dialogforpopup',
closeByDocument: false,
disableAnimation: true
});
I have two questions.
How can center my popup on the screen? Currently I am using margin-top:-100px;
Is it possible to size ngDialog automatically to its content?
Thanks
One can center ngdialog by setting "table-like" styles:
.ngdialog{
padding:0 !important;
}
.ngdialog-content {
padding: 0 !important;
background: transparent !important;
display: table; /*table-like styles for vertical centering*/
width: 100% !important;
height:100%;
}
.ngdialog-holder {
display: table-cell;
vertical-align: middle;
width: 100%;
height:100%;
}
.ngdialog-content > .ngdialog-close{
display:none; /*hide original close button*/
}
.my-dialog{
width:400px;
background:#fff;
border:1px solid #000;
margin:0 auto; /*center dialog horizontally*/
position: relative;
}
Also one need to wrap content of dialog with ".ngdialog-holder" and ".my-dialog" blocks. And finally place ".ngdialog-close" button inside of it.
<div class="ngdialog-holder">
<div class="my-dialog">
Dialog content goes here
<div class="ngdialog-close"></div>
</div>
</div>
Here is live example: ngdialog plunk
I downloaded ngDialog package using bower. so ngDilaog related CSS and JS files are in bower_components.
I added the following CSS and JS files to my html page.
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog.css">
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog-theme-default.css">
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog-theme-plain.css">
<script src="../bower_components/ng-dialog/js/ngDialog.js"></script>
In my own JS file I am opening the dialog in the following way:
ngDialog.open({ template : 'dialog' ,scope : $scope , className: 'ngdialog-theme-default', plain: false,
showClose: true,
closeByDocument: true,
closeByEscape: true,
appendTo: false});
here is the html code:
<script type="text/ng-template" id='dialog'>
<div class="ngdialog-message">
Hello!!
</div>
</script>
With the above changes I am able to show the pop up on the center of the screen.
can use of the following class for pop up.
className: 'ngdialog-theme-plain'
className: 'ngdialog-theme-default'
I hope this will help!
I've been working on pre-made web templates for almost a year now and I started off by making one of my own from scratch in PSD.
The Website can be located here:
http://gamelabs.webege.com/
My first time chopping a PSD to HTML/CSS as well. Nonetheless I got the thing to work on my laptop and I got it going until I viewed on multiple other browsers (Mac/iPad/Android) etc.
The whole thing got messed up and I have been searching for almost 3 days now still without a solution.
Have tried wrapping the website in margin: 0;, using other techniques like min/max-width, using positioning and still its aligned out, showing a bottom scroll on many browser screens but my own computer. Not going with overflow here because I can hide the scroll but the website is cut.
This is my first time going ahead with a website from scratch and I'm stuck at the ground level still.
I would also like to mention that I'm not planning to build a Responsive WD with grid.less or bootstrap, I just want the website to equally align on any browser window opened and be fluid in width.
An excerpt from my choppy CSS is as:
body {
margin: 0;
padding: 0;
background-color:#000;
}
#wrapper {
margin: 0 auto;
position:relative;
width: 100%;
}
#bottombar
{
left: 0px;
top: 750px;
position: absolute;
width: 100%;
height: 200px;
z-index:1;
background:url(images/foot.png) repeat-x;
}
#bottombarglow
{
left: 260px;
top: 733px;
position: absolute;
width: 800px;
height: 51px;
z-index:2;
background:url(images/bottombarglow.png);
}
#topbar
{
left: 0px;
top: 0px;
position: absolute;
width: 100%;
height: 82px;
z-index:3;
background:url(images/tb.png)repeat-x;
}
#blueline
{
left: 80px;
top: 648px;
position: absolute;
width: 1200px;
height: 2px;
z-index:4;
background:url(images/blueline.png);
}
#bullets
{
left: 100px;
top: 660px;
position: absolute;
width: 860px;
height: 87px;
z-index:5;
background:url(images/gallery_left.png);
}
#gallerybutton
{
left: 980px;
top: 670px;
position: absolute;
width: 257px;
height: 67px;
z-index:6;
background:url(images/gallery.png);
}
#menu
{
left: 840px;
top: 14px;
position: absolute;
width: 450px;
height: 54px;
z-index:7;
background:url(images/menu.png);
}
#footer
{
left: 156px;
top: 810px;
position: absolute;
z-index:8;
width: 400px;
height: 98px;
background:url(images/footer.png);
}
#logo
{
position: absolute;
width: 237px;
height: 156px;
z-index:9;
background:url(images/logo.png);
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Title and CSS -->
<title>Game Art Labs | Play for Fun</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bootstrap.min.css">
<!-- Fav and touch icons -->
<link rel="icon" href="http://appbuzzsolutions.com/gal/favicon.png" type="image/png">
</head>
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="topbar"></div>
<div id="menu"></div>
<div id="bullets"></div>
<div id="gallerybutton"></div>
<div class="clearfix"></div>
<div id="blueline"></div>
<div id="bottombarglow"></div>
<div id="footer"></div>
<div id="bottombar"></div>
<!-- BG SLIDER -->
<!-- set the active class on whichever image you want to show up as the default
(otherwise this will be the last image) -->
<div id="slideshow">
<img src="images/bg1.png" alt="Slideshow Image 1"/>
<img src="images/bg2.png" alt="Slideshow Image 2" />
<img src="images/bg3.png" alt="Slideshow Image 3" />
<img src="images/bg4.png" alt="Slideshow Image 4" />
<img src="images/bg5.png" alt="Slideshow Image 5" />
<img src="images/bg6.png" alt="Slideshow Image 6" class="active" />
</div>
<!-- Java Starts -->
<script src="bootstrap.min.js"></script>
<script src="jquerry.js" type="text/javascript"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 4000 );
});
</script>
<!-- Java Ends -->
</div>
</body>
</html>
This is starting to eat my nerves a bit I would confess. The mistake here must be very basic but my knowledge is too. Hope someone can help me around with us. Will reply to any query.
Advance Thanks!
PS: I was inspired from Kabam.com while designing this.
If your trying to actually define the width of the whole webpage window, you need to do something like this:
body {
width: 1600px; //You can set it to any width
padding: 0px;
background-color:#000;
}
Something simpler might be to add px after your measurements, otherwise, it won't know the unit of measurement, so it is void. Think of it like this. The world is about 250,000 long. Centimeters, or light years?
If your trying to change the margin of the page, you should do this:
body {
width: 1000px; //You can set it to any width
margin: auto; //Auto will automatically center the whole page
padding: 0px; //Don't forget px!
background-color:#000;
}
I loaded Google Maps API v3 and print Google Map in div. But when set width & height to 100% and auto I can't see the Map.
Here is HTML code snippet.
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
Is there a way to fix this issue?
You have to set all parent containers to a 100% width if you want to cover the whole page with it. You have to set an absolute value at width and height for the #content div at the very least.
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
Setting Map Container to position to relative do the trick. Here is HTML.
<body>
<!-- Map container -->
<div id="map_canvas"></div>
</body>
And Simple CSS.
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
Tested on all browsers. Here is the Screenshot.
Very few people realize the power of css positioning. To set the map to occupy 100% height of it's parent container do following:
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
If you have any non absolutely positioned elements inside #map_canvas_container they will set the height of it and the map will take the exact available space.
If you can't affect your parents elements (like in a nested components situation) you can use height: 100vh which will make it a full window (=view) height;
This Work for me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#cont{
position: relative;
width: 300px;
height: 300px;
}
#map_canvas{
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
function initialize() {
console.log("Initializing...");
var latlng = new google.maps.LatLng(LAT, LNG);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="cont">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>
You can set height to -webkit-fill-available
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
Gmap writes inline style position to relative to the div. Overwrite that with :
google.maps.event.addListener(map, 'tilesloaded', function(){
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
});
Hope it helps.
Better late than never! I made mine a class:
.map
{
position:absolute;
top:64px;
width:1100px;
height:735px;
overflow:hidden;
border:1px solid rgb(211,211,211);
border-radius:3px;
}
and then
<div id="map" class="map"></div>
If that div is the only thing on your page, set:
body, html {
height: 100%;
width: 100%;
}
I struggled a lot to find the answer.
You don't really need to do anything with body size. All you need to remove the inline style from the map code:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A&output=embed"></iframe><br /><small>View Larger Map</small>
remove all the inline style and add class or ID and then style it the way you like.
This worked for me.
map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
I just added inline style .
<div id="map_canvas" style="width:750px;height:484px;"></div>
And it worked for me .