search

elementor / elementor

The most advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.
https://elementor.com/
GNU General Public License v3.0
6.58k stars 1.42k forks source link

🐞 Bug report: Long text exceeds flexbox container boundaries. #18957

Open nerdtech opened 2 years ago

nerdtech commented 2 years ago

Prerequisites

Description

When you add a container to a page (flexbox) and type in one long word without any spaces if it is long enough it will exceed the boundaries of the container. I was expecting the word to break onto the next line when it reaches the boundaries of the container.

This appears to be related to Wordpress 6.0 as it works fine in an earlier version another user has verified.

This also happens when you put a container within the main container. Please check screenshot below:

https://prnt.sc/M1Frzp8eCyOT

thanks.

Steps to reproduce

  1. Insert a container.
  2. Add the heading or text editor widget to the container.
  3. Type in random characters or one long word with no spaces.
  4. The word/text will exceed the bounds of the container.

Isolating the problem

System Info

== Server Environment == Operating System: WINNT Software: Apache/2.4.47 (Win64) OpenSSL/1.1.1n PHP/8.1.6 MySQL version: MySQL Community Server (GPL) v5.7.33 PHP Version: 8.1.6 PHP Memory Limit: 512M PHP Max Input Vars: 1000 PHP Max Post Size: 2G GD Installed: Yes ZIP Installed: Yes Write Permissions: All right Elementor Library: Connected

== WordPress Environment == Version: 6.0 Site URL: http://demo.test Home URL: http://demo.test WP Multisite: No Max Upload Size: 2 GB Memory limit: 40M Max Memory limit: 512M Permalink Structure: /%postname%/ Language: en-GB Timezone: Europe/London Admin Email: admin@admin.com Debug Mode: Inactive

== Theme == Name: Hello Elementor Version: 2.5.0 Author: Elementor Team Child Theme: No

== User == Role: administrator WP Profile lang: en_GB User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

== Active Plugins == Classic Editor Version: 1.6.2 Author: WordPress Contributors

Elementor
    Version: 3.6.6
    Author: Elementor.com

Elementor Pro
    Version: 3.7.2
    Author: Elementor.com

== Elements Usage ==


Warning: Undefined array key "title" in C:\laragon\www\Demo\wp-content\plugins\elementor\core\experiments\experiments-reporter.php on line 89

== Elementor Experiments == Optimised DOM Output: Active by default Improved asset loading: Active by default Improved CSS Loading: Active by default Inline Font Icons: Inactive by default Accessibility improvements: Active by default Import Export Template Kit: Active by default Additional Custom Breakpoints: Active by default Hide native WordPress widgets from search results: Active by default : Inactive by default Flexbox Container: Active Default to New Theme Builder: Active by default Hello Theme Header & Footer: Active by default Landing pages: Active by default Color Sampler: Active by default Favorite Widgets: Active by default Admin Top Bar: Active by default Page Transitions: Active by default Notes: Active by default Form Submissions: Active by default Scroll Snap: Active by default

== Log ==

PHP: showing 4 of 4PHP: 2022-06-05 18:05:17 [notice X 1][C:\laragon\www\Demo\wp-content\plugins\elementor\core\common\modules\ajax\module.php::171] Undefined index: data [array ( 'trace' => '

0: Elementor\Core\Logger\Manager -> shutdown()

', )] PHP: 2022-06-06 09:17:30 [notice X 23][C:\laragon\www\Demo\wp-content\plugins\elementor\modules\dev-tools\deprecation.php::301] The $control_id argument is deprecated since version 3.5.0! [array ( 'trace' => '

0: Elementor\Core\Logger\Manager -> shutdown()

', )] PHP: 2022-06-06 09:17:33 [notice X 7][C:\laragon\www\Demo\wp-content\plugins\elementor\modules\dev-tools\deprecation.php::301] The $control_id argument is deprecated since version 3.5.0! [array ( 'trace' => '

0: Elementor\Core\Logger\Manager -> rest_error_handler()

1: C:\laragon\www\Demo\wp-content\plugins\elementor\modules\dev-tools\deprecation.php(301): class type trigger_error()

2: C:\laragon\www\Demo\wp-content\plugins\elementor\includes\managers\controls.php(523): Elementor\Modules\DevTools\Deprecation -> deprecated_argument()

3: C:\laragon\www\Demo\wp-content\plugins\elementor\includes\managers\controls.php(501): Elementor\Controls_Manager -> register()

4: C:\laragon\www\Demo\wp-content\plugins\e-addons-for-elementor\core\managers\controls.php(62): Elementor\Controls_Manager -> register_control()

', )] PHP: 2022-06-12 13:46:53 [warning X 5][C:\laragon\www\Demo\wp-content\plugins\elementor\core\common\modules\ajax\module.php::171] Undefined array key "data" [array ( 'trace' => '

0: Elementor\Core\Logger\Manager -> shutdown()

', )]

JS: showing 3 of 3JS: 2022-06-06 08:20:44 [error X 5][http://demo.test/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.6.5:2:5057] Cannot read properties of undefined (reading \'data\') JS: 2022-06-10 12:13:11 [error X 417][http://demo.test/wp-content/plugins/elementor/assets/lib/pickr/pickr.min.js?ver=1.5.0:2:16820] Cannot read properties of null (reading \'clone\') JS: 2022-06-10 12:13:16 [error X 18][http://demo.test/wp-content/plugins/elementor/assets/lib/pickr/pickr.min.js?ver=1.5.0:2:21012] Cannot read properties of null (reading \'changestop\')

Log: showing 12 of 122022-06-08 15:44:01 [info] elementor::elementor_updater Started 2022-06-08 15:44:01 [info] Elementor/Upgrades - _on_each_version Start
2022-06-08 15:44:01 [info] Elementor/Upgrades - _on_each_version Finished 2022-06-08 15:44:01 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '3.6.5', 'to' => '3.6.6', )] 2022-06-08 15:44:01 [info] Elementor data updater process has been queued. [array ( 'plugin' => 'Elementor', 'from' => '3.6.5', 'to' => '3.6.6', )] 2022-06-17 09:29:51 [info] elementor-pro::elementor_pro_updater Started 2022-06-17 09:29:51 [info] Elementor Pro/Upgrades - _on_each_version Start
2022-06-17 09:29:51 [info] Elementor Pro/Upgrades - _on_each_version Finished 2022-06-17 09:29:51 [info] Elementor Pro/Upgrades - _v_3_7_2_woocommerce_rename_related_to_related_products Start
2022-06-17 09:29:51 [info] Elementor Pro/Upgrades - _v_3_7_2_woocommerce_rename_related_to_related_products Finished 2022-06-17 09:29:51 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '3.7.1', 'to' => '3.7.2', )] 2022-06-17 09:29:51 [info] Elementor data updater process has been queued. [array ( 'plugin' => 'Elementor Pro', 'from' => '3.7.1', 'to' => '3.7.2', )]

