Menu icon Foundation

My Posts






  • 2
    Replies
  • Mobile UI List

    By Tom Schreck

    mobilelists

    Hello. Does Zurb have capability to generate UI for lists? There's a default set of functionality that's expected for mobile lists - ability to show avatars for list items, ability to swipe to delete and/or edit, ability to group list items together. D... (continued)

    Last Reply by Tom Schreck over 4 years ago



My Comments

Tom Schreck commented on Tom Schreck's post almost 4 years

I figured out my problem. If I nest an action sheet inside of a zf-tab, then ng-click of an action sheet item is lost when clicked. If I move action sheet outside of zf-tab, then ng-click works.

Tom Schreck commented on Tom Schreck's post over 4 years

Hi Rafi. Check out this link:

http://ionicframework.com/docs/components/#list

It would be really great if Zurb could have some widgets for lists for mobile devices. Ionic framework offers this. I do not think Ionic is as advanced or as nice overall as Zurb, however, the way they approach lists for mobile devices is pretty cool. Specifically how they have built in ability to slide the list item to reveal underlying options like delete.

Thanks

Tom

Tom Schreck commented on Tom Schreck's post over 5 years

hi Rafi. Thanks for the reply. Here's a link to a video:

http://screencast.com/t/jaSQWRLduWx

In it you will see that I can open a modal but when I scroll down the page because there are a lot of items, the modal is opened off-screen. Zurb is not taking into account the scroll amount when rendering the modal. I'm using latest version of Firefox to test the app I'm building.

 $("#ChangeOrderQuantityModal").foundation("reveal", "open");
        <div id="ChangeOrderQuantityModal" class="reveal-modal small" data-reveal>
          <form>
            <label for="ChangeQuantityOrdered">Order Quantity:</label>
            <input type="text" name="ChangeQuantityOrdered" id="ChangeQuantityOrdered" class="numeric" placeholder="Order Quantity" maxlength="10"/>

            <a href="#" class="button tiny" data-bind="click:PutChangeOrderQuantity">Submit</a>
            <a class="close-reveal-modal">&#215;</a>
          </form>
        </div>

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Tom Schreck's post almost 4 years

I figured out my problem. If I nest an action sheet inside of a zf-tab, then ng-click of an action sheet item is lost when clicked. If I move action sheet outside of zf-tab, then ng-click works.

You commented on Tom Schreck's post over 4 years

Hi Rafi. Check out this link:

http://ionicframework.com/docs/components/#list

It would be really great if Zurb could have some widgets for lists for mobile devices. Ionic framework offers this. I do not think Ionic is as advanced or as nice overall as Zurb, however, the way they approach lists for mobile devices is pretty cool. Specifically how they have built in ability to slide the list item to reveal underlying options like delete.

Thanks

Tom

You commented on Tom Schreck's post over 5 years

hi Rafi. Thanks for the reply. Here's a link to a video:

http://screencast.com/t/jaSQWRLduWx

In it you will see that I can open a modal but when I scroll down the page because there are a lot of items, the modal is opened off-screen. Zurb is not taking into account the scroll amount when rendering the modal. I'm using latest version of Firefox to test the app I'm building.

 $("#ChangeOrderQuantityModal").foundation("reveal", "open");
        <div id="ChangeOrderQuantityModal" class="reveal-modal small" data-reveal>
          <form>
            <label for="ChangeQuantityOrdered">Order Quantity:</label>
            <input type="text" name="ChangeQuantityOrdered" id="ChangeQuantityOrdered" class="numeric" placeholder="Order Quantity" maxlength="10"/>

            <a href="#" class="button tiny" data-bind="click:PutChangeOrderQuantity">Submit</a>
            <a class="close-reveal-modal">&#215;</a>
          </form>
        </div>

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content