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
Related
I have a project that involves having a sidebar that floats over an image. The sidebar is set to position: absolute to keep it over the image and to help it scale along with it when the screen size changes.
Here is a codepen that basically recreates what I'm working on: https://codepen.io/gojiHime/pen/JmYqaz
The issue I'm having is with controlling the size of the contents within the wrapper container. I want the preview div to scale along with the wrapper container. Currently, it does not work as expected in that the preview div does not start scaling as the width and height change for wrapper and for thumbs-inner. The thumbs-inner div scales correctly for the most part, but the bottom of div is cut off so you can't see the bottom of the scroll bar in smaller screens.
I know I set overflow: hidden on wrapper but without it the content in preview would extend outside of it as the height of wrapper changed.
So, I'm looking for ideas on how to fix the aforementioned issues. wrapper must stay absolutely positioned and the thumbs-inner div needs to have a vertical scrolling feature, so I can't do anything with those. I don't think setting a height makes sense for wrapper since it needs to scale responsively in height and width.
EDIT: Not sure how much this will help but this is a screenshot of what the layout of everything should look like: enter image description here
The Kraftmaid logo, full-size thumbnail and the text below it (which are in the .preview div in the codepen) have to be visible at all times when changing the screensize.
I'm not sure if this is exactly what you're looking for, but generally for responsive layouts you would want to avoid fixed dimensions, such as specific widths set in x number of pixels.
This shows your code with responsive layouts for .wrapper and .thumbs-inner (note that I haven't addressed any content issues within those two divs since I have no idea what your intended layout is):
https://codepen.io/anon/pen/ZqrZaj
Note that:
I've switched the two layout divs to use box-sizing: border-box; which will allow you to use pixels for margin and padding but still use percentages for width.
I've removed width from .wrapper and switched to percentage based absolute left and right declarations - if you modify these values, the layout should still work.
I've added borders to make the layout more obvious.
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 am trying to implement the scrollable feature for a series of paper-tab's in a Polymer project, like so:
<paper-tabs selected = "{{selectedtab}}" scrollable>
<paper-tab>Page 0</paper-tab>
<paper-tab>Page 1</paper-tab>
<paper-tab>Page 2</paper-tab>
</paper-tabs>
Despite having my code be the same for the scrollable example in the official Polymer documentation, it is not working for me. Here is what is happening:
When I copy-paste more paper-tab elements to test it out, it shrinks the size of all the paper-tabs to accommodate the new ones. The arrows that are supposed to appear at the left and right of the paper-tabs element do not appear.
When I enable the scrollable, the original three paper-tab's are shrunk, instead of covering the full width of the screen. I tried setting the width:170px for each of the paper-tab's, but it's not reproducing the effect before enabling scrollable.
What can I do to maintain the width of all the elements the same so that they cover the entire width of the screen? that is, how can I avoid the re-adjustment when adding in more paper-tab's?
This seems to be by design:
If true, tabs are scrollable and the tab width is based on the label
width
The problem is that scrollable will change the styles of the tabsContent div and thus the tabs won't flex.
The current workaround is to measure if your tabs do fit in your available space and if not set the scrollable attribute.
You can also create an issue in the issue tracker.
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.
I've coded myself into a corner or I am overseeing something obvious here. I have a semi-fluid CSS layout that is designed like this:
header - 100% width at all times, contains a x-repeated background image
container - fluid (960px to 1200px, centered, contains two columns)
footer - 100% width at all times, contains a x-repeated background image
In almost all cases this works fine.
In summary, the design as a whole scales to any width, yet the content part only to 1200px at a maximum. However, since this concerns a photo site, sometimes images are wider than the container width of 1200px and the image breaks out of it. This is perfectly fine, I want the full image to be shown. However, I want the header and footer to scale to the widest element, in this case the image. This is not happening and is particularly troublesome when I resize the window to a width less than the image and then scroll to the right using the horizontal scrollbar: it leaves a clear gap on both the header and footer whilst I want them to stretch to at least the image/content width.
Simply setting the width to 100% is not enough as that concerns the viewport, not the content width. I can forcefully use min-width with a large value for the header and footer, but that leaves a horizontal scrollbar in normal resolutions. I could hide that scrollbar using overflow:hidden but that would chop of content and not display a scrollbar when the window is small.
To make a long story short, I guess what I want is that this layout would work as a table would work: if one column's content is wider than its size, it pushes all other rows to that same width. The largest width determines the total width. I prefer a solution without javascript, but am thinking it is either not possible or I am overseeing something very obvious?
100% width sets the element's width to 100% of the width of the element it is contained in. In your case, it seems this is the window itself (or the body element). To make the header and footer divs (I'm assuming you're using divs here) scale with the image, they will probably need to either be included in the same div that the image is in, or inside a div that the image div is also in, assuming that div is scaling to the correct width (don't assume it is scaling to fit the image).
However, in many cases using a table for your layout can be much cleaner, and will handle the type of horizontal scaling you're looking for without needing to resort to css hacks.
To make a long story short, I guess
what I want is that this layout would
work as a table would work
display: table on the common container of these elements, and display: table-row or table-cell on its children. This will not work in IE6, but clever things can be done with its CSS expression() hack to simulate this.
I would rather suggest, however, that you not set a maximum width at all, and allow the design to flow better according to the user's desired window size.