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.
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.
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
I'm having some trouble with the current layout of my polymer site, specifically with regards to nested components and their associated scrollbars. I'll preface this by stating that by absolutely no means am I a CSS guru. I wish I was because I probably wouldn't be struggling with this as much as I am. Also feel free to jump straight to the jsbin URL as my issue may become apparent.
The situation:
I currently have a nested core-scaffold element, whose main content often requires vertical scrolling and thus it's vertical scrollbar becomes active as required. However, as it is nested, it's container(s) can also have scrollbars enabled. Ideally, I'd like a single scrollbar on the highest level element which can scroll the scaffold's content to it's full vertical extents, yet also cause the topbar to slide away as it does now when scrolling down. I've also noticed that the height of the scaffold's main content is determined by the first page that is loaded into it. Subsequent page loads with different heights does not cause the scrollbar height extents to change accordingly.
Please note that I've simply inserted an iframe loading external content into the scaffold's content section for the purpose of this jsbin demo. My actual site loads a bunch of data driven collapsible height containers within the content pages, wrapping horizontally as needed. Due to their collapsibility, their containing page therefore has a dynamic height. That height can vary from page to page as container heights within them vary.
Here is the jsbin. Whoever can remove me from this css hell will be considered my hero...
http://jsbin.com/muniqi/1/
In my initial jsbin sample code, you'll notice I have specified core-pages height as '100vh' the top level polymer element (i.e. my-app-element). The second level polymer element (i.e. my-scaffold-page-element), loads within the aforementioned core-pages. Therefore, the nested scaffold element's maximum height is 100vh. Further down the chain, when the scaffold-element's main content area's height flows past its host's height limitation, it caused a secondary 'inner' scrollbar to appear, which has a different vertical extent than the original outer scrollbar...so trying to use the outer scrollbar alone doesn't effectively scroll the inner content to its entire vertical extent, forcing you to use the inner scrollbar as well to get the job done. Ugly to say the least.
Now that I know that is the case, one way to reduce the likelihood of an inner scrollbar appearing for the nested scaffold element's main content area is to change it's parent element's core-pages height to something much greater than 100vh (400vh?). Doing so solves the problem in a roundabout way. The outer scrollbar can now be used to scroll the entire vertical extent of the nested scaffold's contents without an inner scrollbar occurring.
In the new jsbin example (below), you can witness the 'fix', which also happens to remove the reliance on core-scaffold, instead preferring to utilize its individual components in a more configurable fashion.
http://jsbin.com/muniqi/3/
EDIT
I have fixed the whitespace behaviour by resizing components within the VerticalPanel, that seem to have had an effect on the panel's dimension somehow missed by the console. I don't quite understand how.
However, I am still stuck with none of my panels showing vertical scroll bars.
In a GWT project, I have the following structure:
Page
DockLayoutPanel
North (header)
Center (body)
South (footer)
/DockLayoutPanel
Body
SplitLayoutPanel$1
West
SplitLayoutPanel$2
North
Center
TabPanel
ScrollPanel
VerticalPanel
-Several widgets-
/VerticalPanel
/ScrollPanel
/TabPanel
/Center
/SplitLayoutPanel$2
/West
Center
/SplitLayoutPanel$1
My problems are with the ScrollPanel in the TabPanel, which in itself contains a VerticalPanel containing several widgets. This is true for each Tab in the TabPanel.
My problem is that, while the width's for all containers in SplitLayoutPanel$2's center have 100% width, the ScrollPanel contains a horizontal scrollbar with a considerable white area next to it's VerticalPanel, while they are in absolute metrics the same size.
Illustrating the situation
This is the TabPanel, with ScrollPanel, and VerticalPanel. Notice how the horizontal scrollbar exists, while the TabPanel, ScrollPanel and VerticalPanel have the same width. Scrolling to the right yields a white area.
The ScrollPanel and VerticalPanel all sport an absolute width of 598px. The West component of the DockLayoutPanel has a size of 600, so that matches. Also notice how bringing up the developer console has made the scrollbar disappear. In fact, the entire panel has disappeared behind it, and no vertical scrollbar pops up.
When scrolling the bar to the right, the VerticalPanel gets partially placed off screen, and the ScrollPanel shows this whitespace. Obviously, I don't want the whitespace to be there, so there won't be need for a scrollbar at all. All panels in this situation still have the same width: 598px. Resizing the SplitLayoutPanel, using the border to the right, increases these values (obviously), but the panels do still share equal width and the whitespace remains the same size, while I'd expect it to get wider too.
The second tab contains a load of text, which continues off the screen, but no scrollbars appear.
Problem conclusion
No vertical scrollbars
A horizontal scrollbar with some magically summoned whitespace
Compontents claim to have equal width
Any help is greatly appreciated.
EDIT
Have tried resizing the VerticalPanel to 90 or 80% width. The whitespace seems unaffected and it shows that 100% really covers the visible width and not more.
TabPanel (at least the one from GWT proper) resizes from the inside-out: its size varies depending on the size of the selected tab. So your ScrollPanel will never have a vertical scrollbar unless you explicitly give it a size, and your content is actually overflowing the layer of the SplitLayoutPanel you put the TabPanel in.
Layout panels, such as TabLayoutPanel, on the other hand resize from the outside-in: the SplitLayoutPanel would set the size of the TabLayoutPanel in its center region, and the TabLayoutPanel would in turn set the size of the ScrollPanel, so if the content of the ScrollPanel overflows, a vertical scrollbar appears.
First Point : Don't mix and match layout panels and non - layout panels.
Second Point : If you want proper resizing and scrollbars, always try to mention width and height in percentages.
I see that you have mentioned width to be 100%. But what about the height?
What I suggest for you is,
Change TabPanel to TabLayoutPanel
Set all the panels height throughout the heirarchy as 100%
How do I create a scroll in GridView using ASP.NET without using fixed sized div's around it like shown here http://www.aspnettutorials.com/tutorials/controls/gridviewscroll-aspnet2-csharp.aspx .
You can set the div's width or height to a percentage as well, and with overflow:auto, the div contents will scroll if the browser is sized to less than the content.
Without any size settings, your div will simply expand to hold all content, so a percentage, fixed, or inherited size in at least one dimension is required for scrolling to ever occur.
In order to get a scroll bar, you need a fixed height container with overflow set to scroll.
Whether you do it with the grid's properties, like in the example you linked, or by just wrapping it in a Panel with a height and overflow set on it, it doesn't matter much. The key thing is just to get it inside a fixed height container. How you want the UI to look (where the scrollbar is, etc.) will dictate where you create the div.