I am using wordpress and I have a Iframe with a leaflet map inside it. But on the left there is a lot of white space. And I want that the leaflet map will cover the full widht. So this is the code of the iframe:
<!DOCTYPE html>
<html>
<html lang="en-us">
<head>
<title>GeoVerdeling</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Show geometric distribution">
<meta name="author" content="Victor Bom">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src=
"https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<style>
#peMap {height:1000px;
width: 100%;
background: rgba(76, 175, 80, 0.0);
border:5px double #000000}
div { margin-left:auto;
margin-right:auto;}
.center { margin-left: auto; margin-right: auto; }
</style>
<script>
$(function()
{
var dlist=[
["aa en hunze",53.0104848,6.7495285,1320.00,7],
];
var maxBounds=[
[50.800,3.259], //Southwest
[53.565,7.335]]; //Northeast
var peMapOptios={'maxBounds':maxBounds, 'zoomSnap':0, 'zoomDelta': 0.5,
'wheelPxPerZoomLevel':120, 'minZoom':7.5, 'maxZoom':11};
var circleOptions={color:'red', fillColor:'#f03', fillOpacity:0.5};
var peMap=L.map('peMap',peMapOptios).setView([52.2,5.3],7.7);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png',
{attribution:'© OpenStreetMap'}).addTo(peMap);
L.control.scale().addTo(peMap);
var i;
for ( i=0;i<(dlist.length);i++ )
{ circle=L.circle([dlist[i][1],dlist[i][2]],dlist[i][3],circleOptions).addTo(peMap);
circle.bindPopup(dlist[i][0]+":"+String(dlist[i][4]));
};
});
</script>
</head>
<body>
<h3 style="text-align:center">Deelnemers per: 2022-05-27 </h3>
<div id="peMap"></div>
<br>
<p> Geregistreerde deelnemers: 3984, Bekende gemeenten: 331, Deelnemers toegekend aan gemeenten: 3161</p>
</body>
</html>
and this is how it looks like now:
So you see on the left there is a lot of space. And of course on a mobile phone it has to be rendering also correct.
So what I have to change?
Thank you
if I do it like this:
<style>
html, body
{
margin: 0px; padding: 0px
}
#peMap {height:1000px;
width: 100%;
background: rgba(76, 175, 80, 0.0);
div { margin-left:auto;
margin-right:auto;}
.center { margin-left: auto; margin-right: auto; }
</style>
<script>
still on the left a lot of white space. Even on mobile
There isn't anything wrong with the code you've written. This just has to do with the interesting world of web development, where most browsers have a default stylesheet attached to web pages.
In your case, it has to do with the <body></body> element having a default margin: 8px. You'll simply need to override this with body { margin: 0px; }.
Here's some fun reading and discussion about this.
Related
I want to use an HTML tooltip and also import some features from bootstrap. The problem is that when I add:
<link rel="stylesheet" type="text/css" href="$shared/resources/css/bootstrap-3.0.3.min.css"/>
Tooltips are not working anymore. I'm working in eXist-db and using exide, here is my HTML code:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8"/>
<title data-template="config:app-title"> ...</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta data-template="config:app-meta"/>
<link rel="shortcut icon" href="$shared/resources/images/exist_icon_16x16.ico"/>
<link rel="stylesheet" type="text/css" href="$shared/resources/css/bootstrap-3.0.3.min.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
<script type="text/javascript" src="$shared/resources/scripts/jquery/jquery-1.7.1.min.js"/>
<script type="text/javascript" src="$shared/resources/scripts/loadsource.js"/>
<script type="text/javascript" src="$shared/resources/scripts/bootstrap-3.0.3.min.js"/>
<html>
<head>
<style>
.tooltip {
position: relative;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: white;
color: black;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
width: 240px;
bottom: 110%;
left: 20%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
visibility: visible;
}
</style>
</head>
<body id="body">
<div style="width: 20%; height: 90px; float: left; margin:10px">
<h4>Original Text:</h4>
<div data-template="letter:text_orig"/>
</div>
</body>
</html>
</html>
Here is my letter.xql where I use tooltip:
declare function letter:text_orig($node as node(), $model as map())
{
let $resource := collection('/db/apps/Tobi-oshki/data')
let $xml_id := letter:text_people('/db/apps/Tobi-oshki/data')
for $rs in $resource//tei:rs
for $id in $xml_id
return
if (data($rs/#key) eq $id)
then
<html>
<div class="tooltip">{$rs}
<span class="tooltiptext">{letter:text_lem(data($rs/#key))}</span>
</div>
</html>
else
("")
};
I'd recommend not relying on the bootstrap version that ships with shared-resources (which is deprecated since exist v 5.3.0) its outdated and unmaintained.
I would suggest packaging you own preferred dependencies and css. As a last resort you can experiment with replacing the js and css files inside shared resources with later versions, to see if that fixes your problem.
css causes some red boxes that cannot be understood.
Chrome/80.0.3987.149 Linux x86_64
code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flow</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="assets/css/b.css">
<style>
/* aaaaaaaaaa */
</style>
</head>
<body>
<style>
*:not(body):not(p) {
color: red;
font: 18px serif;
height: 100px;
width: 100px;
overflow: auto;
display: block;
border: 1px red solid;
}
</style>
</body>
</html>
demo:
https://stackblitz.com/edit/js-z6wf15?file=index.html
Is this a bug?
"special" doesn't have any defined meaning in HTML or CSS terms.
*:not(body):not(p) will select all elements that aren't the body or a p including html, head meta, etc.
I am looking to move the js function startTime() to the top center of my page. Would I do this in html or css? Here is my html code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="main.css">
<script src="app.js"></script>
</head>
<body onload = "startTime(),toDate()" > <!--getName()-->
<h1>Noteify</h1>
<a> </a>
<p id="date"></p>
<div id="txt"></div>
</body>
</html>
You'll need CSS.
If you're writing your date into a div with id="date", then:
#date{
margin: 0px auto;
text-align: center;
}
should do.
This is assuming you have no other elements above the div.
But if there are other elements coming before it, then you will have to add a position attribute and specify a distance from the top.
#date{
margin: 0px auto;
text-align: center;
position: fixed;
top: 0;
}
I currently have an issue with my page, where the contents of the page are not filling 100% of the screen. (Laravel 4.2)
See Image
My code is as follows
master.blade.php
HTML/Javscript code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Timetable</title>
<link rel="icon" href="/images/calander.ico">
<script src="/scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/scripts/main.js" type="text/javascript"></script>
<script src="/scripts/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/styles/default.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container script" style="display:none">
#include('layouts.banner')
#include('layouts.navigation')
<div class="content">
dasda
#include('layouts.messages')
#yield('content')
</div>
</div>
</body>
#yield('modal')
#yield('javascript')
<script type="text/javascript" id="cookiebanner" src="http://cookiebanner.eu/js/cookiebanner.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.script').attr('style', 'block');
});
</script>
</html>
CSS Code:
html {
overflow-x:hidden;
height:100%;
}
.navigation {
width:150px;
}
.container {
width:100%;
height:100%;
}
.content {
background-color:#000000;
top:-100px;
width:100%;
height:100%;
}
body {
background: #F0EDED;
}
I cannot figure out what the issue is. If anybody has any suggestions that would be appreciated
Try deleting default margins and paddings by adding this to css:
*{
maring:0;
padding:0;
}
And also for calculating width use vw units:
width:100vw;
Try to change the css for body tag in this way:
body {
margin: 0;
padding: 0;
background: #F0EDED;
height: 100%;
}
you cant use
html {
overflow-x:hidden;
height:100%;
}
use:
astrick (*) insted of html
html {
height: 100%;
}
body {
min-height: 100%;
}
<!doctype html>
<html>
<head>
<title>Game</title>
<style media="screen" type="text/css">
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#canvas {
position: absolute;
}
</style>
<!-- <meta charset="utf-8" content="width=device-width, initial-scale=1.0"> -->
<!-- <meta charset="utf-8"> -->
<!-- <meta charset="utf-8" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> -->
</head>
<body>
<canvas id="canvas">
Your browser needs to support canvas to play this game!
</canvas>
<!-- Include libraries -->
<script type="text/javascript" src="js/pentagine/build/pentagine.js"></script>
<script type="text/javascript" src="js/cp.min.js"></script>
<!-- Include game classes -->
<script type="text/javascript" src="js/MenuState.js"></script>
<script type="text/javascript" src="js/Block.js"></script>
<script type="text/javascript" src="js/Constants.js"></script>
<script type="text/javascript" src="js/Utils.js"></script>
<script type="text/javascript" src="js/ScoreState.js"></script>
<script type="text/javascript" src="js/PlayState.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
The relevant lines are the CSS and these ones:
<!-- <meta charset="utf-8" content="width=device-width, initial-scale=1.0"> -->
<!-- <meta charset="utf-8"> -->
<!-- <meta charset="utf-8" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> -->
I want to make my Canvas occupy as much screen as there is to occupy. I want my canvas to be full screen and this used to be working fine both on Firefox, Chromium and Firefox OS, but now it doesn't seem to be working on any. I need help with figuring out the CSS and content="" tags to make the canvas (and therefore canvas's context.width and context.height occupy as much space as there is.
Fiddle: http://jsfiddle.net/AwLwF/
CSS:
body {
position:relative;
}
canvas {
position:absolute;
left:0;
top:0;
}
JS:
$("canvas").width($(document).width());
$("canvas").height($(document).height());
var ctx = document.getElementById("canvas-element").getContext("2d");
function draw() {
//draw here
ctx.fillStyle="blue";
ctx.fillRect(0,0,200,100);
requestAnimationFrame(draw);
}
draw();
BUT there is little problem. Aspect Ratio. Strange resolutions will destroy scale of drawn elements.
That should make the canvas full screen in CSS (not tested, but works for divs so you should be fine with canvas too):
canvas {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: auto;
height: auto;
}
In javascript you could read the window/document width/height and add it to the canvas to calculate with it. Like this in jQuery:
$(document).height();
$(document).width();
And like this without jQuery:
document.width;
document.height;
I really hope that'll be a help for you.