To avoid messing with truncation or rotation of axis labels on row charts, I'm trying to place the label over the row itself where there is lots of space. I've managed to do the SVG transform to move the label over, but it is below the box itself in terms of z-index.
I cannot use CSS z-index to re-order SVG components, and the boxes are all in the same <g> as the axes themselves (but not grouped in their own child <g>) which seems to make re-ordering difficult.
Any suggestions on how to get the labels above?
dimple renders most of the elements into a single <g> element as you have noted. Since all of the elements are simple dom elements you can use something like jquery to remove the elements and then re-add them after the rest of the elements in the <g> since svg elements render in the order of the dom elements.
see https://api.jquery.com/detach/.
I've got a pull request for dimple where I add more <g> elements to hold things apart.
you might do something like
(pseudocode)
label = $('svg label').detach();
$('svg').append(label);
This should put the label at the end of the svg contents which means it would be rendered over the rest of the content.
Related
I need to render many text items on the page by grouping them into several blocks. To group items to blocks I need to kno number of lines each text item will have to calculate how many items each block can take.
I also know exact width of eack block before render but I don't know the height of each text item.
How can I figure out the amount of lines of each text item before render to know how many of them can be put in one block?
Previously we used canvas to measure text of each item and calculat number of lines with the help of measureText() method. But what we found out is that canvas does not know about word-break property and that we don't break words when rendering text of the items. Therefore canvas calculates 2 lines instead of 3 and so on. The calculations are wrong.
Is there another way to measure number of text lines before render in Vue.js or vanilla JS?
Generally speaking, no. There are hundreds of factors that could affect the dimensions of an element such as fonts installed, accessibility settings, browser extensions, browser settings, viewport size, device pixel density and browser peculiarities in rendering.
The easiest way would be to render the items in a way that they are not visible to the user, but still on the page, and then use Javascript to get the calculate dimensions of the element before then making them visible.
I'm using a v-slider in a Vuetify context. The component has a message area that takes some space below the slider and makes it impossible to align the actual slider (the "line") in the vertical center to line up with other neighbouring components.
There seems to be a number of way to customize the message, but how do I get rid of that area completely? There will never be any messages to display there.
I've now resorted to adding a padding on top of the slider, align the components and then add a negative top padding on the group. But that seems just like a hack that I'd like to avoid.
Add the prop "hide-details" to the slider
<v-slider v-model="volume" label="Volume" hide-details></v-slider>
You can find all the possible props in the API-Section for the sliders.
I'd like to position bootstrap elements - buttons or other, at a given horizontal start position on my page. The exact horizontal position should vary dynamically. It seems html (and to some extent bootstrap) wasn't exactly cut out for this but is there a good way to reliably accomplish that?
My best shot is fiddling with its horizontal margin. Is there something even more straightforward, that will bypass the need to consider all other elements in its column and can directly use the desired height regardless of what's else in the column?
I have two charts on a page, their codes stored in different files. What Im trying to achieve is: When I click on first chart, the second should change its size (lower height and width). Function that should do this is in yet another file (but I think it´s not the condition)... I tried to change the width of containing div, but it only cuts the chart. Then I tried to change the width of that div and then to load that chart again...no result.... Is it even possible to do this?
Use setSize() function.
For example:
chart.setSize(newWidth, newHeight);
I'm working on a Firefox extension, and am having problems getting relative constraints on the width of elements in the sidebar. For example, I want a description element in the sidebar that will always be as big as the sidebar when the sidebar is resized, and has text wrapping accordingly.
If I put a description in a box with a fixed maximum width, it will wrap correctly, but I can't get relative widths to work correctly using css. If is set the max-width to be 100% in css, it seems to just ignore it and the text will be on a single line and will overflow the sidebar. Any suggestions on how to put relative width constraints on a box in XUL so that text will wrap correctly?
It sounds like setting maximum width isn't what you really want. Have a look at https://developer.mozilla.org/en/XUL_Tutorial/The_Box_Model, setting flex attribute would be the right approach to make an element fill all the available space (typically flex="1"). The corresponding CSS property would be -moz-box-flex: 1.