I'm trying to implement an Off Canvas layout and I'm stuck (have spent half the day trying to figure this out). I basically want to use this off canvas layout from bradfrost Right Side Off-Canvas responsive pattern
What I want is:
On mobile the left and the right content should each be 100% width. The left content should be the one that is displayed by default and you click on a button to slide in the right content.
On desktop the left content should be set to 300px width and the right content should fit the rest of the width.
It seems like in the above code example, the width on desktop is set on the right content and the left content just fits the rest of the width. I basically want the opposite of that on desktop (left content fixed width, right side fits rest of width).
Another version of the code FOUND HERE is also similar (and might be easier to edit) but the problem is that the right content is what's displayed by default on mobile view. I need the left to be displayed by default on mobile view.
Any help with this would be greatly appreciated. Thanks in advance.
Is it what you want?
demo
Animating top/left really sucks on mobile devices. You should use css transform instead.
Related
I am trying to render a mobile first website on a desktop and would like to limit the viewport to let say 500px aligned in the middle.
While this part is easy, there are some other complexities also.
The top bar and bottom bar which have position as fixed are fixed relative to viewport so they are taking the width of the viewport
The side navigation bar are opening from the far left corner.
Fixing these problems individually is one solution, but i am wondering if there is a more standard way to restrict the size of the entire viewport ?
My goal is to have an Ionic 3 Popover have a "top section" and a "bottom section." I'd like the top section to take up, lets say the top 70% of the PopOver and the bottom section to take up, lets say the bottom 30% of the PopOver. I'd like to put arbitrary content in the top section and have it be scrollable if that content exceeds the vertical space allotted to the top section. The bottom section content is fixed, and should always be present regardless of the scrolling of the top section, and should never have a scrollbar associated with it.
I've made the following attempt at this behavior using stackblitz:
https://stackblitz.com/edit/ionic-4k2dbz
So, how might I change the content of components/my-popover/my-popover.html or components/my-popover/my-popover.scss to achieve the layout / behavior described above?
If real quick I would think this way:
popovers in Ionic by default take 90% of the viewport based on the
docs (max height -
https://ionicframework.com/docs/api/components/popover/PopoverController/)
we can use max-height to limit the top pane div and set its overflow
to auto
we can use min-height / max-height to fix bottom pane div and set its
overflow to hidden;
now since you need 30/70 split we need to prorate it based on 90% max
height of Popover (I used 65/25 below)
https://stackblitz.com/edit/ionic-x3pkwv
But then when tested in an ionic app across multiple devices the above, I think, it may get messed up a bit depending on screen sizes etc. So you may consider using ion-grid which is flexbox based. Here is the solution below:
https://stackblitz.com/edit/ionic-ikvjiw
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.
When the content of my slides in a deck.js presentation gets larger than the vertical window, the browsers are shrinking the displayed content.
The more content, the smaller the display gets. The effect seems 'page' wide, as the top left corner of the slide moves further away from the top left corner of the browser window -- as if I were zooming out from the page. I can navigate to the all of content with the mouse, but no scrollbar appears.
What is going on here, and how do I get control of the display size in these situations?
(Apologies for a possibly poor question -- I don't know quite enough CSS to know what additional information I should or could provide here. I'd be glad to add in answer to questions.)
Thanks.
If you want to keep consistent (constant) font size and layout across slides, I would recommend using the "fit" extension from this page http://home.heeere.com/tech-deckjs-ext.html .
On the negative side, this extension currently prevents you from using the horizontal and vertical transition themes. It could be patched to allow these transitions.
On the positive side, this extension will allow you to have a scrollbar on your slide. You can do that by adding the following style in your page:
div.deck-container > .slide {overflow-y: scroll;}
I'm creating a webpage where I need a content column in the center of the page (including a fixed width) and two non-scrollable (fixed) columns at the left and the right side of that content column (including a fixed width also). The left column needs to be aligned to the left side of the middle content column. The right column needs to be aligned to the right side of the middle content column.
If the content column gets a lot of content the middle content column should be scrollable with a scrollbar at the right side of the browser. But the left and right columns must not scroll, but stay fixed against the top of the browser.
When resizing the browser width then the left+middle+right columns keeps their width and centered in the middle of the webpage. At the left side of the left column and at the right side of the right column the whitespace will increase/decrease on both sides with same width.
In my screen example you find the concept of what I'm trying to solve.
I tried to search for this problem at stackoverflow and google, but I only found examples wich are a bit different.
Who knows how to solve this problem?
example in JSBin
- (see updated version below, this is buggy, fixed columns are sticky)
the green is not required it's there
to show the wrapper is actually
centering the whole lot
absolutely
position the left and right wraps
first so the the position:fixed
columns don't go to side of viewport
Update
non-buggy version now in JSBin
hmm that was more difficult than I thought it would be; this one works in IE7, 8, Safari, FF3.6, Opera, Chrome
view the source code for the notes, especially interesting is pointer-events, without them the newer browsers will not click through (select text or click a link) an "overlaid" div, which is what this layout is doing it's overlaying an Absolutely Position div and using absolute positioning and relative position to get around the scrolling, vertical and horizontal, issues there was with disappearing content and sticky fixed divs
Updated to use jQuery as per comments
Example: here