Using Polymer 1.* with iron list. I am having a issue with the rows of iron-list being responsive vertically.
For instance, in the below example when the text collapses in the first row the row line above Charlie Brown overlaps Charlie Brown row/text.
I see that each row is position: absolute by iron-list, so not sure if there is anything I can do about this.
Any suggestions?
I had this issue some times ago (well not exactly the same, but it look like this is the same root cause) and the solution I found was to force the element to re-render when the window was resized.
Polymer is fixing some absolute position values at render, and some elements break when viewport is changed without triggering a re-render.
I you need it, i will try to find the exact code snippet, but just listen for resize, and call this.render on the iron list should do.
Related
I saw the Google Material Design website and was amazed by the change of color of the left, sticky "speech bubble"-image when you scroll down.
I am trying to understand the concept but Google's code is huge and somewhat confusing...
I think there are actually two images, but I cant recreate it just with different z-index values alone (I can let the first image disappear and the first appear but in combination it doesn't work).
Do I need a JS-library for that? Waypoints/scrollreveal etc., is this some kind of SVG magic or am I overlooking a simple solution?
on simple usage try onScroll() method using js for applying basic css colors on your element.
I believe those are animated objects, and the sections (their containers) have overflow:hidden, so those objects stay within their sections.
Also they probably have position:fixed and positioned using'top' and 'left' properties to stay on place all the time (or probably some JavaScript magic).
And ther animation is launched using JavaScript function scrollTop(), when visitor is on a certain distance from a page top.
I'm not sure what is used in this exactly page, but you can change and adjust scale, size, color and transparency depending on position from page top using JavaScrip - 100%.
I always think I understand CSS positioning, but then get frustrated again. Ok when I have position:static, i.e., default, my page looks like this (shown with inspect element highlighting the parent row of the col-xs-* that contains the date picker content):
I would like to keep everything about that page the exact same EXCEPT that I want to fix the col-xs-* that contains the date picker content, so that when the page scrolls down (not in the Fiddle example), it would float on top. Nevermind the z-index, I just noticed, that the minute I apply position:fixed, something interesting happens. Here's a screenshot again where I inspect element and tried to highlight parent row of the col-xs-* that is fixed. Notice 2 things: 1) The parent row isn't highlighted in blue on the page; no idea where it went, 2) The content has shifted right for some reason. It's no longer centered above "Comparison's sake" text.
Can someone please explain this behavior to me? I think it's persistently messing up my code. My end goal is again to keep everything centered as in the first snapshot, but just fix the col-xs-*.
Code in this Fiddle: https://jsfiddle.net/2v3gpa7x/
The relevant col-xs-* has id date-row
For any type of scrolling to work you need to use {position:absolute;top:0;left:0;margin:0 auto;} The term 'auto' keeps the page content centered horizontally. "absolute" allows it all to move as a group. If I understood more of what you wanted I could add ul 'wrappers' to force the position of any object
I'm using Angular JS sticky directive to stick the header of a table to the top of the page when scrolling. The table is located in a bootstrap container with a fixed width and when the Angular script activates it shows the whole header and thus overlapping the container in which it is located (if I have enough columns in the table that is).
When I have more columns than what can fit in the container, I get an horizontal scrollbar but this doesn't apply to the sticky header.
Anyone who might know how to fix this? I can't show you any live examples as I don't know how to add Angular directives in fiddle (or any other online compiler).
Here are two screenshots.
This one shows how the container prevents some columns to be shown as the table is wider than the container itself: http://imgur.com/Cj7UBak
This one shows how the sticky header has overlapped the container: http://imgur.com/KkGkOMy
it should not overlap
I'm sorry that I can't give a working demo of it but I simply don't know how to include the Angular JS Directive and without it, a demo would be useless.
EDIT
The problem, I found out, is that the sticky directive sets the position to fixed, which fixes the position to the browser, not to any parent. I don't know how to solve it still but maybe that explains the problem better for everyone.
As I discovered more about the problem I realized that I should rephrase the question. I'm therefore closing this question and refer to this one instead:
Position fixed within container element instead of the browser / viewport
I'm creating a website (http://mat3.us/ba/) and as you can see If you access it there is some kind of border, I don't know, It's like the content width is not 100%, only the menu. I tried to find what It is but I couldn't.
It looks like you're using Bootstrap. That issue happens when you don't have containers or rows nested correctly.
In your case, the issue is in section#contact. The first div inside #mapa is a .container, but its sibling is a .row. That messes up the Bootstrap grid system, and causes your layout issue.
I figured this out by going into the browser's Inspect Element, and deleting elements (in the Source Tree, you can select and element and hit Delete/Backspace to remove it) until the issue cleared up. I then Undo the delete, and delete stuff inside it. Repeat until the issue has been identified.
This link does a great job of explaining the grid system in more detail.
I'm using jquery mobile for a project which has a list-view and list-divider in it. I would like to make it so the list dividers stop scrolling when they get to the top of the page, and then keep scrolling again when another list divider bumps into it. For an example of what I mean, check out the iphone "contact's" app. Each letter (which is a list divider) stays at the top of the screen while you are still scrolling through contacts within that letter.
I've tried fixing the position but that obviously is not quite what I want. Is there a way to fix it only when it is at the top of the page? and then "un-fix" it as soon as a different list divider comes up below it?
The jQuery ScrollToFixed plugin is exactly what you are looking for. The examples will show you how to use the plugin.
Based on your description, I would say that the easiest way to accomplish this is to give each list divider a z-index greater than the one it overrides. That way you do not have to deal with minimum and maximum offsets, instead the overriding element will simply be layered on top of the previous one.