Not just zoomed, zoom in.
normal:
zoomed:
zoom in:
When there are many columns, he is very obvious. So is there any good hack?
Here's a link
I'm mentioning what this user said in sencha forum, and I agree with him on this:
This is a bug in Chrome that is reproducible outside the ExtJS framework.
If you load the following HTML code in your browser, the cells align neatly. If you use browser zoom, they don't.
The problem occurs when the cell width in pixels is floating point (non-int) after zooming. Chrome rounds the first-half cell widths down, and the last-half cell widths up.
E.g. if the calculated width is 24.3333px, the first two-third of columns is 24px, the last third of columns is 25px. So if we have 54 columns, at Column 36, we are off by 12 pixels, or half a column.
The ExtJS framework cannot do anything against this bug, unless Sencha knows a way to calculate the width AFTER zooming. I am not sure that it is possible to get the browser zoom level using javascript. However, I strongly believe that this is a problem the Chromium team has to fix.
I think there is still a workaround achievable through css. If you can, try using flex property to grid column in grid configuration. Calculate flex as = (given column width/sum of all column widths) and remove 'width' config at column level.
Flex actually sets width of each column in its CSS property after any layout change.
Related
I've noticed a weird issue with SciCharts on WPF and am trying to understand if the issue is something within our control or not.
I'm noticing, in particular, that the spacing between Stacked Column Series groupings is weird. If you load up the SciCharts v.4.x Example and look at the "Stacked Column Side By Side" example, you can see this. Simply go from having everything checked to unchecking "China." Every single other bar (despite that China is no longer selected, freeing up more margin around the groups) is now narrower, even though there is more space to occupy.
In my own usage, I have noticed that the spacing gets VERY unusual, despite the fact that nothing can be turned on/off. There are data points for everything and there is still a large gap, despite setting Spacing to Relative and 0.01 and the DataPointWidth to 1.0.
I haven't checked the v.5.x examples yet, but I know that the issue is showing up with our usage of 5.2.1.x assemblies.
Is there any other way of expanding or overriding spacing between groups? It gets terribly sad when we are showing 9 groupings (18 bars; 2 data points for each group, so 9 categories or groupings) and we have more whitespace around the bar groupings than the width of the bars themselves.
Thank you!
First thing I would suggest is to update. The latest official release is SciChart WPF v5.4 and SciChart WPF v6 is in BETA now to be released soon.
We have fixed hundreds of bugs over the years and Stacked Column spacing has come up several times.
In the latest version, there are properties to control Stacked Column spacing. You will need to check
StackedColumnRenderableSeries.UseUniformWidth: where true forces all columns to have the same width
StackedColumnRenderableSeries.DataPointWidth: where 0.0 - 1.0 controls the gap width
Finally, Stacked Column series require that all DataSeries have the same number of points.
I am dynamically loading data into my ui-grid, so I do not know the number of columns beforehand. My ui-grid is working properly as long as I do not set the minWidth of the column, but as soon as I set the minWidth, the alignment is disturbed. Data from the rows above is being displayed on the rows below. But when I scroll to the right, the data automatically aligns itself.
I have attached images as this is kind of confusing. I have searched a lot, but could not get an answer anywhere.
I'm not sure which version of ui-grid you are using (your styling looks different).
If you are on the current version, you should be able to use the auto-resize option http://ui-grid.info/docs/#/tutorial/213_auto_resizing which will resize the grid when data is first loaded. It will also resize when you resize the browser.
http://www.akaskyness.com/
This is in the early stages of development. I want this "cover" page to be non-scrollable, with the height of the white|black background adjusting to the height of the browser window. At the moment, when reducing the height of the browser window, the headers don't shift up proportionally and a scrollbar appears. I'm not really concerned about browser width at the moment because I haven't added any code for that yet.
I think I see what you mean - you want the <h1> and <h2> elements to shift vertically as the viewport height is resized, so that they don't end up off the screen (when it gets too short) and create a scrollbar.
In your current CSS, you try to do this using margin-top:17% on <header>. This seems like a logical approach, except something curious happens: the margin-top never changes, regardless of how you resize the browser vertically.
I'll be honest, this stumped me for a while, so I did some searching around about margin behaviour and found out this critical piece of information: "The percentage is calculated with respect to the width of the generated box's containing block." So the browser height is completely ignored in the calculation! If you resize the width of your browser, you can actually see how your headers move up and down on your webpage.
Well, that completely invalidates using a percentage margin to attempt to vertically align <header> relative to the viewport height. What now? Vertical alignment of elements is actually something lots of other developers have tackled in various ways. Here's a simple one that uses absolute positioning, by only rewriting the styles for <header>:
header {
margin-top:-3em;
position:absolute;
width:100%;
top:50%;
}
Here's a JSFiddle demonstration of this new CSS. Note that margin-top:-3em; is a bit of a guess on (half of) how tall your headers are, so if you don't want to hard-code that value, you'll probably have to look at a different approach for vertical alignment (this is just one of the easiest). Also, if you don't want it vertically centered, just change top:50%; to a different percentage value.
Hope this helps! Let me know if you have any questions.
I have a bit of a form to optimise for mobile (in a mobile.css).
I have no control on the html at all.
I'm trying to align them in a 2 columns layout and have the cell on the same row be equal height (if possible without js).
I tried with display table and flex but i can't seem to make that work.
http://codepen.io/zapatoche/professor/BcGmD
Anybody has an idea?
I've been playing around with Zurb Foundation to evaluate it's suitability for my next project. I stumbled upon a characteristic I'm not comfortable with when resizing the width of the browser so I'd like to confirm if there is any way to do it.
Say I have a grid with four images ('columns') per row. As I shrink the width of the browser window my natural expectation would be that the amount of images would shrink down to first three, then two and finally one image per row as the width reduces.
But instead what Foundation seems to do is shrink the divs as much as it can to keep the four columns per row and as it runs out of space to have four it jumps right down to one image per row directly.
This behavior to me is not logical so I assumed there must be a way to do it, but going through http://foundation.zurb.com/docs/grid.php I wasn't able to find a way to do it either with divs or block grids.
I sort of assumed this would be 101 functionality of responsive grids, but I don't have much experience on these css frameworks. So do I have to start writing my own media queries instead to achieve such gradual decrease with amount of columns per row?
Thanks!
I was also having same problem and that's how I found this entry.
I know this has been answered already and solved but I just wanna share my answer.
Block Grid works for me. http://foundation.zurb.com/docs/components/block_grid.html
See Advanced section
In my HTML, I just added the classes to specify how many items I want per row on different screen sizes, like this:
<ul class="row portfolio small-block-grid-1 medium-block-grid-2 large-block-grid-3">
<li>
<img src="images/sample1.jpg" width="640" height="480">
</li>
<li>
...
</li>
</ul>
Here, I want 1 item to be displayed in small device, 2 in medium, and 3 in large devices per row. I enabled the "foundation/components/block-grid" in _app.scss. And it worked! :)
Foundation does not force the content to be responsive or fluid, but the grid itself is. It's fluid down to a certain point where the 12 column grid collapses to the mobile grid. (assuming default grid setup)
However, you can get the behavior you are looking for by simply making your all images floating left inside a column.
Like:
img {float:left; width:24%;}
Then try adding min- and max-width to fit your needs.
img {float:left; width:24%; min-width:100px; max-width:300px;}