I want to have fluid layout for my view in a windows store app.
In a new page template you have a Grid which has a row set to fill the screen after the title at the top of the page.
So I have my content to enter into this grid row. My content is going to be a mixture of controls (images, text, vertical listview, maybe another gridview) but it isn't a single grouped collection that I can bind to a single gridview.
The point I'm trying to make is that I want my horizontal width to be more than that of the page, yet I want to size things fluidly which means relative to a single page height / width.
Ideally I don't want to have to specify hard coded widths for controls as I want this layout to work for as many different screen resolutions as possible. That being said, I imagine I will use Min / MaxWidth and heights to make sure items aren't too big or too small.
What approach should I take?
EDIT
Hopefully the following image would better describe what I mean.
The first image shows a (grouped) gridview that automatically will expand horizontally as it requires. This would work well but the controls I want to add are not grouped / related to each other.
The second image is what I am trying to do, which is to have a number of unrelated controls in a window but have them scroll off the side of the page horizontally. I can do this if I give each control a fixed width but I want to try and make it more flexible than that if possible (using min / maxWidth but not fixed values for the widths themselves).
Use star values in grid. Like:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
...
and use ViewBox as the top container. ViewBox will scale all the content to fill the available size.
Related
I was wondering if it's possible to change the order of the boxes when the window's size is reduce. For now, I have this:
Big window
And when I reduce the window's size I got this:
Small window
but what I want is one under the other like this:
1
3
2
Thank you !
Looks as though you want to employ breakpoints in your CSS. Check out this MDN docs page for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/#media
Essentially, you set width characteristics and style accordingly. This is essentially as close as CSS comes to being a logical programming language (aside from animations).
Playing with flexbox characteristics such as flex-direction: column/row will decide what direction the elements in a given container are displayed.
I want to set up a certain CSS layout described by the following:
it is table-structured, so there are a number of rows each having certain amount of cells; cells borders in different rows possibly do not align;
it is fullscreen; not like occupying whole device display, but rather using all the window space present - the window height should be divided in rows and its length should be divided in cells (full-window would be a more precise term)
it is adaptive; meaning, heights and lengths are given as percentage from window dimensions; this also applies to margins, paddings, etc.
More accurately, I am trying to make a web-chat application consisting of message area, list of online users, text input and "send" button. I want each of these components to have space of certain (relative to window dimesions) length between them and between window borders and components adjacent to them (that is, margins). I want this layout to persist precisely after zooming or resizing the window.
I do realize that this could be achieved with Javascript (which I am capable of), but I assume that would be ugly and less efficient, so I would like to use CSS (if possible).
So far I tried:
marking up the window with inline-block wrappers containing the actual visible elements; didn't really work because setting wrapped content's width and height to 100% results in them expanding the wrappers (regarding borders and margins), which ruins the layout instantly; I understand I could try 98%, 97.5%, 97.2%, etc. but this is not precise so it really bugs me
using floating divs (same as above)
using table, table-row and table-cell divs; did not satisfy my requirements because only absolute values work this way
I am really a newb, so I might have missed a number of obvious points here.
Could you use the vh and vw measurments,
they can be used like this:
height 10vh;
width 100vw;
this would make a row that's 1/10th of the screen tall and 100% wide.
Okay, using Javascript looks like the only reasonable option here.
I'm trying to make a two column layout with short lists of text on the left and photos on the right, like this...
LIST IMAGE
LIST IMAGE
LIST IMAGE
When viewed in a narrow browser window or on a mobile device, I want the images and lists to alternate, like so...
IMAGE
LIST
IMAGE
LIST
IMAGE
LIST
I figured I would just put the items in alternating order in the HTML and then float the images to the right at larger window sizes. This looks good for the mobile view, but the images line up with the headings in a weird way at larger browser window sizes, as you can see here:
http://allgoodeatslocal.com/links.html
I'm not sure how to do make this happen, other than having separate layouts for the two sizes...separate left (all the lists) and right (all the images) divs for full size viewing vs. alternating lists and images for small, mobile viewing.
Any better ideas?
You can use the media query, #media, to achieve this:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Set a media query for a smaller resolution/screen and set the width of the list and image div to 100% of the container and they should stack.
So, here's my situation :
I've built a website using Twitter Bootstrap.
The main design - among others - consists of a left sidebar (span3) and the main content (span9).
Now, I'm trying to fit a 728 x 90 AdSense Leaderboard ad in the span9 block and - guess what - I noticed it's slightly bigger than the available block.
So, I'm thinking about re-sizing the whole griding system (= increasing the grid column width by some pixels).
How should I go about it? What if I go and Customize? Which variable should I edit, so that the alternative CSS remains a drag'n'drop replacement for the existing bootstrap.css?
And, last but not least : will it work without having to tweak 1001 different CSS options?
The three variables below control the gutter (spacing between columns) in the Bootstrap grid. The defaults are shown below (taken out of variables.less. Make these values smaller to make the columns (span*) themselves wider.
#gridGutterWidth: 20px;
#gridGutterWidth1200: 30px;
#gridGutterWidth768: 20px;
The fluid grid calculates it's values from the above variables too:
#fluidGridGutterWidth: percentage(#gridGutterWidth/#gridRowWidth);
#fluidGridGutterWidth1200: percentage(#gridGutterWidth1200/#gridRowWidth1200);
#fluidGridGutterWidth768: percentage(#gridGutterWidth768/#gridRowWidth768);
I am new to Div based Page Layouts. My questions is should we design div based page layouts using percentage or fixed pixel?
If percentage, what about cross browser compatibility?
If fixed pixels, what about different screen resolution? What screen resolution should we opt for?
Also, what should be the bases for our decision?
Most div based page layouts use fixed pixel widths, not percentages.
Using percentages has its advantages in very few scenarios - if you have a page that you want to change width based on window/browser, you'd use this. But I honestly can't think of the last time I saw a site that did this.
Fixed pixel widths allows you to actually design what your site will look like regardless of browser, screen resolution...etc.
When creating a layout with fixed widths, usually you create a "container" div that is around 960px wide (see http://960.gs/). This width is used because it fits most browsers/screen resolutions (eg - anything 1024x768 and above)
The "container" is usually centered on the page (though sometimes it's left aligned) - for examples, see msn.com, yahoo.com, stackoverflow.com ...etc. These are all fixed widths, not percentage (you can test this by changing the size of your window and seeing that their content does not change)