I'm trying to do something but I don't know if it's actually possible.
This is what i would like to do:
I want to create the same mosaic image with defined columns and rows for all screens (CSS Grid template).
I explain:
I have a mosaic image with 5 columns and 5 rows (so 20 images).
Whatever the screen, I would always like to keep this same number of columns and rows. What would change is the size of the image, the smaller the screen, the smaller the squares of the mosaic and therefore the images are very small and vice versa...
Is it possible to do this or do I have to create a specific template for each screen?
Thank you for yours answers.
Related
I want to get a row and column shape as in the image, and at the same time I want to get a suitable image according to mobile and other devices, this is the shape I want, how can I get this grid system?
This is the image I want to get
I see the Compare Two Images from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_compare. And, I have made it to displayed it on multiple rows and columns but the images are overlapping when showing on a smaller screen. How do I make it a responsive grid?
I have a series of buttons that I want to appear in columns at the bottom of my QML page. The number of columns across should depend on the width of the window, as the window width increases I want more columns to be added. (And fewer rows as a result as components are pulled up to the previous line)
This is sort of like a Flow component, but I want the items to appear in columns, evenly spaced across the page, in rows and columns (columns centered vertically, at the bottom of the page). Sort of like GridLayout.
I can't figure out what QML component(s) to use to achieve this.
I think what you're looking for is a GridView. See the layout documentation.
I'm not positive, but based on your description I think you would just need to set the flow property to GridView.FlowTopToBottom.
I am new to html,css, bootstrap.
Is there anyway we can assign different number of columns to a div based on resolution range for large device?
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
But can I assign different number of columns for widths between 1200-1300px and 1300px-1400px ?
Please have a look at the below image. This is how the Ui should look like. On left hand side there would be a form with four columns- 1st and 3rd column contain labels and 2nd and 4th column contain input controls.So each of these column is assigned col-lg-3.
Now the issue is , when width is around 1250px, the left hand side form looks fine(but it needs 6 columns) but in that case grid is not able to see all the columns without horizontal scrollbar.
But if the resolution is around 1400px, then distance between labels and controls are too much and also there is a lot of empty space around the controls within left hand side form. So I was looking for a solution where I can assign the number of columns based on resolution
You can use Bootstrap v4 to achieve it.
For more information:
https://getbootstrap.com/docs/4.0/layout/grid/
You can create media queries to affect the current columns at different screen widths. Or you can create a new set of classes, like .col-xxl-2 and give them a different percentage width, like 20% and put them in a media query targeted to the size you want. So then a div could have <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4 col-xxl-2"></div> and so on. I don't know if this is really necessary though, constraining it to only a 100px difference (1300-1400), because lots of computer screens go beyond that size.
Edit
If you add form-inline to your form and wrap your label + input inside a form-group, it should put them on the same line with proper spacing, no matter what the size.
I am using ItemTemplate ( that is ViewCell ). I got know about the Orientation article in Xamarin documentation but there is no point about handling ListView orientation.
Hope to get the answer
Screen shots
http://i.stack.imgur.com/lkMvC.png
http://i.stack.imgur.com/5PrJj.png
As you can see from your screenshots, this is not an orientation problem, your listview IS the full width in both cases, what is quite possibly wrong are your layout options.
Can you show us your item template definition?
You are using a grid inside the ViewCell?
In that case, first make sure the grid's horizontal options are set to FillAndExpand, then check the grid column size definition.
Can you also show us the grid's column size definitions?
If they all have fixed sizes assigned, then they will always be that size, no matter how much unsued space there is.
There are 2 ways to make them use more space.
If possible, you should use the "star" sizes. This is where you give your columns sizes as portions of the available space.
If you give your first column the size 1*
and the second column size 1*
they will both take exactly half of the available width.
You can use any other numbers to select portions, such as three columns with sizes 5* 3* 1*
Which would make your first column 5 times as big as the third, and the second column would be 3 times as big as the third.
Again, in total, they will take the entire available width.
The second column sizing option is to use "Auto" sized columns, which will size the columns according to the elements inside them. Whatever size the largest element inside that column (in any of the rows) takes, that is the size that column will have.
To take the whole screen width in this case, at least one of the columns content should have "AndExpand" on it's horizontal options.
This is somewhat easier as it will automatically size the columns and you just take care of populating them properly with content, but be wary as this approach is significantly slower.
Finally, if you experience performance issues, consider implementing the ViewCell with an AbsoluteLayout. It can be a bit more pain to set up, but should work faster than grid if you have a bunch of rows inside the list view and a bunch of data in each row.