Skip to:

  1. Skip to Jira Navigation
  2. Skip to Side Navigation
  3. Skip to Main Content

Provide a way to override a container line-height so line-height adjuster can work on it

Description

UI Options currently has a limitation where the line-height for the line-height adjuster is injected inline to the body element. The problem is that this line-height can be overriden by line-height specified by CSS on elements in the document.

There should be a way to identify elements to apply line-height adjustments to.

Environment

None

Activity

Justin ObaraJuly 24, 2024 at 4:13 PM

A css custom property, --fl-lineSpace was added as part of the work for FLUID-6260

Sean F @ opinDecember 16, 2020 at 2:26 AM
Edited

I posted a quick way to get this working on the other issue: https://issues.fluidproject.org/browse/FLUID-6167

Jonathan HungNovember 29, 2018 at 7:25 PM
Edited

Another approach is to inject a line-height class to the <body> element for the appropriate line-height scale to apply, and the integrator can specify custom CSS rules against that injected class.

Example HTML

<body class="fl-line-height-15">

<p class="some-text">

Foo<br/>

Bar

</p>

</body>

 

Example CSS

.some-text

{ line-height: 1.2rem; }

.fl-line-height-11 .some-text

{ line-height: 1.2rem; /* Override UIO and keep line spacing at 1.2 */ }

.fl-line-height-15 .some-text

{ line-height: 1.5rem; }

Jonathan HungJuly 7, 2017 at 3:51 PM

A possible solution would be use a class to identify elements to apply line-height adjustments to. For example a tagline has a default line-height which gets adjusted via a selector.

<body>
<p class="flc-uio-line-height-adjust tagline">
     Foo
</p>
</body>

.tagline {
     line-height: 1.3rem;
}

Fixed

Details

Assignee

Reporter

Components

Affects versions

Priority

Created July 7, 2017 at 3:44 PM
Updated July 24, 2024 at 4:13 PM
Resolved July 24, 2024 at 4:12 PM