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
Related
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?
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.
I know that bootstrap automatically reflows columns based on device width using #media queries, but is there a way to make the columns reflow if they happen to be in a narrow element?
Here's a fiddle illustrating what I'm talking about. (make sure to make the result section wide).
I want the lower two columns to always reflow since they are in a fixed width, narrow element. The trick is to do it without changing the HTML since my template is reused in more than one place (unless the changes don't affect other uses).
This will show you the "narrow effect" even when the screen is wider than 768px. It will affect all classes with a name starting with col-sm- inside a class called narrow.
.narrow div[class^='col-sm-'] {
width: 100%;
}
I'm playing around in Bootstrap 3 trying to duplicate the vertical navigation bar used on the getbootstrap site. I'm running into a couple issues though and I'm not finding a lot of documentation to work from.
Here's a bootply link to show you where I'm coming from: http://bootply.com/77832
Issue number 1 is that if I change the screen size from large to small, my navigation is now under my text. But on the bootstrap site the navigation moves to the top of the screen and the text falls under that. How can I fix the responsiveness of this so that resizing or viewing this on a small screen doesn't wreck the layout?
Issue number 2 is cosmetic. I'd like for the pretty pink background on my navigation to fill the entire container rather than just the width of the text. So I thought, hey throw a width:100% on that bad boy and you're all set. I thought that it would fill 100% of the col-md-3 that contains it, but it actually fills 100% of the screen width. Why would it extend out of the col-md-3 that it is in and how can I achieve the desired look?
For #2, the issue is that the UL has a position:fixed, so it sort of "removes" itself from knowing about its parent's width. Basically, it treats the body as the parent, so width: 100% will make it as wide as the page.
For #1, You may want to look at, when the page becomes small, make the nav "not affixed" to the side of the page.
https://gist.github.com/2354116
If you view the above page in Chrome/Firefox then everything seems to be fine. The divs at the bottom (the two headings and the social icons) are wrapped in a container div and center without issue.
If it's viewed in Safari though then these three divs are not centered at all :/
I'm not sure why this is.... can anyone help?
Note: had to assume a lot with your design so modify anything that does not fit your original design.
First off, you are not properly containing your page elements (content, carousel, footer), you currently have multiple width containers trying to reside side-by-side and that is breaking your design in multiple places.
Your content container is width:940px, your .wrapper div is width:750px, your .paramWrapper div is width:870px, your .carousel div is width:735px. You have to pick one width and stick to it and just use margin to push content accordingly across your page. I used 860px, which is the width of the span11 class.
Next, you're modifying the bootstrap.css stylesheet directly, that means that whenever the bootstrap gets updated all of your changes will be lost if you overwrite the bootstrap stylesheet, so create a another stylesheet and put all of your custom styles there and just load it "after" the bootstrap stylesheet in your header.
Now onto your original issue, the bottom .paraWrapper div is not properly stacking because you have a width of 870px set in your container and the elements within do not add up to that width:
span3 + span3 + span2 + margin = 640px
So it was not an issue or a bug, its just your layout.
Here is a fixed version that i very quickly put up so you're going to have to modify the elements to fit your design once again: http://jsfiddle.net/rzSFa/3/, here is a demo of what it looks like.
By the way, you're using the responsive bootstrap stylesheet for naught, it is currently not doing much in your case so why even use it? You can easily modify a few media queries to support my fixed version though, but yours will not work at all because you're declaring all of your own classes with custom widths so there is no point in including it.