Imagine I wish to have an area of my screen (eg. a box that is 500px by 500px) contain my diagram. If my diagram has a width or height large than this, I would like scroll bars to appear to allow me scroll the diagram. I tried to achieve this by placing my diagram within a sized <div> element but it seems that the diagram ignores this and it simply "spills out". Has anyone tried to achieve this and may be able to share a recipe?
By using the Chrome developer tools, I see that I do indeed have a <div> that is 500px by 500px which appears to contain an <svg> that has a width of 1082 and the whole width of the <svg> is shown even though the <svg> is contained withing the <div>.
When a <div> is created to hold the diagram and it is given a width and height, set its overflow css property to scroll. For example:
<div style="width: 500px; height: 500px; overflow: scroll;" />
See also this Stack Exchange answer that was the core of this jointjs solution about adding scroll bars to an <svg>.
How to get ScrollBars in SVG?
Related
I'm working on a visualisation involving stacked histogram with really thin bars.
The problem is that white background introduces unpleasant visual vibration and make bars somewhat hard to interpret:
http://i.stack.imgur.com/GN0XD.png
What I'm looking for is a way to set a specific colour for chart background. I've tried to set it for SVG element like so:
svg {
background-color: #ccc;
}
But (obviously) it doesn't work properly:
http://i.stack.imgur.com/ctbYo.png
How do I set a background colour so that it'll be exactly the same shape as a chart?
I managed to come to this quick-and-dirty solution. Just adding a one pixel pseudo-shadow to the right of each bar:
rect {
-webkit-svg-shadow: 1px 0px #ccc;
}
Produces this:
http://i.stack.imgur.com/xSVOD.png
How is the chart being instantiated? by using svg { background-color: #ccc;} you are setting the background color of all svg elements to #ccc (except where over-ridden), so if your chart is a child of another svg element with some margins it would explain why the alignment is no good.
One strategy to go about fixing may be to use your browser's debugging abilities (ctrl+shift+i to bring up 'developer tools' in chrome) to take a look at the DOM elements and try to narrow down which ones cover which areas of the graph vs the areas of the graph plus the margins on the bottom/left. not sure about other browsers but chrome is useful in that if you hover over an element in the html document it will 'highlight' that element in the browser. This might help you narrow down which objects specifically need to be stylized.
I have noticed that all my table borders when viewed in IE10 are showing up as dark grey / black, no matter what colour I set them within the HTML code.
How do I overcome this? Why is it doing it? The borders are appearing the correct colour in all other browsers.
Here is an example - http://www.xplore.net.au/programs.htm
Note the ugly black border which is actually set at:
<table width="950" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#dcdcdc">
IE10 no longer supports the bordercolor HTML attribute. Using presentational attributes on markup, such as tables, is deprecated, and sees less use these days. To guarantee things work in the future, you should consider switching to styling with CSS.
In this case, to get it working you could remove the border and bordercolor attributes, and add the styling via CSS instead.
See this example showing bordercolor no longer working in IE10, and the equivalent in CSS:
http://jsfiddle.net/kfxdh/
#css {
border: 3px solid green;
}
Note that unlike the border and bordercolor properties, this does not put borders around the individual cells. if you wish to emulate that, you could do the same by adding a border to the tds:
#css td {
border: 1px solid green;
}
See http://jsfiddle.net/kfxdh/1/
In IE10, child elements like tables inherit the color from parent tags like body tag. I also had the same issue in which my table borders are coming as RED, but when I removed the color attribute from BODY tab it worked for me.
Please try.
I am applying a border radius on a select element that has a background color.
Instead of following the curvers of the border, the background color overlaps the curves and appears in a square box.
I can't figure out what css property I must use to solve this issue.
background-color: #FF0;
border-radius: 24px;
border: 4px solid #F09;
Here is the jsfiddle: http://jsfiddle.net/JsgnR/
thanks for your help
My feeling about this is, to get this to work in every common browser, you will have to rebuild the select with JS ... unfortuneatly styling selects with css like a divbox still not is possible as you would expect. In latest Firefox your code looks nice in browser, because firefox decided to let the border overlap the select, in latest opera the border will be underneath the select, because they decided to.
you see that on the options , try to style them via css, you are not able and they look ugly
You can wrap <select> element in <span></span> and add the required properties to css for
This solution: http://jsfiddle.net/JsgnR/5/
I have added CSS box-shadow to <img> in a blog post. The imgs have max-width:100% set so that they fill the column when it is resized.
The shadow spills out into margins due to box-shadow rendering outside of border in the CSS box model. I want to give the images some extra margin so that the shadow sits inside of the column. However if I use margin this will make the imgs wider than the column.
Is there a nice way to make the shadow sit inside without affecting the width as above?
Thought of wrapping in another element but it's a shame to do that.
If I had used solid borders I could have used box-sizing:border-box; to achieve this but it doesn't have any bearing on box-shadow?
How about max-width 98% or alightly lower and then the shadow should be just inside?
I need to make a box on a canvas (a ), outside witch elements contained in it are invisible.
Similar to overflow: hidden; in css.
Note: There are draggable elements inside. I need to be able to drag them but if they exit a box (something like a camera focus) I need them to not be shown (or parts of them if part is inside, part is outside), as I said exactly like overflow: hidden.
Note 2: I can't use other elements to cover the area around the box (please don't make me explain why unless is absolutely necessary (I don't know how to say it short so I'll add pictures and lots of words) :) ).
Have your draggable elements be children of an <svg> element and set overflow: hidden on it. An <svg> element can be a child as well as the root element. A <g> element won't do as it has no explicit width/height and will expand to the size of the contained children.