== Elementor - Compatibility Tag ==

Elementor Pro: Compatible

== Elementor Pro - Compatibility Tag ==

josiase95 commented 2 years ago

Experiencing the exact same issue. Hopefully a fix will come soon 😩 With this bug happening, containers with headings are unusable on mobile/smaller devices.

79ho3ein commented 2 years ago

I do not experience this problem. Would you please describe the reproduction process? What widget do you use to write text? what is the orientation of the container?

nerdtech commented 2 years ago

I do not experience this problem. Would you please describe the reproduction process? What widget do you use to write text? what is the orientation of the container?

I already have explained the reproduction process in my original post. I simply add a container (new flexbox in alpha status) to the page as the default row (not column) and then add a heading widget for example. I type one long word without spaces and the word exceeds the containers boundaries. I only have elementor and pro activated and using the basic hello theme. Here is a short video of the problem for better clarification.

https://www.veed.io/view/ad66ba34-5a34-4b91-8324-0d77ca2f5405

79ho3ein commented 2 years ago

@nerdtech , Thanks for the great video. I first checked this bug, but found no problem. (elementor, elementor Pro and hello elementor were updated) But after I updated WordPress to version 6, this bug was created. This bug appears to be related to version 6 of WordPress.

nerdtech commented 2 years ago

Thanks for the great video. I first checked this bug, but found no problem. (elementor, elementor Pro and hello elementor were updated) But after I updated WordPress to version 6, this bug was created. This bug appears to be related to version 6 of WordPress.

Thanks for the information it will be useful.

m1ga commented 2 years ago

I've compared it to Astra where it is working. It looks like Hello is missing a word-wrap: break-word;. Adding that by hand will make it work again

nerdtech commented 2 years ago

I've compared it to Astra where it is working. It looks like Hello is missing a word-wrap: break-word;. Adding that by hand will make it work again

The hello theme definitely works in an earlier version of wordpress like 5.9.3. As soon as I upgrade to wordpress 6.0 it stops working again so I'm unsure if it's just the theme.

m1ga commented 2 years ago

Not sure since I haven't used Hello for a while. This entry in Astra is responsible for the word-wrap: https://github.com/brainstormforce/astra/blob/963347f81bb5d8ec5341b2313b02ce98de76bf5f/sass/site/blog/blog-layouts/_blog-common.scss#L29 Maybe Wordpress <6.0 had a default word-wrap and that got removed. And it wasn't an issue since Astra was overriding it anyways

nerdtech commented 2 years ago

Not sure since I haven't used Hello for a while. This entry in Astra is responsible for the word-wrap: https://github.com/brainstormforce/astra/blob/963347f81bb5d8ec5341b2313b02ce98de76bf5f/sass/site/blog/blog-layouts/_blog-common.scss#L29 Maybe Wordpress <6.0 had a default word-wrap and that got removed. And it wasn't an issue since Astra was overriding it anyways

Thanks I added <style>.e-container { word-wrap: break-word; }</style> as a custom code and applied it to the entire site and now it works correctly even with the hello theme in wordpress 6.0... so I will use this temporary workaround for now until a permanent solution is found..