I'm trying to use something like <div style="font-family: Helvetica, myFont;"> where myFont is an added custom font. But when I convert it into pdf using doc.html(document.getElementById('to-pdf')), only the Helvetica font is used.
It manages to load properly if I use only the custom font <div style="font-family: myFont;">, so my question is if there is a way to use <div style="font-family: Helvetica, myFont;"> instead. This is because I'm mainly using the custom font to display the glyphs for other languages, and I want the English text to be displayed in Helvetica because it looks better.
Related
I'm using Foundation's grid-x which is powered by CSS flexbox.
Is there a small, simple and straightforward way to have rows and columns of responsive tiles (where the count of tiles per row is unknown) have a visual separator (e.g., a good old fashioned <hr> element) between each row? I'm using Foundation's class="row" and class="column" to render the responsive tiles.
What I'm trying to achieve is basically this: Add a horizontal line separator on rows of wrapping items but with minimal hacking of Foundation's Css or markup.
Well the simplest solution I can think of is to have a css class that has solid bottom border:
.solid-border-bottom{border-bottom: 0.25rem solid gray;}
On the above code you could change the thickness and color; based on your needs
Then in any div you want to have the <hr> effect you use this class, something like:
<div class"columns solid-border-bottom">
I'm trying to learn how to use Google's Polymer 1.0 components by starting with a simple message dialog. The dialog appears, but it does not have the styling I see in Google's Polymer demos, so I'm trying to add style to the dialog to match what I see in the Google demos:
<html>
<head>
<script src="scripts/polymer/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="scripts/polymer/paper-dialog/paper-dialog.html">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style type="text/css">
paper-dialog {
font-family: 'Roboto', sans-serif;
font-size: 14px;
margin: 0;
padding: 24px;
}
</style>
</head>
<body>
<paper-dialog opened="true">Dialog test</paper-dialog>
</body>
</html>
The padding value works fine, but the font family and font size are being ignored. I know the font is being downloaded ok because the "Test dialog" text briefly appears at the top of the page using the Roboto font just before the dialog appears. There are no errors in the console.
What is the proper way to get the dialog to accept the style I want? Note that I can wrap the dialog content with div that is styled with the desired font, but I doubt that's considered the proper way to do this in Polymer.
You may need to import paper-styles-classes.html
Based on your example, try adding
<link rel="import" href="scripts/polymer/paper-styles/paper-styles-classes.html">
or look for a similar file.
You could add <link rel="import" href="scripts/polymer/paper-styles/typography.html"> to get the default typography and fonts from the polymer project instead of explicitly specifying the font as Roboto as you did in your question.
<Paper-dialog> doesn't comes with text styling property. The default font-family set as Roboto. You may check more from here https://elements.polymer-project.org/elements/paper-dialog-behavior?active=Polymer.PaperDialogBehavior
What i would recommend for yours is to create a <div> container that wraps the text with custom classes.
I have tried similar outputs of yours in code.io here so you could see how the custom styling works.
Hope helps.
Is there any way to remove big control window from embedded mapsengine iframe?
Lets say im embedding 640x480 iframe of mapsengine and 1/4 of the screen takes mapsengine layer controls.
<iframe src="http://mapsengine.google.com/map/view?mid=z-CXoJOwaOdI.k77h0_UeoKiw" width="640" height="480"></iframe>
Super simple solution
Set the width at 517px or smaller. The control panel will disappear ... on desktop. It will magically appear on mobile.
Slightly More Complicated Solution
The CSS
<style>
#mapsengine-box-outer {overflow: hidden;}
#mapsengine-box-inner {
overflow: hidden;
width:590px;
height:590px;
border:5px solid #998;
border-radius:10px;
}
#mapsengine {margin: -30px 0 0 -350px;}
</style>
The HTML
<div id="mapsengine-box-outer">
<div id="mapsengine-box-inner">
<iframe id="mapsengine" width="1285" height="630"
src="https://mapsengine.google.com/map/embed?mid=*******">
</iframe>
</div>
</div>
I put up a page about this (including a mobile solution) on my site Maps Engine Manipulation – Removing iframe Controls (featureListPanel) and here's a CodePen to play with.
I am using the YUI multi page calendar on my website. I would like to center this on my web page but I am unsure of how to do this due to the complex CSS I am not used to. I have tried adding margin-left & margin-right: auto but this is not working.
An example of this multi-page calendar can be found here: http://developer.yahoo.com/yui/examples/calendar/calgrp_clean.html
Would somebody be able to help me center this calendar?
Thanks in advance.
This is extremely simple. You just need to define a width for the main div so the margin can center it. You also need to put a div right before the main div closes to clear the months so the main div has a distinct height/width.
Add this style to the main Div:
<div id="cal1Container" class="yui-calcontainer multi" style="margin: 0 auto; width: 500px; float: none;">
And before this Div closes add this
<div style="clear: both;"></div>
Now it works! Floats are pretty confusing at first, but often that's something that needs to be done. Other than that it's basic CSS.
I am using CSS3 hover and transitions to show and hide an image. On mobile devices I would like to use the same transition for touch events.
Basically, the first touch would perform the hover effect or rollover, and the touch up would perform the roll off.
I would like to stay away from using JavaScript to do this. If there is a way to do it with pure CSS3 that would be the best option.
Use the :active pseudo-class in your css, then add ontouchstart="" and onmouseover="" to the body tag.
The following code is excerpted from my site, in which I have buttons that get smaller and glow white when hovered(on pcs) or held down(on touch devices)
<style>
.boxbutton:active{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-o-transform:scale(0.9);
transform:scale(0.9);
-webkit-box-shadow:0px 0px 20px #FFF;
-moz-box-shadow:0px 0px 20px #FFF;
-o-box-shadow:0px 0px 20px #FFF;
box-shadow:0px 0px 20px #FFF;
}
</style>
<body ontouchstart="">
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div>
</a>
</body>
The following edits are no longer relevant because I have deleted the original, incorrect instructions, but if you were here before these may still be helpful
EDIT: I have discovered it works more reliably if, rather than putting ontouchstart="" in each link, put it in the <body> tag. So your body tag should look like this<body ontouchstart=""> and your links look like this
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div></a>
EDIT 2: I have figured out that, rather than copying your CSS and use screen size queries for desktop, just add `onmouseover="" to the body tag also, so the :active pseudo class will be called by the mouse on the desktop AND by touches on mobile. You can just ignore the rambling about media queries if you do this.
If you don't want to modify your HTML code, you could try this:
<script>
document.body.addEventListener('touchstart',function(){},false);
</script>
If anyone is still having this issue in 2020 and beyond this article helped me.
My issue was that :hover effect wasn't working on iPhones in the Safari browser. I couldn't really use the JS solutions I found on other answers and resources because the elements I wanted to attach :hover to were created dynamically on fetching data from a 3rd party API. Just adding ontouchmove to the root HTML element and :hover to the appropriate element in the CSS folder fixed it. (Sorry for my English, I'm not a native speaker :p)