Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

AEM 6.5 button core component not responsive?

Avatar

Level 10

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,

13 Replies

Avatar

Community Advisor

@NitroHazeDev 

 

Is it possible for you to add some screenshots?

 


Aanchal Sikka

Avatar

Community Advisor

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"/>

 

arunpatidar_0-1697183936235.png

 



Arun Patidar

Avatar

Level 10

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 

Avatar

Administrator

@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

Avatar

Level 1

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.

 

Avatar

Community Advisor

hello @NitroHazeDev @deftsoft 

 

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

 

The Button is responsive. 

aanchalsikka_0-1698304156155.png

 

Attaching XF.html to compare

 

 


Aanchal Sikka

Avatar

Level 10

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 ..

Avatar

Community Advisor

@NitroHazeDev 

 

I doubt that OOTB any components break a really long word. I have tried with Text and button both.

aanchalsikka_0-1698325060098.png

 

You might need to add your custom CSS to achieve the desired behaviour. Example: https://stackoverflow.com/questions/15182338/making-a-very-long-word-fit-in-responsive-element

 


Aanchal Sikka

Avatar

Level 10

@aanchal-sikka  it still does to me and yes custom css is the solution on my mind as well but OOTB should work is the concern raised without customization  ..  , what version are you on ? Did you try the emulators ?  . Will post a snapshot soon

Avatar

Community Advisor

@NitroHazeDev 

 

I am using AEMaaCS release 2023.10.13804.20231005T183332Z-230902

I have tried with the Emulator available via Layout mode.

Long word is not broken down. But for long sentences, the text is moving to the next line.


Aanchal Sikka

Avatar

Community Advisor

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.



Arun Patidar

Avatar

Level 10

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 

Avatar

Level 10

Closing the discussion with comment- This issue existed on the OOTB core component -button . The core component does not appear to be responsive. An approach would be customizing to adjust responsiveness that needs to be undertaken with caution to avoid upgrade issues