Uploaded image for project: 'Document Management System'
  1. Document Management System
  2. DMS-1749

Mobile Responsive issue in case of Review and Sign

    Details

    • Type: Bug
    • Status: Done
    • Priority: Critical
    • Resolution: Done
    • Affects Version/s: None
    • Labels:
      None
    • Company:
      All Clients/Multiple Clients

      Description

      With adding of new media query, the mobile responsiveness is being hampered.

      It have to be responsive in case of mobile and desktop for both in our application view and in iframe as well.

        Attachments

        1. 26318C8B-A785-400F-9724-0407BBDF9641.png
          26318C8B-A785-400F-9724-0407BBDF9641.png
          362 kB
        2. 3C5B7AD0-49E7-4A33-BF58-2689CA6B47CC.jpeg
          3C5B7AD0-49E7-4A33-BF58-2689CA6B47CC.jpeg
          555 kB
        3. 3F6CB0B4-DAE2-485B-83CC-8677B03EA616.png
          3F6CB0B4-DAE2-485B-83CC-8677B03EA616.png
          347 kB
        4. 828B9BCB-331F-4765-A997-9DADB429C65A.png
          828B9BCB-331F-4765-A997-9DADB429C65A.png
          323 kB
        5. 9CC43BCE-D9D7-4442-A015-AFEAD2907FF8.png
          9CC43BCE-D9D7-4442-A015-AFEAD2907FF8.png
          286 kB
        6. 9F6C84DA-EB17-4161-BBCA-E92CC85631AC.jpeg
          9F6C84DA-EB17-4161-BBCA-E92CC85631AC.jpeg
          609 kB
        7. BB9BF02A-9CC0-4A34-B15D-277D24ACFE1E.png
          BB9BF02A-9CC0-4A34-B15D-277D24ACFE1E.png
          345 kB
        8. C27DAC6D-5A3B-402D-9C0F-A0E032FE4BB4.png
          C27DAC6D-5A3B-402D-9C0F-A0E032FE4BB4.png
          335 kB
        9. document-review.component.scss
          8 kB
        10. F2B1B4F8-F9AD-4157-8C4F-7BBC23CF81B0.png
          F2B1B4F8-F9AD-4157-8C4F-7BBC23CF81B0.png
          518 kB
        11. IMG_20190917_154110.jpg
          IMG_20190917_154110.jpg
          2.52 MB
        12. IMG_20190917_154110.jpg
          IMG_20190917_154110.jpg
          2.52 MB
        13. IMG_20190917_155016.jpg
          IMG_20190917_155016.jpg
          2.49 MB
        14. IMG_20190917_155034.jpg
          IMG_20190917_155034.jpg
          1.91 MB
        15. IMG_20190917_155043.jpg
          IMG_20190917_155043.jpg
          2.52 MB
        16. IMG_20190917_155101.jpg
          IMG_20190917_155101.jpg
          2.32 MB
        17. IMG_20190917_155102.jpg
          IMG_20190917_155102.jpg
          1.98 MB

          Issue Links

            Activity

            Hide
            mohd.belal Mohd Belal (Inactive) added a comment -

            HI Namrata Kakade,

            As discussed following css file contains updated css for mobile responsive issue.

            NOTE: CBAT is using PDF in  iframe for width above 1400px so please make sure no media query is added for width greater than 1400px. All media query should be for below resolution to 1400px.

             

            Also mention the standard devices in which you are added media queries.

            cc - Samir

             

            Thanks

             

            Show
            mohd.belal Mohd Belal (Inactive) added a comment - HI Namrata Kakade , As discussed following css file contains updated css for mobile responsive issue. NOTE: CBAT  is using PDF in  iframe for width above 1400px  so please make sure no media query is added for width greater than 1400px. All media query should be for below resolution to 1400px.   Also mention the standard devices in which you are added media queries. cc - Samir   Thanks  
            Hide
            namrata.kakade Namrata Kakade (Inactive) added a comment - - edited

            Hi Samir

            I have made changes in Document review css with Akash and we have check on the browser and one android device.
            As discussed with Mohd Belal, the pdf is working fine on resolution 1400 and above resolution device.
            I have target only mobile and ipad device for responsiveness and added media queries for mobile and ipad only.
            I have tested 3-4 pdf. We need to verify different pdf on devices and need to fix the pdf fields (left and top position of input) with dynamically.
            Following are the list of devices with media queries:
            1. iPhone 5: Portrait and Landscape
            2. iPhone 6, 7 and 8: Portrait and Landscape
            3. iPhone 6+, 7+ and 8+: Portrait and Landscape
            4. iPhone X: Portrait and Landscape
            5. Galaxy S6, Google Pixel: Portrait and Landscape
            6. iPad: Portrait and Landscape

            Mohd Belal : Please check if we can set fields placement as per device resolution dynamically in future.

            Regards,
            Namrata

            Samir Ganesh SadawarteRohan J Khandave

            Show
            namrata.kakade Namrata Kakade (Inactive) added a comment - - edited Hi Samir I have made changes in Document review css with Akash and we have check on the browser and one android device. As discussed with Mohd Belal , the pdf is working fine on resolution 1400 and above resolution device. I have target only mobile and ipad device for responsiveness and added media queries for mobile and ipad only. I have tested 3-4 pdf. We need to verify different pdf on devices and need to fix the pdf fields (left and top position of input) with dynamically. Following are the list of devices with media queries: 1. iPhone 5: Portrait and Landscape 2. iPhone 6, 7 and 8: Portrait and Landscape 3. iPhone 6+, 7+ and 8+: Portrait and Landscape 4. iPhone X: Portrait and Landscape 5. Galaxy S6, Google Pixel: Portrait and Landscape 6. iPad: Portrait and Landscape Mohd Belal : Please check if we can set fields placement as per device resolution dynamically in future. Regards, Namrata Samir Ganesh Sadawarte Rohan J Khandave
            Hide
            namrata.kakade Namrata Kakade (Inactive) added a comment - - edited

            Hi Samir

            As discussed, after prepod build I have tested 3-4 pdf files on Iph and iPad (portrait and landscape), Its working fine on that devices.

            We are covered following points:
            1. Mobile Responsive issue in case of Review and Sign: We have targeted standard devices sizes for responsiveness.
            2. Header is working fine on devices
            3. Input fields(form fields) are working fine on targeted devices
            4. Review and sign link and button properly displayed in mail app: We need to unblock the feature then we will display the review and sign button properly with link
            5. Signature component is working fine on some resolutions and we did not fix pdf specific change for signature(we need to handle it dynamically).
            6. Login screen was not responsive.

            After Production build, I have tested on iph and iPad above mention points are working fine but one issue was re-pro on production i.e. text of form fields were cut in ipad and iph.

            Regards,
            Namrata

            Samir Rohan J Khandave Ganesh Sadawarte Priya Dhamande Satya

            Show
            namrata.kakade Namrata Kakade (Inactive) added a comment - - edited Hi Samir As discussed, after prepod build I have tested 3-4 pdf files on Iph and iPad (portrait and landscape), Its working fine on that devices. We are covered following points: 1. Mobile Responsive issue in case of Review and Sign: We have targeted standard devices sizes for responsiveness. 2. Header is working fine on devices 3. Input fields(form fields) are working fine on targeted devices 4. Review and sign link and button properly displayed in mail app: We need to unblock the feature then we will display the review and sign button properly with link 5. Signature component is working fine on some resolutions and we did not fix pdf specific change for signature(we need to handle it dynamically). 6. Login screen was not responsive. After Production build, I have tested on iph and iPad above mention points are working fine but one issue was re-pro on production i.e. text of form fields were cut in ipad and iph. Regards, Namrata Samir Rohan J Khandave Ganesh Sadawarte Priya Dhamande Satya
            Hide
            priya.dhamande Priya Dhamande (Inactive) added a comment -

            Hi Namrata Kakade,

            Environment: Production
            Login: Candidate
            Page: Review and Sign
            A discussed, getting issues for all devices on edit fields.

            So, assigning for the same.

            Samir Rohan J Khandave Sachin Hingole Hrishikesh Deshpande

            Show
            priya.dhamande Priya Dhamande (Inactive) added a comment - Hi Namrata Kakade , Environment: Production Login: Candidate Page: Review and Sign A discussed, getting issues for all devices on edit fields. So, assigning for the same. Samir Rohan J Khandave Sachin Hingole Hrishikesh Deshpande
            Hide
            mohd.belal Mohd Belal (Inactive) added a comment -

            Hi Namrata Kakade,

            Checked the responsiveness in case of Actual Pixel Mobile and the PDF is coming distorted.

            Please look into this scenario as well.

            cc - Samir

            Thanks

            Show
            mohd.belal Mohd Belal (Inactive) added a comment - Hi Namrata Kakade , Checked the responsiveness in case of Actual Pixel Mobile and the PDF is coming distorted. Please look into this scenario as well. cc - Samir Thanks
            Hide
            namrata.kakade Namrata Kakade (Inactive) added a comment -

            Hi,

            We have already fixed the mobile responsiveness issues in last week on standard devices. I have tested prepod and production build on iph and ipad. On iph and ipad its working fine but rest of the devices was not targeted.
            If we added min and max width for device target below the ipad but its working fine on some devices but its differ on other devices.
            Mohd Belal: As discussed, we will target other devices using css. Please let me know once you free for make a changes.

            Priya Dhamande: As dicussed with Belal, This ticket is related to mobile responsiveness and PDF(custom fields) related things are done under the jira: DMS-1763.

            We have done the responsiveness for standard devices under this jira and we will create seperate jira for other devices responsiveness.

            Regards,
            Namrata

            Priya Dhamande Samir Mohd Belal Rohan J Khandave

            Show
            namrata.kakade Namrata Kakade (Inactive) added a comment - Hi, We have already fixed the mobile responsiveness issues in last week on standard devices. I have tested prepod and production build on iph and ipad. On iph and ipad its working fine but rest of the devices was not targeted. If we added min and max width for device target below the ipad but its working fine on some devices but its differ on other devices. Mohd Belal : As discussed, we will target other devices using css. Please let me know once you free for make a changes. Priya Dhamande : As dicussed with Belal, This ticket is related to mobile responsiveness and PDF(custom fields) related things are done under the jira: DMS-1763 . We have done the responsiveness for standard devices under this jira and we will create seperate jira for other devices responsiveness. Regards, Namrata Priya Dhamande Samir Mohd Belal Rohan J Khandave
            Hide
            priya.dhamande Priya Dhamande (Inactive) added a comment -

            Environment: Preprod
            Login: Candidate
            Page: Review and Sign
            Devices: Desktop, iPhone and Ipad

            Issues:
            1. text fields are not editable which are on arrows
            2. Buttons are moved down
            3. Signature component moved up.
            4. Text fields are slightly moved down.

            So, reopening for the same.

            Samir Rohan J Khandave Hrishikesh Deshpande Sachin Hingole Ganesh Sadawarte Narendra Kumar

            Show
            priya.dhamande Priya Dhamande (Inactive) added a comment - Environment: Preprod Login: Candidate Page: Review and Sign Devices: Desktop, iPhone and Ipad Issues: 1. text fields are not editable which are on arrows 2. Buttons are moved down 3. Signature component moved up. 4. Text fields are slightly moved down. So, reopening for the same. Samir Rohan J Khandave Hrishikesh Deshpande Sachin Hingole Ganesh Sadawarte Narendra Kumar
            Hide
            mohd.belal Mohd Belal (Inactive) added a comment -

            Hi Priya Dhamande,

            As discussed over call, please check the points mentioned.

            1. Patricks PDF buttons are not proper initially, so it is coming down.
            2. Signature / Text position will be minimum according to the pdf allowing to edit properly.
            3. Texts are now editable on the arrow row.

            cc - Samir

            Thanks

            Show
            mohd.belal Mohd Belal (Inactive) added a comment - Hi Priya Dhamande , As discussed over call, please check the points mentioned. Patricks PDF buttons are not proper initially, so it is coming down. Signature / Text position will be minimum according to the pdf allowing to edit properly. Texts are now editable on the arrow row. cc - Samir Thanks
            Hide
            priya.dhamande Priya Dhamande (Inactive) added a comment - - edited

            Environment: production
            Device: iPAD
            Template: BAT_PDF_09132019
            Page: Review and Sign Page
            Login: Candidate

            1. All fields are getting moved up.
            2. Signature component appearing as expected.

            So, reopening for the same. refer screen capture.

            Samir Hrishikesh Deshpande Rohan J Khandave Narendra Kumar Mohd Belal

            Show
            priya.dhamande Priya Dhamande (Inactive) added a comment - - edited Environment: production Device: iPAD Template: BAT_PDF_09132019 Page: Review and Sign Page Login: Candidate 1. All fields are getting moved up. 2. Signature component appearing as expected. So, reopening for the same. refer screen capture. Samir Hrishikesh Deshpande Rohan J Khandave Narendra Kumar Mohd Belal
            Hide
            namrata.kakade Namrata Kakade (Inactive) added a comment -

            Hi Mohd Belal,

            As discussed, I have checked the pdf in ipad and fields are moved up slightly.
            We have already fixed the mobile responsiveness issues in last month on standard devices, and It was fine on actual iph and ipad device.
            I have tested prepod and production build on ipad and it was disturb again. In actual device and browser resolution its shown almost same. What will be the solution for that?

            Please see the screenshot for reference.

            Regards,
            Namrata

            Priya Dhamande Samir Mohd Belal Rohan J Khandave Narendra Kumar

            Show
            namrata.kakade Namrata Kakade (Inactive) added a comment - Hi Mohd Belal , As discussed, I have checked the pdf in ipad and fields are moved up slightly. We have already fixed the mobile responsiveness issues in last month on standard devices, and It was fine on actual iph and ipad device. I have tested prepod and production build on ipad and it was disturb again. In actual device and browser resolution its shown almost same. What will be the solution for that? Please see the screenshot for reference. Regards, Namrata Priya Dhamande Samir Mohd Belal Rohan J Khandave Narendra Kumar
            Hide
            mohd.belal Mohd Belal (Inactive) added a comment -

            Hi Namrata Kakade,

            This is occurring due to Font-size issue in iOS, please add Media query to adjust font-size in case of iPAD.

            Also after making changes, please verify in other iOS devices as well.

             

            cc - Samir

             

            Thanks

            Show
            mohd.belal Mohd Belal (Inactive) added a comment - Hi Namrata Kakade , This is occurring due to Font-size issue in iOS, please add Media query to adjust font-size in case of iPAD. Also after making changes, please verify in other iOS devices as well.   cc - Samir   Thanks
            Hide
            namrata.kakade Namrata Kakade (Inactive) added a comment -

            Hi Mohd Belal,

            As discussed, please update the media query for font-size changes related to ipad and raise the PR. As discussed, the input field alignment was slightly differ as per pdf, we did not make pdf specific changes. We have made changes for generic pdf and it differ pdf wise.

            Regards,
            Namrata

            Samir

            Show
            namrata.kakade Namrata Kakade (Inactive) added a comment - Hi Mohd Belal , As discussed, please update the media query for font-size changes related to ipad and raise the PR. As discussed, the input field alignment was slightly differ as per pdf, we did not make pdf specific changes. We have made changes for generic pdf and it differ pdf wise. Regards, Namrata Samir
            Hide
            priya.dhamande Priya Dhamande (Inactive) added a comment -

            Environment: Preprod
            Login: Candidate
            File Type: PDF, TEXT and HTML
            Browser: Safari
            Device: IPAD

            Issues verified:
            1. Able to add text for the navigation line
            2. Fields appearing - Slightly appearing up
            3. Signature component position - Moved slightly up

            Refer screen capture for the same.

            Mohd Belal Namrata Kakade, can you please verify the same.

            Samir Rohan J Khandave Hrishikesh Deshpande Sachin Hingole

            Refer screen capture.

            Show
            priya.dhamande Priya Dhamande (Inactive) added a comment - Environment: Preprod Login: Candidate File Type: PDF, TEXT and HTML Browser: Safari Device: IPAD Issues verified: 1. Able to add text for the navigation line 2. Fields appearing - Slightly appearing up 3. Signature component position - Moved slightly up Refer screen capture for the same. Mohd Belal Namrata Kakade , can you please verify the same. Samir Rohan J Khandave Hrishikesh Deshpande Sachin Hingole Refer screen capture.

              People

              Assignee:
              mohd.belal Mohd Belal (Inactive)
              Reporter:
              mohd.belal Mohd Belal (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - 16h Original Estimate - 16h
                  16h
                  Remaining:
                  Time Spent - 42.3h Remaining Estimate - 1h
                  1h
                  Logged:
                  Time Spent - 42.3h Remaining Estimate - 1h
                  42.3h