I wrapped the iframe with the below <div> classes, but no matter where I put the CSS, it doesn't pick up the CSS,it just isn't working
HTML:
<div class="auto-resizable-iframe">
<div>
<iframe frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/{$id}"></iframe>
</div>
</div>
And here is the CSS, I tried putting it in global.css, and every other css area, but nothing....
.auto-resizable-iframe {
max-width: 820px;
margin: 0px auto;
}
.auto-resizable-iframe > div {
position: relative;
padding-bottom: 75%;
height: 0px;
}
.auto-resizable-iframe iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
There is a horizontal white bar, approximately 15px in height, across the top of every one of my pages when viewing my website's mobile version. Here is the relevant CSS code and HTML markup:
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div id="container">
<div id="navigation" class="navigationtext">
<h2>domain<br> the home page of First Last</h2>
<p>About</p>
<p>Blog</p>
<p>Contact</p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
</body>
</html>
I have tried many combinations of CSS properties (primarily "margin" and "padding") and have spent a lot of time searching the Web. Nothing seems to work.
Please let me know if you need anything. I will be checking this thread regularly tonight.
Just assign h2 margin:0. and in body margin:0 and padding:0.
Because by default h2 tag have margin inspect h2 tag.
.navigationtext h2 {
margin: 0px;
}
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
padding: 0; /*Added*/
margin: 0; /*Added*/
}
.navigationtext h2 {
margin: 0px; /*Added css for h2 tag*/
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<div id="container">
<div id="navigation" class="navigationtext">
<h2>domain<br> the home page of First Last</h2>
<p>About</p>
<p>Blog</p>
<p>Contact</p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
It's caused by default margins on the body and h2 elements.
All you need is margin-top: 0; on these two elements.
body {
margin-top: 0; /* Remove top margin from body */
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
}
.navigationtext h2 {
margin: 0px;
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
h2 {
margin-top: 0; /* Remove top margin from h2 */
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<div id="container">
<div id="navigation" class="navigationtext">
<h2>domain<br> the home page of First Last</h2>
<p>About</p>
<p>Blog</p>
<p>Contact</p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
{please update the english later, I dont want this question to go into the state of limbo }
Ios's webview loads this static content from a url.
For some reason it has issues with its width. It slides left and right even when I have given width of 100%. I've no understanding of ios webview.
Any help would be great.
Here's the html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<!-- for Facebook -->
<meta property="og:title" content="fb-title" />
<meta property="og:type" content="https://somedomain/#/login" />
<meta property="og:image" content="http://somedomain.com/en-us/images/WebsitePieces/homepage/A_header-vmc3030-camera-water-photo-large.png" />
<meta property="og:url" content="https://somedomain/#/login" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '625280937908870606983',
xfbml: true,
version: 'v2.3'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- <button onclick="gogogo()">Share me, please 2</button> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function gogogo() {
FB.ui({
method: 'feed',
link: 'somedomain.com',
picture: 'http://www.somedomain.com/en-us/images/WebsitePieces/homepage/social_share.png',
name: 'somedomain',
caption: 'Learn how easy somedomain is!',
// description: 'Must read daily!'
});
}
</script>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//code.angularjs.org/1.2.16/angular.js"></script>
<!-- <script src="https://somedomaindev.netgear.com/js/angulike.js"></script> -->
<script src="angulike.js"></script>
<!-- build:css styles/main.css -->
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script>
angular.module('myApp', ['angulike'])
.run([
'$rootScope',
function($rootScope) {
$rootScope.facebookAppId = '625280937606983';
}
])
.controller('myController', [
'$scope',
function($scope) {
$scope.myModel = {
Name: "Installing somedomaincameras is a breeze. Took me less than 10 minutes because it is truely wirefree #somedomain",
ImageUrl: 'img/B_platform.png',
FbLikeUrl: 'http://somedomain.com'
};
}
]);
</script>
<style>
#font-face {
font-family: myFirstFont;
src: url(styles/2BF294_D_0.woff);
}
#font-face {
font-family: 'MorebiRounded-Regular';
src: url('webfonts/2BF294_D_0.eot') format('embedded-opentype'); /* IE9 + later */
src: url('webfonts/2BF294_D_0.eot?#iefix') format('embedded-opentype'), /* IE6 to IE8 */
url('webfonts/2BF294_D_0.woff') format('woff'); /* Newer browsers */
src: url('webfonts/2BF294_D_0.ttf') format('truetype'); /* Safari og iOS, Chrome, Android, Firefox and Opera except Opera Mini */
url('webfonts/2BF294_D_0.eot.svg#Min_font + regular, italic, bold) format('svg');
}
$icon-font-path: '../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/';
#import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
body {
padding-top: 20px;
padding-bottom: 20px;
background-color: white !important;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
padding: 0px 0px 0px 0px;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
p + h4 {
margin-top: 28px;
}
}
/* Responsive: Portrait tablets and up */
#media screen and (min-width: 768px) {
.container {
max-width: 730px;
}
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
background-color: #f0f0f0 !important;
// height:200px;
padding: 0px 0px 0px 0px;
}
}
#media screen and (min-width: 768px) {
.green-p {
color: red;
font-size: 18px;
margin-right: 26px;
/*margin-left: 15px;*/
}
}
.green-p {
color: green;
font-size: 18px;
margin-right: -16px;
margin-left: 3px;
}
.push-down-1 {
background-color: #f0f0f0 !important;
padding-top: 30px;
padding-bottom: 0px;
margin-left: 2px;
margin-right: 2px;
}
.push-down-2 {
background-color: #f0f0f0 !important;
padding-top: 0px;
padding-bottom: 10px;
margin-left: 2px;
margin-right: 2px;
}
#close {
box-sizing: border-box;
color: rgb(68, 68, 68);
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
align-self: stretch;
border: 0px none rgb(68, 68, 68);
border-radius: 5px 5px 5px 5px;
font: normal normal normal normal 16.5px/24.7499980926514px Helvetica, sans-serif;
outline: rgb(68, 68, 68) none 0px;
}
/*#DIV_1*/
/* #close:before {
box-sizing: border-box;
color: rgb(187, 187, 187);
cursor: pointer;
display: block;
height: 30px;
position: absolute;
right: 3px;
text-align: center;
top: 3px;
width: 30px;
align-self: stretch;
perspective-origin: 15px 15px;
transform-origin: 15px 15px;
content: '×';
border: 0px none rgb(187, 187, 187);
border-radius: 3px 3px 3px 3px;
font: normal normal normal normal 26px/26px Helvetica, Arial, sans-serif;
outline: rgb(187, 187, 187) none 0px;
}*/
/*#DIV_1:before*/
#DIV_1 {
box-sizing: border-box;
color: rgb(68, 68, 68);
height: 45px;
text-align: left;
width: auto;
perspective-origin: 298.508514404297px 22.5px;
transform-origin: 298.508514404297px 22.5px;
background: rgb(211, 211, 211) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 0px none rgb(229, 229, 229);
border-right: 0px none rgb(229, 229, 229);
border-bottom: 0.909090876579285px solid rgb(229, 229, 229);
border-left: 0px none rgb(229, 229, 229);
border-radius: 5px 5px 0 0;
font: normal normal normal normal 16.5px/24.7499980926514px Helvetica, sans-serif;
margin: 0px 0px 0px;
margin-left: 3px;
margin-right: 3px;
outline: rgb(68, 68, 68) none 0px;
}
/*#DIV_1*/
#H3_2 {
box-sizing: border-box;
color: rgb(68, 68, 68);
height: 36.4488639831543px;
text-align: left;
width: auto;
perspective-origin: 298.508514404297px 18.2244319915772px;
transform-origin: 298.508514404297px 18.2244319915772px;
border: 0px none rgb(68, 68, 68);
font: normal normal 500 normal 24px/24px MorebiRounded-Regular, Arial;
margin: 2px 0px 10px 0px;
outline: rgb(68, 68, 68) none 0px;
padding: 11px 0px 0px 33px;
text-align: center;
}
.top-down {
margin-bottom: 1px;
/*padding-bottom: 12px;*/
}
#fb-icon {
cursor: pointer;
display: inline-block;
height: 32px;
position: relative;
vertical-align: top;
width: 32px;
perspective-origin: 16px 16px;
transform-origin: 16px 16px;
background: rgba(0, 0, 0, 0) url(img2/facebook_32.png) repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal normal 11px/16px Helvetica, Tahoma, Arial;
}
/*#SPAN_1*/
.g-plus {
margin-top: 2px;
}
.fb-icon {
margin-top: 1px;
}
#SPAN_1 {
cursor: pointer;
display: inline-block;
height: 28px;
position: relative;
text-align: center;
white-space: nowrap;
width: 60px;
perspective-origin: 30px 11px;
transform-origin: 30px 11px;
background: rgba(0, 0, 0, 0) url(img2/fb-share.png) no-repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal normal 11px/16px Verdana, Helvetica, sans-serif;
padding: 3px 0px;
}
/*#SPAN_1*/
#logo { background: url(; background-repeat: none; width: 236px;
height: 169px;
}
/* iphone5 */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
.green-p {
color: green;
font-size: 12px;
margin-right: -16px;
margin-left: 3px;
}
#H3_2{
width:auto;
font-size:10px;
font: normal normal 500 normal 24px/24px MorebiRounded-Regular, Arial;
}
#logo { background: url(i); background-repeat: none; width: 150px;
height: 90px;
margin-right: 20px;
}
.jumbotron{
padding: 0px 0px 0px 0px;
}
.push-down-1{
background-color: #f0f0f0 !important;
padding-top: 30px;
padding-bottom: 10px;
margin-left: 2px;
margin-right: 2px;
}
.push-down-2 {
background-color: #f0f0f0 !important;
padding-top: 0px;
padding-bottom: 9px;
margin-left: 2px;
margin-right: 2px;
}
}
/*iphone6*/
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
.green-p {
color: green;
font-size: 12px;
margin-right: 0px;
margin-left: 15px;
}
#H3_2{
width:auto;
font-size:10px;
}
#logo { background: url(img2/cam.png); background-repeat: none; width: 169px;
height: 90px;
margin-right: 20px;
}
.jumbotron{
padding-top:0px;
}
.push-down-1{
background-color: #f0f0f0 !important;
padding-top: 30px;
padding-bottom: 10px;
margin-left: 2px;
margin-right: 2px;
}
.push-down-2 {
background-color: #f0f0f0 !important;
padding-top: 0px;
padding-bottom: 30px;
margin-left: 2px;
margin-right: 2px;
}
}
</style>
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/iphone-portrait.css" />
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/iphone-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="css/ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="css/ipad-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />
</head>
<body>
<div class="jumbotron top-down">
<div id="close">
</div>
<div id="DIV_1">
<h3 id="H3_2">
hello I'm dialog header
</h3>
</div>
<div class="row push-down-1">
<div class="col-xs-6">
<!-- <img src="img2/camera_hand.png"> -->
<div id="logo"> </div>
</div>
<div class="col-xs-6">
<div class="row green-p">
some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
</div>
</div>
</div>
<div ng-controller="myController" class="text-center push-down-2 row">
<div class="col-xs-4 fb-icon">
<span onclick="gogogo()" id="SPAN_1"></span>
</div>
<div class="col-xs-4">
<div tweet="myModel.Name"></div>
</div>
<div class="col-xs-4 g-plus">
<div google-plus></div>
</div>
</div>
<!-- </div> -->
</div>
<!-- jumbotron -->
<!-- container -->
</body>
</html>
WebView has a property -- set scalesPageToFit to TRUE.
I know dragging works because i can do it on jsfiddle examples, but i'm clearly not doing something right. I have added the html, css and js below but still cant drag the div in chrome. All help appreciated.
html
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel='stylesheet' href='drag.css'></link>
<script src='drag.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="car">
<div id="top"></div>
<div id="bottom"></div>
<div id="fwheel"></div>
<div id="bwheel"></div>
</div>
</body>
</html>
drag.css
#top {
position: relative;
height: 50px;
width: 50px;
border-radius: 5px;
background-color: #cc0000;
left: 25px;
}
#bottom {
position: relative;
height:25px;
width: 100px;
background-color: #cc0000;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
top: -25px;
}
#fwheel {
position: relative;
height:20px;
width:20px;
border-radius: 100%;
background-color: black;
top: -35px;
left: 5px;
}
#bwheel {
position: relative;
height:20px;
width:20px;
border-radius: 100%;
background-color: black;
top: -55px;
left: 75px;
}
drag.js
$(document).ready(function() {
$('#car').draggable();
});
Expected output is the same as in the preview, with labels that indicate the specified blocks.
I run this in standard mode and I am using GWT 2.1.1
Below is the expected output:
Actual output:
<html><head>
<!-- The DOCTYPE declaration above will set the -->
<!-- browser's rendering engine into -->
<!-- "Standards Mode". Replacing this declaration -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout. -->
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<!-- -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!-- -->
<link href="DucWMP.css" rel="stylesheet" type="text/css">
<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>Web Application Starter Project</title>
<!-- -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!-- -->
<script src="ducwmp/ducwmp.nocache.js" language="javascript" type="text/javascript"></script><script defer="defer">ducwmp.onInjectionDone('ducwmp')</script>
<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic UI. -->
<!-- -->
<link rel="stylesheet" href="http://127.0.0.1:8888/ducwmp/gwt/standard/standard.css"><style>.GC3DVSKBA{background-color:ivory;}</style></head><body>
<!-- OPTIONAL: include this if you want history support -->
<iframe style="position: absolute; width: 0pt; height: 0pt; border: 0pt none;" tabindex="-1" id="__gwt_historyFrame" src="javascript:''"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<iframe src="javascript:''" id="ducwmp" style="position: absolute; width: 0pt; height: 0pt; border: medium none;" tabindex="-1"></iframe><div style="position: absolute; z-index: -32767; top: -20cm; width: 10cm; height: 10cm;"> </div><div style="position: relative;" class="GC3DVSKBA"><div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex;"> </div><div style="position: absolute; overflow: hidden; left: 0em; top: 0em; right: 0em; height: 4em;"><div class="gwt-Label" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">Header + Navigation</div></div><div style="position: absolute; overflow: hidden; left: 0em; right: 0em; bottom: 0em; height: 2em;"><table cellspacing="0" cellpadding="0" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;"><tbody><tr><td align="left" style="vertical-align: top;"><div class="gwt-Label">Group control</div></td></tr></tbody></table></div><div style="position: absolute; overflow: hidden; left: 0em; top: 4em; right: 0em; bottom: 2em;"><div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;" class="gwt-SplitLayoutPanel"><div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex;"> </div><div style="position: absolute; overflow: hidden; top: 0px; right: 0px; bottom: 0px; width: 128px;"><div class="gwt-Label" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">Right Sidebar</div></div><div style="position: absolute; overflow: hidden; top: 0px; right: 128px; bottom: 0px; width: 8px;"><div style="width: 8px; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;" class="gwt-SplitLayoutPanel-HDragger"></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 136px; bottom: 0px;"><div style="overflow: auto; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;"><div style="position: relative;"><div class="gwt-Label">Component Box</div></div></div></div></div></div></div></body></html>
In Java code make sure you do
RootLayoutPanel.get().add(appWidget);
Instead of
RootPanel.get().add(appWidget);