AEM 6.5 button core component not responsive? | Community
Skip to main content
N
NitroHazeDev
October 13, 2023

AEM 6.5 button core component not responsive?

  • October 13, 2023
  • 5 replies
  • 1965 views

Hi all,

 

I noticed that the button core component with a long text does not wrap when you try it on an XF and the layout mode say switching to Samsung galaxy or iPhone or resizing , tried the we-retail as well .. 6.5.17 instance 

Has anyone known of a solution ? 
@arunpatidar  copying you incase you have some ideas 

thanks,

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

5 replies

aanchal-sikka
Community Advisor
aanchal-sikkaCommunity Advisor
Community Advisor
October 13, 2023

@nitrohazedev 

 

Is it possible for you to add some screenshots?

 

Aanchal Sikka
    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    October 13, 2023

    Hi,

    Yes, I can see that same,

    the reason could be there is no viewport meta tag in XF

     

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>

     

     

    Arun Patidar
      N
      NitroHazeDevAuthor
      October 13, 2023

      Hi @arunpatidar  anything that can be done to solve it ? Not sure I follow .. kindly help me understand .. is it in the HTML button file that this would go into you think ? and thank you for the response 

      update - tried adding it to the component , that didn help .. 

      @aanchal-sikka  I just dragged a core component on the page , will try to get few but I think Arun already did .. 

      @kautuk_sahni - will do, thanks 

        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        October 13, 2023

        @nitrohazedev  Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

        Kautuk Sahni
          deftsoft
          deftsoft
          October 26, 2023

          Hi,

          I'm facing the same issue with the AEM 6.5 button core component. It's unresponsive and inconsistent, impacting our project's user experience and seeking advice or insights from anyone who has encountered and resolved this problem.

           

            aanchal-sikka
            Community Advisor
            aanchal-sikkaCommunity Advisor
            Community Advisor
            October 26, 2023

            hello @nitrohazedev @deftsoft 

             

            I just now tried on aem-sdk-quickstart-2023.10.13804.20231005T183332Z-230902.jar

             

            The Button is responsive. 

             

            Attaching XF.html to compare

             

             

            Aanchal Sikka
              N
              NitroHazeDevAuthor
              October 26, 2023

              Hi @aanchal-sikka  I tried with a continuous text on 6.5.17.. what’s your version .. switch emulators and try ? I can send a snapshot of what I see

              @deftsoft  same here tried an alternative .. looking for one ..

                N
                NitroHazeDevAuthor
                October 26, 2023

                To break Long word you need to put word-wrap:break-word css property.

                @nitrohazedev , I think you can try to add this CSS and check if it works with it.


                Thanks Arun .. intentionally skipped  additions since my thought was that use of OOTB should have contained this .. to make it XF friendly .. word break - trying to avoid cause of characters and break in Chinese words 

                @aanchal-sikka  aah.. we are on 6.5.17 and that’s why you don’t see it perhaps and we do .. update - I see that long text is not broken - so that is the issue .. realistically no one would key it in but possible with say Chinese characters 

                  Terms & ConditionsAccessibility statement

                  Loading footer...