By the way I'm using Native Base for the card components, and react-native-responsive-grid for the grid.
http://prntscr.com/kbi48m
Here's the code chunk. Basically it sets up a horizontal box (Row) that has two columns in it. Each column has one card component in it. If the screen is <= small size, the columns get a width of 99% of the screen and stack on top of one another. If the screen is big enough, both column get rendered side by side with a width of 50% each.
When in landscape view, the sizing of the Card component vertically appears normally (I manually set width of card to 100% so it takes the full width of it's container). (It's just as big as it needs to be to fit the text field inside: http://prntscr.com/kbi5q4
In portrait mode, suddenly the cards get a massive height. Much taller than the child elements need: http://prntscr.com/kbi6o7
I tried to hard code the height of the cards which works fine for either landscape, or portrait, but not both. Ive never seen a parent component give a ridiculous amount of extra spacing on one side of its child like this before.
Any insight?
Related
Using Clarity and Angular 6, I have a card in the main content area that I'd like to have fill the length of the current view (no more, no less). The only way I found that comes close is to set the height to "-webkit-fill-available" (only using Chrome right now).
The problem with this is that there seems to be a tiny bit of space at the bottom that's causing the content area to show a scroll bar.
Ideally I'd like to never see a scrollbar in the content area and make all the content fit within the current screen height.
Here is a stackblitz example that demonstrates the problem.
Your solution is not a standard and would not work on IE/Edge, and might not work well with Safari per https://caniuse.com/#search=fill-available.
You could try giving it a height: calc(100vh - 5.5rem);, which gives the card a height of the view port, but subtracts the heights of the header bar and margins of the card and content areas. Ultimately, to use CSS to calculate heights you need to know what other elements are on the page and calculate against those known heights, or else you'd have to do something with JavaScript to inspect the elements of the page to find the available space.
Since the default behavior of columns on extra small screens is as follows (quote from the Bootstrap site):
Horizontal at all times
I'm wondering what the point of col-xs-* is? On an xs device, the columns are gonna be stacked vertically anyway, so why bother using this kind of code?
Btw, I know that for instance col-md-6 scales upwards. But what about downscaling, so in that example, if there's nothing declared for a small screen? Is there a default as well?
It is so that you can stack items horizontally on screen sizes lower then 768px without them stacking vertically. The column's will re-size as the viewport gets smaller without breaking to the next line. If there is anything in your page that you do not want to break at a given width then it is a good time to use SX.
Content displayed in divs that are set to col-md-* display stacked and 100% width when printed. My current fix is to change the divs to col-xs-* and hope no one tries to view the page on a small device.
I need a bit of guidance on what I could add to the #print directive in print.less to make the print layout of col-sm-* to remain horizontal . I understand that the pixel width of a printed page at 72dpi is in the 540px range, so this is why the page is wrapping on col-sm-*. currently in my print css I have:
[class*="col-sm-"]{ float: left; }
Which works, but in possibly only a few cases, which meets my immediate need, but probably has unknown side effects. I already scale the font in my print css down to 96%, because it prints way too large by default vs. on screen. This means layouts that wrap on the screen would look fine when printed horizontally in the col-sm-* class, all the up to probably 11 columns side by side, accounting for page margin and grid padding for readability.
Edit: Here is a jsFiddle, but the behavior can't be replicated on there because of the way they render the html >> JS Fiddle
I always wondered how to fix the gap between floating elements if they don't have the same height:
Here you can see a gap between Featured and Notice which I would like to get rid of. (Get's even larger when the screen resolution is larger since the Featured box becomes more stretched and thus the text spreads over less lines)
Maybe important to note that this is the order of the floating left elments:
Featured
News
Headlines
Notice
Layout for smaller screens (this is looking perfectly fine I just wanted to show you what I mean in the following description with inconsistent layout based on screen resolution)
If the design would be consistent I wouldn't mind implementing some kind of grid system but in my case I'm using styles based on screen resolution so at a certain screen resolution the boxes change from 50% to 100% width (no fixed value used here).
I thought that fluid girds might be the right way to go but after checking them (never used them before) they feel rather static and I'm not sure that they can solve this problem.
EDIT:
Sample of the broblem: http://jsfiddle.net/UfVrH/. Note the fixed height values in A-D are only there to simulate content stretching the div.
To fix such an issue you need to calculate the width and height of each element and re-arrange them by positioning them absolutely, luckily for you there is such a plugin that does this, Isotope
I've built a dynamically sized grid layout that can adapt to reasonably in any sized resolution (phone, tablet, desktop) and handle resizing, all while being near pixel-perfect (sorry, I'm OCD -- and I say "near" because my math is broken right now and you can't fit two evenly sized elements inside of an odd sized container without padding being 1px off on one side).
Anyway, below is a link to what I've hacked together with JavaScript. It's an example of what I'm trying to pull off. Resize the width of the bottom pane a bit to see what I'm going for.
http://jsfiddle.net/langdonx/uFW2C/2/
It has some ugly manual JavaScript that's since been ported to Angular, but still the ugly JavaScript that calculates all the styles remains.
So my question... can I pull this off with strictly CSS? Or a lot more CSS and a lot less JavaScript? And by this I mean dynamically sized cells based on the width of the screen?
Here are the business rules:
Max cell width: 320px
Minimum # cells per row: 2
this might be impossible with CSS, so I'd be fine with settling on Min Cell Width: 178 for Chrome on my Galaxy Nexus(whose portait mode is 360px wide)
Cell border: 5px with a 2px outline
Visible margin between cells: 3px (margin is actually 5px, but outline bleeds out)
In this example, I'm redrawing the cells on resize every time, but in my Angular version, I believe that just the styles get updated. That said, I could probably get away with redrawing a table on resize, but I'd only have to calculate the cell width based on the document width, and well... I wouldn't be thrilled to use a table. =[
-end mad rant
Media queries
CSS media queries might get you pretty close to a CSS-only solution.
The key concept here is using different layout grids based on the width of the browser, to vary the number of columns.
Media queries are the natural CSS way to change the layout based on the browser width. And they require no JavaScript. If you use a set of media queries -- each one targetting a different range of browser widths -- to control which layout grid is used, then all each grid has to do is be responsive -- percentage widths for each column, and let the content stretch to fill the column width.
Responsive Design
The question then becomes: Is it possible to automatically stretch each piece of content to fill the column using CSS alone? That depends on the type of content, how it's expected to behave when it stretches, and if there's any room for compromise with the graphic design.
Typically, the graphic design for a responsive website has to be tailored to suit the limitations of Responsive Design (with the graphic designers having a rough idea of what's feasible and what isn't). But... whatever can't be done automatically, can be done using JavaScript.
Relevant search terms for attempting to stretch the content: Responsive Design, Adaptive Content, Fluid Grid
Note: "Columns" in this case may simply mean the percentage width used for the floated containers for each piece of content. It doesn't have to mean "physical" columns, in the traditional sense.