I was trying to use iron-flex-layout during the development of a website and became extremely frustrated when I spent hours try to get it to work, but to no avail. Eventually, I decided to try a bare-bones web page to see if it would work (thinking that it was probably something in my website). However, I tried the following code and I still can't get it to work! Can anyone spot my errors?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<style>
body {
font-weight: 300;
}
div {
border: 2px solid grey;
background-color: white;
}
.layout {
margin-bottom: 20px;
background-color: grey;
}
p {
margin: 5px;
}
</style>
</head>
<body fullbleed unresolved>
<div class="horizontal layout">
<div><p>div</p></div>
<div class="flex"><p>flex (horizontal layout)</p></div>
<div><p>div</p></div>
</div>
</body>
</html>
Here is what the result is supposed to look like
And here is what I am getting
If you want to use the CSS classes, you need to import them separately:
<link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
The import you have only gives you access to the #apply mixins. Do note that Polymer is dropping /deep/ support in their elements and are encouraging people to use the mixins instead of the classes: https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/
Related
I have a strange issue that is happening on one of my projects (but not other projects) and I can't see anyone else having anything remotely similar. (I apologise in advance for lack of proper examples as this is actual company code).
The problem I have is in a .NET Core 2 project I am trying to use nodejs to create a PDF (like I have in a second project). However, the PDF only generates properly when the Visual Studio (2017) debugger is attached.
try
{
var result = await nodeServices.InvokeAsync<byte[]>(pdfSettings, viewWithAbsoluteLinks);
string invoicePath = _configuration.GetSection("AppSettings")["InvoicePath"];
string filename = Path.Combine(invoicePath, "invoice.pdf");
FileUtils.WriteToFile(filename, result);
return Json(new { success = true, size = result.Count(), viewAsHtml, viewWithAbsoluteLinks, environment, pdfSettings, result });
}
catch
{
return Json(new { success = false });
}
I am using jsrender with phantom-pdf, and when I attach the debugger in Visual Studio result is 69318. However, when I run without the debugger attached result = 66167 bytes.
To debug I returned the variable viewWithAbsoluteLinks so I could see if there was any difference, and in both cases that variable is the same.
viewWithAbsoluteLinks is:
<html>
<head>
<style>
.pdf-hidden {
display: none;
}
.pdf-visible {
display: block !important;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Invoice</title>
<link rel="stylesheet" href="http://localhost:10795/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="http://localhost:10795/css/site.css">
<link rel="stylesheet" href="http://localhost:10795/css/site.theme.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
crossorigin="anonymous">
<link rel="stylesheet" href="http://localhost:10795/lib/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
<style>
body {
font-family: "DIN 2014 Light", 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #000;
}
</style>
</head>
<body>
<div class="pull-right" style="border: 1px solid #0f0">
<img src="http://localhost:10795/images/training-logo.png">
</div>
<div style="padding-top: 50px;">
<table style="width: 100%; border: 1px solid #000">
<tbody>
<tr>
<td style="border: 1px solid #f00"> Address </td>
<td> Invoice </td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript"> window.JSREPORT_READY_TO_START = true; </script>
</body>
</html>
When the debugger is attached the text within the tags shows in the PDF. When the debugger is not attached the text does not appear. (The s have different colour borders - and the colours display properly)
I am assuming running when debugging is altering something, but I'm not sure what. I thought at first it was just that CSS was making the text white, but the file sizes suggest the text really isn't there.
Does anyone have any ideas what Visual Studio may be doing to make it work properly when the debugger is attached?
After struggling for a while I may have just solved the issue. Timing.
Event though the debugger was attached (no breakpoints, just attached) it's possible that this caused a small delay just long enough for the PDF to be generated.
A quick look on SO and I found this: How to set time delay in javascript
I added a delay of 1 second and it generated the PDF with text correctly without the debugger being attached.
A simple nested polymer-element inside another one will not display:
index.html
<!DOCTYPE html>
<html>
<head>
<script src="lib/polymer.min.js"></script>
<link rel="import" href="elements/indx-grid.html">
<link rel="import" href="elements/indx-griditem.html">
<title>INDX-polymer</title>
</head>
<body>
<indx-grid>
<indx-griditem></indx-griditem>
</indx-grid>
</body>
</html>
indx-grid.html
<polymer-element name="indx-grid">
<template>
<style>
#host {
:scope {
display: block;
margin: 20px;
border: 2px solid #E60000;
background: #CCC;
height: 500px;
}
}
</style>
</template>
<script>
Polymer('indx-grid');
</script>
</polymer-element>
indx-griditem.html
<polymer-element name="indx-griditem">
<template>
<style>
#host {
:scope {
display: block;
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
background: #FFF;
width: 100px;
height: 100px;
}
}
</style>
</template>
<script>
Polymer('indx-griditem');
</script>
</polymer-element>
Strangely enough, although I can see it in developer tools in Chrome and CSS properties are all correct, the element will not display and not even have a 'size tooltip' while inspecting it with Chrome dev tools.
Does someone have any clue about the problem here?
Thanks
You need <content> 1 to bring in <indx-griditem> ("light DOM") into the <indx-grid>'s shadow DOM.
Demo: http://jsbin.com/eRimiJo/2/edit
Bonus tip: you can also use noscript on Polymer elements that don't setup a prototype (e.g. only call Polymer('element-name');
I'm looking to make an image sprite fade in after a certain amount of time. (please see code below)
The image sprite has CSS attributes such as hover, active, href.
Then I added jquery src and code. The sprite hover, active, href work, but the jquery delay does not.
How do I make all of these work together?
Thanks for any help you can give!
K
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<style type="text/css">
html, body {margin:0px;}
a.LaunchCourse {
background: url(images/LaunchCourse.png) no-repeat 0 0;
display: block;
margin-left: auto;
margin-right: auto;
width: 188px;
height: 60px;
}
a.LaunchCourse:hover{
background-position: 0px -60px;
}
a.LaunchCourse:active{
background-position: 0px -120px;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.LaunchCourse').delay(1500).fadeIn(1500);
});
</script>
</head>
<body>
<a class="LaunchCourse" href="wbt.htm" ></a>
</body>
</html>
I think what you might want to try is putting this:
$('.LaunchCourse').hide();
setTimeout(showImage, 5000);
function showImage() {
$('.LaunchCourse').fadeIn(1000);
}
instead of this:
$('.LaunchCourse').delay(1500).fadeIn(1500);
That way, you start by hiding the image... and then you just fade in with however much delay you want in that fadeIn(number) part.
Why not use javascript's setTimeout function?
Is it possible to have the same text effect (inner shadow, shade) as this image:
using CSS3, and how?
WebKit-only (Safari/Chrome):
<style>
h1 {
background-color: rgba(0,0,0,0.8);
-webkit-background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0 2px 2px;
}
</style>
<h1>Hello StackOverflow</h1>
Here you can see above snippet in JsFiddle: http://jsfiddle.net/HkTqe/6/
Firefox & WebKit:
<style>
.trick1 {
color: black;
height: 2em;
}
.trick2 {
color: transparent;
text-shadow: rgba(255,255,255,0.8) 0 5px 5px;
margin-top: -2em;
}
</style>
<div class="trick1">Text in Light Shade</div>
<div class="trick2">Text in Light Shade</div>
Note that you must have two div's in that order, with the same textual content; else it won't work.
Comparison of both techniques: http://jsfiddle.net/bABuM/
Not really, but you can try various almosts. See this post for lots of examples:
You could also create it using -webkit-mask-image - but it will again work only in webkit browsers. You need to crate the transparent cloudy image in prohotshop (the way you want it to look - i just did a render/clouds and transformed it using aplha channel - by tweaking it a bit you could achieve the same looking effect as in your design) and than apply it as mask and clip the mask to text. Webkit is wonderful for this but sux since it's not supported in all browsers.
Creating that exact same effect with css3 is currently not possible
http://jsfiddle.net/easwee/VMSD6/2/
<!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>
<title>Untitled Page</title>
<style type="text/css">
h1 {
font-size:50px;
font-weight:bold;
font-family:Arial Black;
color:#666;
-webkit-mask-image:url("mask.png");
-webkit-mask-clip:text;
background:black;
}
</style>
</head>
<body>
<h1>SAMPLE TEXT</h1>
</body>
</html>
I have a website setup with DIV managed layout. The problem is that under IE 6 this layout breaks.
This is the CSS:
#bg{
position:fixed;
top:0;
left:0;
/* Preserve aspect ratio */
min-width:100%;
min-height:100%;
}
#basic {
width: 902px; height: auto; margin-left: auto; margin-right: auto; position: relative; padding-bottom: 50px;
}
#logo{
width: 902px; height: 400px; position: absolute; top: 17px;
}
#navbar{
width: 902px; height: 23px; top: 280px; position:absolute;
}
#content{
width: 802px; height: auto; top: 325px; position: absolute; background-color: white; padding-top: 50px;padding-left: 50px; padding-right: 50px; padding-bottom: 50px
}
#csob{
width: 100px; height:100px; bottom:0px; right: 0px; position: absolute;
}
#titulni_strana {width:902; height:auto; top:325px; position:absolute}
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="shortcut icon" href="http://protechp.cz/zimnihrycsob/images/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<link href="default.css" rel="stylesheet" type="text/css" >
<title>Zimni Hry CSOB</title>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
</head>
<body>
<img src="images/background-gradient-ok.jpg" id="bg" alt="pozadi">
<div id="basic">
<div id="logo">
<center><img src="images/logo3.png" alt="logo"></center>
</div>
<?php include ("./menu.php") ?>
<div id="titulni_strana">
<img src="images/titulni_strana.jpg" alt="titulni strana">
</div>
</div>
</body>
</html>
It look as if there are issues here beyond just simple CSS.
First, ensure your HTML is valid. It looks as if the browser in the first image is being more lenient than IE6 since the image is broken in one but not the other.
Also, IE6 does not support the min-* properties. You need to use height and width instead, either in an IE6-only stylesheet or with the star hack to target IE6 only.
Edit: Also, IE6 does not support fixed positioning. You'll need to use absolute positioning for it instead.
It seems the problem is with the image not loading and not the css.
Try removing the style sheet, all css, and the ie6 png fix javascript just to confirm your image is making it to the page as it doesnt look like a css problem to me. A live example would be nice.