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.
Related
I am hoping to use an image of a map that is divided up by regions as a way to click on a region and it takes you to a page of locations within that region. I tried to divide the image up and making the rest transparent but the whole thing is still clickable. Does anyone know a way that I would be able to achieve this?
This is what the whole image of the map looks like
You can do this without any SVG or JavaScript just using the HTML <map> tag.
Allows you to define clickable regions in the image and associate a link to each.
Ok I left a few comments under your post but I think I can provide a quality answer to close this out.
Take your image and either move it to photoshop/gimp/etc. and convert it to an svg. This will allow you to create each path (country, county, however you want to break it down) and you can export as svg with the path names as the layer names you gave them.
You may not be a photoshop expert...Neither am I. I took your image and pasted it into VectorMagic.com and it was a little big but after a minute it had converted it to an svg for me.
Once you have your SVG it can be placed in the html with the <svg> tag.
You can then give each path a className or id so that you can target it with css. You may have to read up a tiny bit on how to target svg paths with css but its pretty easy.
You can add color change on hover, fade on click, what ever you want to add is possible.
To make sure I'm answering the question you asked. If the whole image is clickable if its an SVG, you are targeting the <svg> when you should be targeting the <path> tags that are children of the svg.
Lemme know if I can answer any questions. This is definitely something everyone doing design should at least play around with because its fun and rewarding when you get it to work the way you intend it to.
I once had a similar issue and used a js library called raphael.js which uses paths to render a dynamic svg and provide interactivity
I struggled to find any current refs to this but here is a tutorial
https://webdesignerwall.com/tutorials/interactive-world-javascript-map
https://cmsdk.com/jquery-plugins/building-an-interactive-map-with-raphael.html
sample I quickly knocked together
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Building an interactive map with Raphael</title>
</head>
<body>
<div class="wrapper">
<div id="map"></div>
</div>
</body>
</html>
https://codepen.io/bar8s/pen/abEBWYx
I am beginning a landing page for a client. I have made it responsive, but when I open it up on a mobile phone, it pops up large and cuts off the page. I have to pinch the screen and zoom out in order to get the full content. How can I code it to where it is already just 100% there without having to zoom out?
Whether use CSS Media Queries or Boostrap framework which will provide you with predefined classes to add to your HTML elements in order for them to adapt on different screen sizes.
Double check that you haven't hard-coded widths for any images, divs or other elements on the page. Instead use relative sizes when you can, eg width: 50vw; . Setting max-widths is sometimes necessary as well, eg max-width:100%;
As per the earlier suggestion from Blueware, media queries will help you set styles based on the viewport or window size.
Also check that you have included a viewport meta tag in the head of your page:
<head>
....
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
If still no joy, post some code or a URL.
Good luck!
Please look at this.
When you right click the words "Basic usage"(seen at top of the page, first block), you can see below html:
<md-toolbar class="demo-toolbar md-primary">
<div class="md-toolbar-tools">
<h3 class="ng-binding">Basic Usage</h3>
<!-- ...other html -->
And when you select "md-toolbar" from above code in elements panel, it will show that it has background color of some blue. And it shows style source as
<style>...</style>.
When you click it, will show it like(click and see please). But generally, it either gives filename.css or says index if css is embedded in html file. But this seems different.
So, my question is there anything "angular/material" with it. Whats going on here ?
From Theme/Under The Hood docs
Each registered theme results in 16 <style> tags being generated.
It's their way of translating the $mdThemingProvider config from javascript to css
I am currently trying to implement the following editor.
Following plunkr. Why is there an input field underneath the editor?
<div text-angular data-ng-model="htmlVariable">herro</div>
You just seem to be missing the css file. Couldn't find a link to it so I just created a new stylesheet in plunkr and copied over the css.
<link rel="stylesheet" href="textAngular.css">
http://plnkr.co/edit/bZ7HQqNEcDIuroWtxkfM
You are missing the editor's css file.
Edit: Link to the file, the class .ta-hidden-input hides the input element
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.