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.
Related
I have in my Salesforce"Account" object a rich text field to save images. When I tried to set its size I'm not able to do that. But if I add text content within it the styling is working perfectly with my text content. Only my image is not responding to the style given for it. I have given my code below.Can anyone figure out what's wrong with the code?
<html>
<head>
<style type="text/css">
myDiv
{
border:0px;
height:50px;
width:10px;
}
</style>
</head>
<body>
<div id="myDiv">Picture {!Picture__c}</div>
</body>
</html>
Thanks
Aruna V
It's not possible to resize an image with CSS so go for alternate methods.
For an working method refer here.
I am making my webpages responsive but struggling to keep elements on the page not to go over each other. I am quite new to web development so I don't even know how to approach the issue. I would really appreciate some general suggestions at this stage to help me to get my head around it and move forward.
A few suggestions to get you started.
Begin by including a viewport meta tag in the head of your document, this will stop smartphones and tablets from scaling your page to fit the viewport (screen)
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
Use CSS to define element sizes because then you can restyle elements at different viewports. Also try and avoid including hard pixel dimensions for any elements because they will likely cause problems on small screens, opt for a width of say 100% over 960px
There will be times where you need to change the layout on small screens. For example two side by side images, each with a width of 50% may not work on a smartphone. When this happens, use media queries to change your layout
CSS
img{
width:50%;
height:auto;
}
#media screen and (max-width:400px) {
img{
width:100%;
}
}
Hope this helps get you going!
Update
See if this is closer to what you are after (note the placeholder images may be slow to load):
live view - http://s.codepen.io/panchroma/debug/ZOqgzx
edit view - http://codepen.io/panchroma/pen/ZOqgzx
The important bits are:
in your HTML I've removed the inline styling you had for the images and moved it to the CSS starting at line 65
starting at line 134 in the CSS I've built out the #media styling for narrow viewports. Note that I've collapsed your 2 column layout to a single column layout as well. This detail is completely optional but gives you more room to work
at line 4 in your HTML you have <link href="index_responsive.css" rel="stylesheet" media="screen and (max-width: 800px)" /> . Technically here's nothing wrong with this, though it's more common to use the one style.css file and include everything in that one file, and the #media screen ... statement and styling in that style.css file
Website: http://wearetechnology.com/
We have custom social media icons in the header and the footer of the above site.
Everything looks fine on the computer, even when I resize the browser window but when we pull up the site on a smart phone the icons resize to different sizes (skinny, smaller, etc.).
We'd like them to stay the same size as on the regular site but I can't seem to find the correct area in CSS that is changing.
Here is the CSS that I am using:
.social-networks .facebook a{background-image:url(images/facebook-wat.png) !important; width:32px !important; height:32px !important;}
.social-networks .twitter a{background-image:url(images/twitter-wat.png) !important; width:32px !important; height:32px !important;}
.social-networks .linkedin a{background-image:url(images/linkedin-wat.png) !important; width:32px !important; height:32px !important;}
.social-networks .google a{background-image:url(images/google-wat.png) !important; width:32px !important; height:32px !important;}
I have added to the media.css file but nothing seems to work.
Any help is appreciated.
have you added this in your html head ?
<meta name="viewport" content="width=device-width, initial-scale=1" />
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)
I'm trying to configure a viewport for mobile Safari. Using the viewport meta tag, I am trying to ensure that there's no zooming, and that you can't scroll the view horizontally. This is the meta tag I'm using:
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
On my iPhone when I load the page, it seems to look okay:
But I can scroll horizontally, so that it looks like this (this is as far to the right as I can go:
When I swing it into landscape view, the page renders as expected, locking the horizontal scroll position.
I'm trying to figure out how to make this page not scroll horizontally at all. Is it possible that I've got some page element pushing the content out? I wouldn't even expect that to be possible with a correct viewport set, but I'm grasping at straws here.
Is it possible that I've got some page element pushing the content out?
Yes, that is indeed the case. The viewport setting only defines the visible viewport area but does not deal with turning off sideway panning.
So, in order to avoid this from happening, set an overflow:hidden on the element that contains your content, or else, avoid elements from overflowing.
NB: other mobile browsers also support the viewport meta tag since a while, so you'll want to test in those as well.
body { overflow-x: hidden; } also works.
Late to the party here, but I just had a similar problem where I had horizontal scrolling across an iPhone 5, the site was effectively showing as double the width, with the right hand half completely empty.
In fact, I just needed to change the viewport meta tag from:
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0' />
to:
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />
Adding the 'initial-scale' locked it down so that it only scrolled vertically as expected.
This will prevent any elements pushing content out:
body div {overflow: hidden ;} # media queries
Try this variant:
html, body{
overflow-x: hidden;
}