Joomla! Issue Tracker | Joomla! CMS #37272 - Remove wrong implementation of display: box and line-clamp

? NPM Resource Changed ?

Fixed in Code Base
18 Mar 2022
Medium
Build: 4.1-dev
# 37272
Diff
RickR2H:atum-CSS-fixes

Pending

User tests: Successful: Unsuccessful:

RickR2H
14 Mar 2022

Pull Request for Issue # .

Summary of Changes

In the Atum template I noticed a wrong implementation of the line-clamp property in combination with display box which throws a waring when using a CSS prefixer. This styling is also obsolete as truncating is added in the PHP code.

Testing Instructions

Apply the patch and build the CSS. Go to modules and click on "New". Nothing is changed in the layout.

29407fd 14 Mar 2022

fix You should write display: flex by final spec instead of display: box

bfc8ed1 14 Mar 2022

Correct implementation

ffb66dc 14 Mar 2022

Remove ignore style

4f19f81 14 Mar 2022

Added browser support check

RickR2H - open - 14 Mar 2022

RickR2H - change - 14 Mar 2022

Status

New

⇒

Pending

joomla-cms-bot - change - 14 Mar 2022

Category

⇒

Repository NPM Change

RickR2H - change - 14 Mar 2022

Title

…

Prefix warning: You should write display: flex by final spec instead of display: box

Fix wrong implementation of display: box and line-clamp

RickR2H - edited - 14 Mar 2022

brianteeman - comment - 14 Mar 2022

This is not correct. Well the css might be (i dont know) but the intended behaviour is to truncate the text at 200 characters

joomla-cms/administrator/components/com_modules/tmpl/select/default.php

Line 64 in 06ae97f

    
           <?php $desc = HTMLHelper::_('string.truncate', $this->escape(strip_tags($item->desc)), 200); ?>

RickR2H - comment - 14 Mar 2022

As my CSS prefixer tripped over the code I noticed the wrong implementation of the CSS. I agree with the 200 character truncate. I'll just remove the wrong code.

c6f1333 14 Mar 2022

Remove absolete code

RickR2H - change - 14 Mar 2022

Labels

Added: NPM Resource Changed ?

RickR2H - change - 14 Mar 2022

The description was changed

RickR2H - edited - 14 Mar 2022

RickR2H - change - 14 Mar 2022

Title

…

~~Fix~~ wrong implementation of display: box and line-clamp

Remove wrong implementation of display: box and line-clamp

RickR2H - edited - 14 Mar 2022

RickR2H - comment - 14 Mar 2022

@brianteeman thanks for the review

brianteeman - comment - 14 Mar 2022

Confirming that chrome agrees the current css is wrong

brianteeman - comment - 14 Mar 2022

I have tested this item ✅ successfully on c6f1333

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/37272.}

brianteeman - test_item - 14 Mar 2022 - Tested successfully

Quy - comment - 14 Mar 2022

I have tested this item ✅ successfully on c6f1333

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/37272.}

Quy - test_item - 14 Mar 2022 - Tested successfully

Quy - change - 14 Mar 2022

Status

Pending

⇒

Ready to Commit

Quy - comment - 14 Mar 2022

RTC

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/37272.}

C-Lodder - comment - 16 Mar 2022

Browsers are only complaining because it hasn't been implemented properly. The feature is completely prefixed.

Just use (with -webkit- prefix):

&-caption {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

RickR2H - comment - 16 Mar 2022

@C-Lodder I'm aware, but like @brianteeman said the text get truncated in the PHP. This was an old implementation to truncate by CSS to three lines. So code is obsolete.

76625fb 18 Mar 2022