Is there a way to have the container containing an html widget (qx.ui.embed.Html) scale to the proper size so it doesn't cut off some of the Html?
Here's a playground example:
http://tinyurl.com/a4twfdc
Notice how the Three and Four get cut off.
The only way I could fix this was to define a minHeight and minWidth for the container, but my html can vary in size, so I end up with a large blank area or not enough room.
The only way I could think of a fix is to render the HTML prior into a helper div and take the offsetWidth / offsetHeight and apply it to the embed as well. That helper DIV could be out of the view port at e.g. -1000 / -1000 and you can set the HTML as innerHTML. Maybe that could solve your problem for the initial size. But as soon as the content of the embed changes dynamically, you have to redo the calculation if you can.
Related
So I have a graph and table that show results according to the number of flights, but I want their size to be automatic, but right now if I don't give the div that is wrapping them together a specific size, they will end up collapsing. See the attachment enter image description here
The div container cannot be resized by charts. All charts as a default fir to the div container. It means that you should define the div size by CSS manually, for example, 100% of the parent's element or specific size in px.
Inside the div, you can adjust the table and chart manually.
In the comment below you can find the sample of a table and a column chart. Every one of them is 50% height of the div container. And the div container occupies 100% of the body.
I am currently trying to build a slider on my page. The slider slides between different content, which means each slider has a different div height. This makes it hard to use animations since I need to use position:absolute; for those (to slide left/right). To work around this, I added a parent container with a position:relative; and used this directive to get equal height on my divs. However, the problem I am facing is that it only gets the height of the first visible div. Meaning it will work fine if the div with the highest height is shown first, but otherwise it won't work (since content will come outside of the slider).
How can I adjust this so that the equalizer gets the height of each div, and gets the one with the highest value in height, and uses that instead of the only visible one?
Additional info:
Using ng-show to show the current slide, and css3 animations.
The solution was pretty logical. I'm not that great with directives. But after some researching I saw that this directive had a function called equalize() - meaning I could only call EqualizerState.equalize() once I had added EqualizerState to my dependencies.
Sample code
I have an element (most likely a div) that might be affeccted by the window size (or not). The user can pick any image as the div's background-image and I need to check if that image is too big and if it is I need to toggle on background-size: contain. I am not sure how to grab the size of the background image onload and how to compare that with the div. I think this requires a custom directive but I did not find any similar example.
On a sidenote, why does the image in the jsfiddle remain the same when the url is changed?
I need to dynamically change the header row height of an ng grid, depending on which column headers need to be displayed. Some columns have a very long header and I want the column name to wrap so they don't need to be excessively wide. I also don't want a lot of blank space if I initially set a tall header height, but then don't need the space if those long column names aren't displayed.
The issue is I cannot get the headerRowHeight to dynamically change. It took some time to realize that I cannot even initialize headerRowHeight using a scope variable the same way as the other gridOptions (see line 23).
See plnkr
The reason this doesn't work is that ng-grid uses absolute positioning under the hood. Grid Options are only fired once, and then the heights are set in the html after that using style= on the html dom node. (THIS IS AWFUL!) They even set the style manually on all of the underlying header dom nodes.
The other avenue I thought of was trying to redraw the grid using ngGridLayoutPlugin. I played around with this for 30 minutes with no luck. You could try manually redrawing the page itself. It looks like ng-grid is not very good at redrawing the grid, and they've made optimizations specifically for updating data, but not the styles.
The 3.0 beta unstable release looks like they've made a lot of changes, and you'll be able to do what you're trying to do easier... however, it is not ready for production. See the header cell class conditionals in this example: http://ui-grid.info/docs/#/tutorial/115_headerCellClass
I had a hell of a time trying to get ng-grid styling to do my bidding at my last job. At a certain point, we were ready to toss it because it was too restrictive. Good luck.
Use this in your CSS.
.ui-grid-header-cell-primary-focus {
line-height: 2.428571;
}
Autoheight : false seems to have no effect. Even if it did work it doesnt sound like its what I need since one section could be really long and the fololowing really short and I wouldnt want the two sections with the same height.
The div in which the content is displayed can be of variable height so I cannot use a fixed height. I have tried most of the options and none of them seem to have the effect I want but I think I am missig something as this sounds like it should be a common requirement since scollbars in the accordion look rather horrible.
Have you tried to explicitly set the Height and Width of the Acccordion to the content? For example load the content into a hidden div and then get its dimensions. Then resize the Accordion and load the contents to fit.
Use this line instead:
heightStyle: "content"
autoheight : false
It is auto with a small a