Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Styling DateItem for mobile devices

    Hi Isomorphic,

    I want to make our Application mobile friendly. I have two Items in a DynamicForm, a DateItem and a TextAreaItem as a comment-box, as shown in Picture 1.

    Click image for larger version

Name:	Screenshot_2018-07-11-14-03-10.png
Views:	134
Size:	60.2 KB
ID:	254029
    Picture 1


    1. If I use the following Code, and I click, for example on "day", then I can choose the day like in Picture 2. When I click on the date-picker I can choose the date like in Picture 3. I think thats neither handy, nor really pretty, so I tried the approach under 2.


    Code:
      
     statusAfterDateDI = new DateItem("dateItem") {
                    {
    
                        setTitle("Datum");
                        setAlign(Alignment.CENTER);
                        setTextAlign(Alignment.CENTER);
                        setUseTextField(false);
                        setShowPickerIcon(true);
                        setSelectorFormat(DateItemSelectorFormat.DAY_MONTH_YEAR);
    
                    }
                };
    Click image for larger version

Name:	Screenshot_2018-07-11-14-03-16.png
Views:	135
Size:	50.6 KB
ID:	254028
    Picture 2


    Click image for larger version

Name:	Screenshot_2018-07-11-14-06-48.png
Views:	130
Size:	59.2 KB
ID:	254033
    Picture 3


    2. I changed the Code to the following, with the results shown in Picture 4 and 5. This is more like what I want to accomplish, but I can't imagine, that it is right to set "Browser.setIsDesktop(true);" in an mobile environment, isn't it? Or is in this case "Browser.setIsDesktop(true)" only applied to this DateItem, or would that be applied globaly?
    Is it possible to get this look without "Browser.setIsDesktop(true)" on a mobile device?

    Code:
    statusAfterDateDI = new DateItem("dateItem") {
                    {
    
                        setTitle("Datum");
                        setAlign(Alignment.CENTER);
                        setTextAlign(Alignment.CENTER);
                        setUseTextField(false);
                        setShowPickerIcon(true);
                        setSelectorFormat(DateItemSelectorFormat.DAY_MONTH_YEAR);
                        Browser.setIsDesktop(true);
    
                    }
                };
    Click image for larger version

Name:	Screenshot_2018-07-11-14-04-43.png
Views:	137
Size:	71.1 KB
ID:	254031
    Picture 4


    Click image for larger version

Name:	Screenshot_2018-07-11-14-05-07.png
Views:	165
Size:	91.3 KB
ID:	254027
    Picture 5

    3. As an alternative, I tried the below code with the results shown in Picture 6 and 7. This is kind of what I really was looking for, but the docs for "setBrowserInputType" mention the following:

    NOTE: This feature requires specific CSS changes. Currently these changes have been made to the Enterprise, EnterpriseBlue, and Graphite skins only.

    How is it about Tahoe and Stratus? Will there be changes to those skins as well soon? If yes, I would prefer to use this implementation.


    Code:
    statusAfterDateDI = new DateItem("dateItem") {
                 {
    
                 setTitle("Datum");
                 setAlign(Alignment.CENTER);
                 setTextAlign(Alignment.CENTER);
                 setBrowserInputType("date");
                 setUseTextField(true);
    
                 }
                 };
    Click image for larger version

Name:	Screenshot_2018-07-11-13-59-26.png
Views:	132
Size:	57.1 KB
ID:	254032
    Picture 6


    Click image for larger version

Name:	Screenshot_2018-07-11-13-59-35.png
Views:	132
Size:	82.1 KB
ID:	254030
    Picture 7

    4. In 1., 2., and 3. it was not able to make the DateItem as wide as the TextAreaItem even with "setWidth100()". Is there a way to enlarge the selectItems for day, month, year with or without the pickerItem so that it is as wide as the screen on different Display sizes?


    Setup:
    SmartClient Version: v11.1p_2018-05-30/PowerEdition Deployment (built 2018-05-30)
    Browser: Cordova WebView for Android and iOS
    All Pictures were taken on a Android Phone.


    Thanks in advance,

    Best Regards

    #2
    Thanks for the detailed description(s). It sounds like the ideal resolution for you is to simply use browserInputType (#3 from your list of questions). This should be fine for you - the warning in the documentation about certain skins not supporting browserInputType is stale and this configuration should look fine in Tahoe and Stratus.
    We'll make sure the documentation gets updated to reflect this (and as always, please let us know if you do see any styling problems).

    I think this renders the rest of the issues here moot, but let us know if you'd like us to respond to them directly

    Regards
    Isomorphic Software

    Comment


      #3
      Hello Developer12145 on handset devices I find more handy something like that:
      Code:
      ...
                  name: "DATE_OF_Birth",
                  usePlaceholderForHint: false,
                  editorType: "DateItem",
                  showPickerIcon: false,
                  useTextField: true,
                  useMask: true,
                  mask: "##/##/####",
                  hint: "mm/dd/yyyy",
                  showHintInField: true,
                  textFieldProperties: {
                    browserInputType: "tel"
                  }
      ....

      Comment

      Working...
      X