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);
Related
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%;
}
The same codes of html5 in webview of android runs nature but contentSize more larger on iOS.Is it some wrong with html5 code? May I do some on iOS client to fix it?
If you use the UIWebView to load the content, you can set the webview's content to fit. As follow:
myWebView.scalesPageToFit = YES; //true for Swift
webView.scalesPageToFit = YES;
should size the web page to fit the size of the UIWebView. The user then has the option to zoom in and out of the page. Your problem might be because the webview is not located properly. If your view controller's view fits the screen entirely, add this to your code.
webView.frame=self.view.bounds;
Sorry,Here's my code,if anything else I lost to post,please tell me,TKS!
- (UIWebView *)webView
{
if (!_webView)
{
_webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 45, self.view.width, self.view.height - 45)];
_webView.scalesPageToFit = YES;
_webView.scrollView.scrollEnabled = NO;
_webView.allowsInlineMediaPlayback = YES;
_webView.mediaPlaybackRequiresUserAction = NO;
[self.view addSubview:_webView];
}
return _webView;
}
<head>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta mame="renderer" content="webkit">
<meta content="telephone=no,email=no" name="format-detection">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" type="text/css" href="lib/type_2/images/engine/style.css" media="screen">
<link rel="stylesheet" href="lib/type_2/css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/album.css">
<title>
相册
</title>
<script type="text/javascript" src="js/template.js"></script>
<script id="itemsTpl" type="text/html">
{{each list as value i}}
<li class="captionImg"><img src="{{value}}" alt="{{i}}" title="" /></li>
{{/each}}
</script>
</head>
<body>
<div id="wrapper">
<i class="i i-1"></i>
<div><div id="wowslider-container" class="ws_gestures" style="font-size: 10px;"><div class="ws_images"><div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;"><img src="/var/mobile/Containers/Data/Application/B1C82725-9EFC-4A90-BFE2-27FD701A0A9A/Documents/Image/854ABED8-D819-4BB0-B772-DD73A64153C7.jpg" alt="0" title="" style="width: 100%;"></div><div class="ws_list" style="position: absolute; top: 0px; height: 100%; transform: translate3d(0px, 0px, 0px); width: 300%; display: table; left: 0%;"><div class="ws_swipe_left" style="position: absolute; top: 0px; height: 100%; overflow: hidden; width: 33.333333333333336%; left: -33.333333333333336%;"><img src="/var/mobile/Containers/Data/Application/B1C82725-9EFC-4A90-BFE2-27FD701A0A9A/Documents/Image/10B68731-D2CA-43A8-9A63-D1C964982BED.jpg" alt="2" title="" style="visibility: visible; width: 100%; height: auto; margin-top: 0px; margin-left: 0px;"></div><ul id="items" style="width: 100%;">
<li class="captionImg" style="display: table-cell; float: none; width: auto; font-size: 0px;"><img src="/var/mobile/Containers/Data/Application/B1C82725-9EFC-4A90-BFE2-27FD701A0A9A/Documents/Image/854ABED8-D819-4BB0-B772-DD73A64153C7.jpg" alt="0" title="" style="visibility: visible; width: 100%; height: auto; margin-top: 0px; margin-left: 0px;"></li>
<li class="captionImg" style="display: table-cell; float: none; width: auto; font-size: 0px;"><img src="/var/mobile/Containers/Data/Application/B1C82725-9EFC-4A90-BFE2-27FD701A0A9A/Documents/Image/5270A5C5-F840-447D-BB5B-585A3E163023.jpg" alt="1" title="" style="visibility: visible; width: 100%; height: auto; margin-top: 0px; margin-left: 0px;"></li>
<li class="captionImg" style="display: table-cell; float: none; width: auto; font-size: 0px;"><img src="/var/mobile/Containers/Data/Application/B1C82725-9EFC-4A90-BFE2-27FD701A0A9A/Documents/Image/10B68731-D2CA-43A8-9A63-D1C964982BED.jpg" alt="2" title="" style="visibility: visible; width: 100%; height: auto; margin-top: 0px; margin-left: 0px;"></li>
</ul><div class="ws_swipe_right" style="position: absolute; top: 0px; height: 100%; overflow: hidden; width: 33.333333333333336%; left: 100%;"><img src="/var/mobile/Containers/Data/Application/B1C82725-9EFC-4A90-BFE2-27FD701A0A9A/Documents/Image/854ABED8-D819-4BB0-B772-DD73A64153C7.jpg" alt="0" title="" style="visibility: visible; width: 100%; height: auto; margin-top: 0px; margin-left: 0px;"></div></div></div><div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: visible;" class="ws_effect"><div class="ws_parts"></div><div class="ws_zoom"></div><div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden;"></div></div><div class="ws_effect" style="position: absolute; background-size: cover; left: 0px; top: 0px; width: 100%; height: 100%; -webkit-backface-visibility: hidden;"><div class="ws_effect" style="position: absolute; background-size: cover; left: 0px; top: 0px; width: 100%; height: 100%; -webkit-backface-visibility: hidden; transform-style: preserve-3d; perspective: 2000px; z-index: 8; overflow: visible;"></div></div><div class="ws_effect" style="overflow: visible; position: absolute; top: 0px; left: 0px; width: 1280px; height: 0px; transform: translate3d(0px, 0px, 0px); transform-origin: 640px 360px 0px; perspective: 2000px; display: none;"></div><div class="ws_video_btn"><div></div></div></div></div>
</div>
<script type="text/javascript" src="lib/type_2/images/engine/jquery.js"></script>
<script type="text/javascript" src="lib/type_2/images/engine/wowslider.js"></script>
<script type="text/javascript" src="lib/type_2/images/engine/script.js"></script>
<script type="text/javascript">
var re=null;
function initData(result){
//result={"time": "3000","list": ["imgs/1.jpg", "imgs/2.jpg","imgs/3.jpg"]};
re=result;
//alert(result)
$("#wowslider-container").html("<div class=\"ws_images\"><ul id=\"items\"></ul></div>");
var html = template('itemsTpl', result);
document.getElementById('items').innerHTML="";
document.getElementById('items').innerHTML = html;
banner(result.time, result.list.length-1);
}
function doing(index){
if(index==0){
wowSlider=null;
var html="<div class=\"last\"><img src=\""+re.list[re.list.length-1]+"\" /></div>" ;
document.getElementById('wowslider-container').innerHTML = html;
// 结束了
}
}
</script>
</body>
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();
});
Heading
I need to align tags beside the price in featured products (the tags in the example feature the text "Aussie Made").
I need to vertically align the "Aussie Made" images beside the price (bottom align). The price can dynamically change in width and height. Can someone give me some ideas on how to make the "Aussie made" image/icon float on the right and still be on the bottom of the div aligned?
I tried to put
position:absolute;
bottom:0px on the div containing the Aussie Made icon. However it didn't work. Can someone please help me on this?
Did you try using position RELATIVE?
As in relative to the PARENT container?
This should give you an ideia:
CSS
.container{position:relative; height:200px; width: 200px; outline: 1px solid #000; }
.image { position: absolute; bottom:0px; right:0px; width: 10px; height: 10px; outline: 1px solid #000; }
HTML
<div class="container"><div class="image"></div></div>
I beg your pardon, your quite right, its ABSOLUTE not RELATIVE...
Although Absolute position actually makes the contents relative to the parent.
See the photo below.
and the code...
<style type="text/css">
.Main
{
position: absolute;
left: 400px;
top: 200px;
width: 469px;
height: 280px;
}
.Photo
{
width: 469px;
height: 280px;
z-index: 1;
}
.Caption
{
position: absolute;
left: 0px;
top: 250px;
width: 461px;
height:32px;
padding-left: 8px;
background-color: #FF0000;
color: #FFFFFF;
font-family: tahoma;
font-size: 20pt;
text-align: left;
vertical-align: middle;
z-index: 2;
}
.Price
{
position: absolute;
left: 330px;
top: 215px;
width: 122px;
height: 40px;
text-align: center;
vertical-align: middle;
z-index: 3;
color: #CC3300;
font-size: 20pt;
background-color: #FFFF00;
}
.MiniText
{
top: 4px;
color: #111111;
font-size: 8pt;
font-weight: bold;
font-family: Tahoma;
}
</style>
<div style="left: 0px; top: 0px; height: 800px;">
<div class="Main">
<img class="Photo" alt="" src="http://202.92.83.79/medias/sys_master/images/8796157247518/Package-img1.jpg" />
<div class="Price" style="z-index: 4">
<div class="MiniText">First of it's kind!</div>
£100.97p
</div>
<div class="Caption" style="z-index: 3">Sooper Dooper Wotsit Thingy</div>
</div>
</div>
I have a problem while trying to upload using plupload and jquery ui dialog.
I have a modal dialog builded with jqueryui and I have added a plupload layout into it.
But when I try it with Firefox it open's me 2 dialog frame
and with Safari it doesn't work.
I have seen the code generated and I have seen that in Firefox I have 2
<div id="p16r5em3ep2gmrvk1ad335d1sae0_html5_container" style="position: absolute; background: none repeat scroll 0% 0% transparent; width: 0px; height: 0px; overflow: hidden; z-index: -1; opacity: 0; top: 0px; left: 0px;" class="plupload html5">
<input type="file" multiple="multiple" accept="" style="font-size: 999px; position: absolute; width: 100%; height: 100%;" id="p16r5em3ep2gmrvk1ad335d1sae0_html5">
</div>
And the second one
<div id="p16r5em3i11ila2j0b91i163s44_html5_container" style="position: absolute; background: none repeat scroll 0% 0% transparent; width: 0px; height: 0px; overflow: hidden; z-index: -1; opacity: 0; top: 0px; left: 0px;" class="plupload html5">
<input type="file" multiple="multiple" accept="" style="font-size: 999px; position: absolute; width: 100%; height: 100%;" id="p16r5em3i11ila2j0b91i163s44_html5">
</div>
For Safari, I have...
<div id="p16r5fjomdg751e101jao122t12gd0_html5_container" style="position: absolute; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; opacity: 0; top: 0px; left: 0px; width: 0px; height: 0px; z-index: -1; background-position: initial initial; background-repeat: initial initial; " class="plupload html5">
<input id="p16r5fjomdg751e101jao122t12gd0_html5" style="font-size: 999px; position: absolute; width: 100%; height: 100%; " type="file" accept="" multiple="multiple">
</div>
And the second one
<div id="p16r5fjong1g231iqm10sq1jte1nc34_html5_container" style="position: absolute; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; opacity: 0; top: 0px; left: 0px; width: 0px; height: 0px; z-index: -1; background-position: initial initial; background-repeat: initial initial; " class="plupload html5">
<input id="p16r5fjong1g231iqm10sq1jte1nc34_html5" style="font-size: 999px; position: absolute; width: 100%; height: 100%; " type="file" accept="" multiple="multiple">
</div>
But nothing's come right.
Note that if I don't use the modal dialog, it works...
EDIT
I use this code to init plupload
var uploader = new plupload.Uploader ({
runtimes: 'html5,flash',
container:'container',
drop_element:'upDropArea',
browse_button: 'upBrowseButton',
url: 'url&action=action',
flash_swf_url: '/lib/plupload/js/plupload.flash.swf',
multipart: true,
urlstream_upload:true,
resize : {quality : 60},
multiple_queues: true,
filters : [
{title: 'Images', extensions: 'jpg,gif,png,jpeg'}
]
});
Any idea?
Thanks for all
You don't have to init plupload widget into the jQuery UI modal dialog, it works fine when you intialize it somewhere else in your script.
I have have recently implemented the pluploadQueue plugin in a jQuery UI dialog by coding the plupload object in the "open" function callback of the jQuery UI dialog:
$("#plupload-dialog").dialog({
autoOpen: false,
modal: false, // change this to true for modal, but haven't tested yet
open: function(event, ui) {
$("pluploader").pluploadQueue({
runtimes: '', // add your runtimes here
url: '', // add your URL here
flash_swf_url: '', // path to shockwave component
silverlight_xap_url: '', // path to silverlight component
max_file_size: '', // file size option
filters: [], // filter options
preinit: { // preinit callbacks - note do not include separate init for pluploadQueue
Init: function(up, info) {
},
UploadFile: function(up, file) {
},
Error: function(up, args) {
}
}
});
}
});
Not sure if this will help, but maybe worth a shot.