How should I go about responsive form lists?

1

Hey all,

mij title seems a bit cryptic maybe… Let me explain!

Basically, I’m having a list. For example’s sake, with name and age input. While my current list looks like this (love the dutch part):

<div class="item item-divider">
            Naam
        </div>
        <label class="item item-input">
            <input type="text" placeholder="Type hier de naam.." data-ng-model="formInfo.title">
        </label>

Which translates to:

I would like it if this would be included like we have the responsive grid: http://ionicframework.com/docs/components/#grid-responsive

I would like something like this:

<div class="sm-item repsonsive-item">
    <div class="sm-item item-divider">
        Naam
    </div>
    <label class="sm-item item-input">
        <input type="text" placeholder="Type hier de naam.." data-ng-model="formInfo.title">
    </label>
</div>

Of course, the sm would be able to be replaced by sm, ld, or lg like the responsive grid.

Final result would look something like this:

Large screen: (of course, it should be nicely joined etc, just for example purposes to make clear what i want)

Small screen:

I have no clue how to go about this. Anyone able to point me in the right direction?

@mhartington any work on something similair in ionic HQ already?

2

Something to remember is that the classes aren’t tied to any particular piece of html

3

Awesome! Thanks for the help, I really didn’t think in this direction… Having some problems with the additional padding when the item is actually on the next line (due to the responsive break) but I’ll fix that with my sass code :smile:

Great help and response time, as usual :wink:

1 Like