search

jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
49.36k stars 3.96k forks source link

card-header-title: Inline html elements "swallow" adjoining whitespace. #3650

Open rkofman opened 1 year ago

rkofman commented 1 year ago

This is about Bulma. I believe this is a bug, but I may incorrect or it may be easier to fix as documentation.

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version [0.9.4] My browser is: Google Chrome Version 113.0.5672.92 (Official Build) (arm64) I am sure this issue is not a duplicate

Description

When inline elements are used as direct children of a card-header-title, they will disrupt the inline flow of text and erase any adjoining whitespace. There are workaround, but if the behavior is expected, it could use better documentation.

Screenshot 2023-05-22 at 2 31 27 AM

Steps to Reproduce

  1. Have a card with a title that includes html similar to the following: 
    <h3 class="card-header-title">Item <mark>match</mark>ing search</h3>
  2. For example, see this jsfiddle
  3. Observe the resulting whitespace

Expected behavior

There should be a single space between Item and matching:

Screenshot 2023-05-22 at 2 31 38 AM

Actual behavior

The word "Item" runs right into "matching" with no whitespace:

Screenshot 2023-05-22 at 2 31 27 AM

Workarounds

  1. One workaround is to wrap the contents of card-header-title in a separate element -- so that its children do not automatically become flex items. This causes extra markup, and is not mentioned anywhere in the documentation as a necessary step:

    <div class="card-header-title"><h3>Item <mark>match</mark>ing search</h3></div>

  2. Another workaround is to manually apply a display: block to card-header-title. e.g:

    <h3 class="card-header-title" style="display:block;">Item <mark>match</mark>ing search</h3>

    Thoughts on causes (& potential fixes)

  3. This behavior occurs because of display:flex on card-header title (link to code). One way to fix it would be to simply remove that line (and also align-items: center which would no longer be valid. However, this would break the ability to add .is-centered as mentioned in the 0.5.3 changelog.

  4. If the expectation is that card-header-title is a container for other elements that contain text and is not expected to contain text directly, the documentation should be updated to reflect this expectation. For example, the Card component docs could replace their <p class="card-header-title">Card header</p> example with <div class="card-header-title"><p>Card header</p></div>

I am happy to submit a PR for either approach, but would like guidance (especially since solution # 1 would break existing functionality and need a bit more work to be less disruptive).

dh-i commented 1 year ago

@rkofman You are correct with the point 1 and guess it is the expected behaviour, that is at the best left as it is.

For the issue you are facing you can use HTML Entity (&nbsp -> non-breaking space) as below

<h3 class="card-header-title">Item&nbsp<mark>match</mark>ing search</h3>