search

Famous / famous-angular

Bring structure to your Famo.us apps with the power of AngularJS. Famo.us/Angular integrates seamlessly with existing Angular and Famo.us apps.
https://famo.us/angular
Mozilla Public License 2.0
1.92k stars 275 forks source link

fa-scroll-view overlaps header of fa-header-footer-layout #260

Closed SunJang closed 10 years ago

SunJang commented 10 years ago

Hi. I'm trying to use fa-scroll-view on content of fa-header-footer-layout. scroll works fine, but it overlaps header section of fa-header-footer-layout.

is there any suggestion for this?

<fa-header-footer-layout>
    <fa-modifier fa-size="[undefined, 90]">
        <fa-view>
            <fa-surface>
                <div ng-include="'modules/core/views/navbar.html'"></div>
            </fa-surface>
        </fa-view>
    </fa-modifier>

    <fa-modifier  fa-size="[undefined, undefined]">
        <fa-scroll-view fa-pipe-from="eventHandler">
            <fa-view>
                <fa-modifier >
                    <fa-surface fa-pipe-to="eventHandler">
                        <img ng-src="{{memorial.file.url}}" class="img-responsive img-center"/>
                        </ul>
                    </fa-surface>
                    <!-- <fa-image-surface fa-pipe-to="eventHandler" fa-image-url="{{memorial.file.url}}"></fa-image-surface> -->
                </fa-modifier>
            </fa-view>
        </fa-scroll-view>
    </fa-modifier>
</fa-header-footer-layout>
SunJang commented 10 years ago

I found the solution. the key is "fa-translate"

<fa-header-footer-layout>
    <fa-modifier fa-size="[undefined, 90]" fa-translate="[0, 0, 1]">
        <fa-view>
            <fa-surface>
                <div ng-include="'modules/core/views/navbar.html'"></div>
            </fa-surface>
        </fa-view>
    </fa-modifier>

    <fa-modifier  fa-size="[undefined, undefined]" fa-translate="[0, 0, 0]">
        <fa-scroll-view fa-pipe-from="eventHandler">
            <fa-view>
                <fa-modifier >
                    <fa-surface fa-pipe-to="eventHandler">
                        <img ng-src="{{memorial.file.url}}" class="img-responsive img-center"/>
                        </ul>
                    </fa-surface>
                    <!-- <fa-image-surface fa-pipe-to="eventHandler" fa-image-url="{{memorial.file.url}}"></fa-image-surface> -->
                </fa-modifier>
            </fa-view>
        </fa-scroll-view>
    </fa-modifier>
</fa-header-footer-layout>