date Picklist on Mobile

[lgrupido]

I have a date field in a UX setup to open the calendar picklist when you click the icon.

But when you do so, the calendar that comes up is larger than the screen AND it doesn't scroll.

Part of the problem is that the calendar is coming up UNDER the date field, which further limits it's screen real estate.

I am using a standard panelcard with a menu. The CSS is IOS7.

Am I missing a setting somewhere?

dateissue.PNG

[Davidk]

Re: date Picklist on Mobile

This is where you should be using a FormView control with an Editor-DateSpinLists editor. These were designed for mobile use... whereas the web controls do not always play nice with mobile devices and soft keyboards.

You could also use the ControlBar with a Disclosure which slides into view once your control gets focus or you tap a button (or something) to edit your date field.

[lgrupido]

Re: date Picklist on Mobile

I setup a sample formview (the default one in the UX setup.)

I like somethings about it, but I really dislike the date control.

It is hard to see what date is actually selected and on my screen it is not lining up properly. (see pic)

As you can see, it seems to be spanning two items for each spinlist. In the month, for instance, both May and June are in bold.

Are people using it like this? Are there some CSS hacks I can do to make it better?

spinlistmonth.PNG

[Davidk]

Re: date Picklist on Mobile

You can style the control. In the FormView CSS, CSS defined at the UX component level, or in the UX CSS Definitions (same thing) you could add something like...

.spinList {
	display:inline-block;
	text-align:center;
	color:red;
}
.spinList:after {
    -webkit-border-before-color: green;
    -webkit-border-after-color: green;
}

In your posted image, since there is no selection, they do kinda look the same, but they are a tiny bit different. As soon as you make a selection, your selection is bolder.

[lgrupido]

Re: date Picklist on Mobile

But you don't make a selection, you spin the list until you come to the value you want. Perhaps if you make a selection, then leave and come back it looks better, but for the most part, people are going to pick a date and leave it at that.

This control would be better if you could spin it, then click your selection and be done with it.

[lgrupido]

Re: date Picklist on Mobile

Also,

Is there a way to put the three spinlist controls next to each other instead of up and down?

I changed all of their widths to 30% AND I reduced the space between controls to 0 px. So they should have plenty of room to move horizontal instead of vertical, but they do not.

I even went to 25%, and still they do not move.

[Davidk]

Re: date Picklist on Mobile

Did you not apply the css I posted? The display:inline-block; does that.

[Sarah Mitchell]

Re: date Picklist on Mobile

Also,

Is there a way to put the three spinlist controls next to each other instead of up and down?

I changed all of their widths to 30% AND I reduced the space between controls to 0 px. So they should have plenty of room to move horizontal instead of vertical, but they do not.

I even went to 25%, and still they do not move.

Hi Larry,

Take a look at the SpinListGroup Container: https://www.alphasoftware.com/docume...up%20container

I think this will do what you want.

[Davidk]

Re: date Picklist on Mobile

Hey Sarah,

Adding the Defined Control "Editor-DateSpinLists" to a FormView control automatically adds the SpinListGroup Container. However, the css Display:Inline-block; is missing from this process. It's this css that gives you the horizontal effect.

Oddly enough... if you add 3 SpinList controls to a new UX with a UX Style of iOS, iOS7, or Alpha (the only styles I've tested), and then add the SpinListGroup Container, the SpinList controls are still positioned vertically. Now... change the UX Style from iOS to iOS7 or Alpha and re-render. The SpinList controls are now horizontal. Recalculating controls has no effect on this process.

Unfortunately, changing the UX Style when working with a FormView control... or an Editor... (not sure which) has no positive effect on the SpinList controls.

You'll see in the attached UX (one of the UX Templates to which I've added a Date Field and Data to the List control) that the SpinListGroup container is present... yet the SpinList controls are vertical.

I'm working with the current pre-release 4292.

EDIT: I had an extra container inside the SpinListGroup for testing... removed now. The extra container had no effect.

[Davidk]

Re: date Picklist on Mobile

I knew I'd worked on the SpinList control before... just could find it earlier. I had found the same... that the "selected" SpinListItem wasn't as distinct as I wanted it to be. I couldn't find a nice CSS way to change it, so I brute-force changed it. If you're going to use the SpinList controls and are interested, I'll post the process.

SpinListStyle.PNG

[lgrupido]

Re: date Picklist on Mobile

I am not working with the latest release, mine if from Jan 30.

But I discovered that my CSS was outdated.

Even when I updated it with the latest CSS from Jan 30, it's not making any difference.

And I do have a spinlist group and I added the suggested CSS - it is making no difference.

Are you saying I have to change from IOS7 to IOS, then save and upload, then change it back to see results?

[Davidk]

Re: date Picklist on Mobile

I was actually working with the Alpha Style. For iOS7, things are different... and it's actually doesn't look very good. Almost seems as if the iOS7 Style and the SpinList control don't work well together.

However, this is the css for the iOS7 Style:

.iOS7SpinList {
	display:inline-block;
	text-align:center;
	color:red;
}

[Davidk]

Re: date Picklist on Mobile

There one's more bit, it seems... padding is off under iOS7. It needs to be set to 0px.

.iOS7SpinList {
	display:inline-block;
	text-align:center;
	color:red;
	padding:0px;
}

[lgrupido]

Re: date Picklist on Mobile

I switched to the Alpha Style and it does look better.

[gregincolumbus]

Re: date Picklist on Mobile

David,
I would love to see the process for the Alpha style...thanks!