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?
Related
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.
Are there any way to make grid to not show over grid children?
I mean, I want grid lines to be visible, but when a children has rowspan or columnspan over 1, I want it to hide the grid lines.
I tried setting the children (it's a label) opacity to 1 but it didn't work.
Any help will be welcome.
No there is not. From MSDN:
Only dotted lines are available because this property is intended as a design tool to debug layout problems and is not intended for use in production quality code. If you want lines inside a Grid, style the elements within the Grid to have borders.
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.
I'm a developer who's trying to get the hang of Blend. I've always used Blend to mess with control templates and such, but I'm trying to get the hang of using it for basic UI design, since I figure it's probably a bit faster than typing the XAML up manually in Visual Studio.
Right now I'm just trying to create a basic Grid, but I'm seeing two default behaviors that I'm hoping someone can show me how to change.
1) When I hover my mouse outside of the design surface, I see the temporary yellow line to show up, where the new Grid Column / Row will be when I click. The problem is that the newly created rows are set to heights like 0.2297* How do I get Blend to attach regular heights, like 250?
2) Ignoring 1), once I have some rows and columns, when I drag a button, or combo box, etc, onto one of the cells, it drops it exactly where I release the mouse, while adding some large margins to position it there. Is it possible to tell blend to just drop the control into the cell, and leave the margins alone?
Grids are awesome but it takes a bit of play to get proficient at working with them in Blend. Here are some tips to get you started (I cover this in detail in chapter 4 of my book).
1) When you use the snap lines to create rows and columns Blend automatically makes them relative (Star) sized, which is the behavior you are seeing. To change the row/column style to fixed (Pixel) sizes, click on the Padlock icons to the left and top of the desired rows and columns. Then, either edit the values in XAML or you can click near (but not on) the padlock to select the row or column. This will open the sizing properties in the Properties panel.
2) The short answer is "No". Blend will always add Margins when you draw the element in a cell unless you take care to draw them to the borders. This is too difficult and time consuming, so I just make sure I draw it somewhere inside my target cell. Now I can right-click the element and select "Auto Size > Fill" and the element will fill up the cell: no Margins, Width and Height set to Auto, and Horizontal and Vertical Alignments set to Stretch. [FWIW, addressing this is my number one feature request for Blend.]
I hope this helps.
To answer point 1) Blend is creating proportional grids so that the columns remain the same relative widths when you grow or shrink the grid rather than absolute grids. So if you want absolute grid widths you'll have to go in and edit the values by hand.
I find that it's easier to create the basic form in Blend and then tweak the values in the text editor - either in Visual Studio or Blend itself.
As for point 2) I've just tried this and as long as I click inside the column/row on the grid when placing a button it adds it to the correct column/row of the grid as expected. Select the button and then just double click inside the grid - this should add a button of default size where you clicked, but in the grid. (It would be much easier if I could see what you were doing).
Im having 17 columns of datagrid in Silverlight. How can we print all columns in datagrid to print. Since there are more noumber of column, Im enabling Horizantal Scroolbar ,so tht user can scrollto lastcolumn easily.
During printing of silverligt datagrid, i could see contents which are shown in Silverlight Page , anything beyond scroll bar ,those images are cropped and not printed . Any solution for print all columns in datagrid even though beyond the screen width.
One more question, if i have datagrid with horizontal scrollbar enabled, datagrid.actualwidth always give 768 px but not from first column to last column width size
_mahens
If you can wait six months for Silverlight 5, then you can completely control the print layout and format it exactly the way you want. Until then I'm not sure if there is anything you can do.
You basically have 2 options here.
Shrink your datagrid using Scaling to make the whole grid fit on your page
Slice the grid into 2 grids (first half of the columns in the first grid, and the other half on the other), then print this as 2 separate pages. Of course you would have to take into account the height of the grid and print additional pages there as well if required.
Difficult? Yes, but achievable :)