Using M. Bostock's example of focus + context, I'm trying to implement date selection via brushing: http://clflwd.org/lake-test.php. It's working fine in Chrome and IE, but in Firefox the path overflows the chart during brushing.
See here --> Insane CSS Clip Path Bug on Firefox
Basically, firefox thinks any clip-path style you set in a css file with a url#id is referring to an #id within that css stylesheet, rather than within your html document
If you add it as an inline style or attribute direct to the element it works.
Related
I'm using the "Progress circle" widget (version 2.0.0) in Mendix Studio Pro 9.2.0, and I would like to individually change the color(s) of each one of my progress circles, primarily the part that is shown in blue by default. By looking into Chrome DevTools, I found that the attribute stroke might be storing the color, but I'm not sure. Adding stroke: red in the Appearance > Common > Style form didn't work. On the other hand, adding background: red did have the intended effect of changing the background of the progress circle.
Can anyone help? I'm quite new to Mendix, so any help from you would be greatly appreciated.
By going into the documentation i found the source code of the widget.
Check this link: https://github.com/mendixlabs/progress-circle/tree/master/src/ui
In the ui folder there is a theme.scss and _variables.scss in which the developer defines the variables which drive the colors or theme of the widget. You could take some hints from there.
I am not suggesting to rebuild the widget but you can certainly do so by downloading the widget (.mpk gets downloaded) and then change the extension to .zip then change the source code.
Or since you can already inspect the DOM of the widget you can do: give a class to the widgets root DOM element. and then using cascading CSS selectors you can drill down to the element which affects background.
I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure.
http://goo.gl/v1GVWk
if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck.
Please help me. ..
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.
I have a map where clicking an area to zoom in works in FireFox, but not in Chrome, Opera and Safari.
The map can be viewed at http://tcan.ca/content/tcan-neighbourhood-members
Anyone have suggestions about what can be causing this?
You can't use transformations directly on the <svg> element in webkit -- and even on other browsers, it won't always do what you expect.
A top-level <svg> element is positioned on the webpage as an HTML object (similar to a <div>). Transformations that apply to it are interpretted as HTML/CSS transformations. The CSS transformation syntax is still not finalized and webkit browsers only support a prefixed -webkit-transform version.
Rather than deal with multiple transformation syntaxes, add a <g> element inside your <svg>, append all your graphical content within the <g>, and then declare your SVG transformations on the <g>. It will work in all the browsers that support SVG.
I am using fonts in an embedded SVG file rendered in Firefox (v26, "Nightly" and future versions). Other than the two fonts serif and sans-serif, what else is available?
My SVG is generated in Adobe Illustrator. Any font-family names I specify only render correctly in Safari and Chrome and I cannot use outlines as a workaround, as I will be annotating the SVG with dynamically-generated label text.
Other than using outlines, what is the process for annotating SVG documents with custom text elements, such that they will render correctly in Firefox?
On making your SVG render pretty fonts
It is entirely possible for Firefox to present SVG text in a custom font. For example, it can be done as follows:
<svg>
<style>
#import url(http://fonts.googleapis.com/css?family=Varela+Round);
text { font-family:Varela Round, sans-serif; }
</style>
<text y="20">I will appear in a custom font</text>
</svg>
This fiddle demonstrates the usage to some extent. Note that in jsfiddle the CSS is included as an HTML style sheet, not directly in the CSS.
The following can be used as a data URL, i.e. you may copy an paste it directly into the address bar. It demonstrates using #import from the SVG directly.)
data:text/html, <svg><style>#import url(http://fonts.googleapis.com/css?family=Varela+Round);text { font-family:Varela Round, sans-serif; }</style><text y="20">I will appear in a custom font</text></svg>)
(Of the current popular browsers, only Firefox supports data URLs in the address bar. Also if you change the data's MIME to image/svg+xml it won't work in Firefox.
In a comment on the previous answer to this question, Robert Longson also shared a link demonstrating an imported font using <link rel=stylesheet. Note that some of the fonts on that page are rejected by Firefox for technical reasons which I don't understand. However, almost all of them work.
Regarding the politics around SVG Fonts
SVG Fonts is a branch of the SVG spec which deals with defining your font in an SVG file. This is totally different to using a font in an SVG file, which I have outlined above.
Mozilla's position on the SVG Font spec, as I understand it, is that the only benefit to SVG fonts is that you can define your font by hand in a text editor. Others have expressed similar opinions. This is why Mozilla have concentrated on WOFF.
The current state of importing web fonts is such that, to achieve cross-browser/device compatibility, you have to provide multiple different font formats. This is unfortunate, but hardly the end of the world in my opinion.
Unfortunately for you, Mozilla has indefinitely postponed SVG font implementation to focus on WOFF. In fact this bug was even labeled on Bugzilla as "RESOVLVEDWONTFIX". Here is the link for MDN and the link on Bugzilla.
Admittedly I do not know enough about SVG Font to know if the CSS #font-face element will work and I also saw reference to Openfont.
We need to view some very large (7200+ pixels) SVGs. Every SVG viewer I've found, including modern web browsers, does not allow us to view the entire image. There aren't any scrollbars, and we do not have the option to zoom.
Is an open source / free application available that could help with viewing the entire SVG image? Thanks!
If you really do mean SVG, Inkscape should work.
You need to add viewBox attribute to the <svg> element and wievers will scale the image to the available viewport.
<svg viewBox='0 0 7200 7200' ... >
You may want to try Opera SVG Viewer to preview multiple svg files at once.
If you use a custom css browser extension such as Stylus, you can set up a CSS style for overflow on the root element, which should be <svg>:
:root {
overflow:auto !important;
}
This is pretty harmless for any html page but you can have it only apply to .svg urls via the url regex filter:
^.*[.]svg$
Now with this in place, opening an svg in a new tab will apply the style and allow you to scroll around. Zooming in and out should automatically adjust scrollbars.