How to not shink the white background field when no text or having only the white space-CodePudding

I don't know that how to expand the span background color if there is on text inside like this.

I want the white background with on text to remain the same size as white background with text.

My CSS

.dashboard-data-field {
  display: grid;
  grid-auto-flow: row;
  align-content: center;
}
.dashboard-data-header {
  padding: 4px;
}
.dashboard-data-description {
  padding: 8px;
  background-color: #fff;
}

My JavaScript

                <div className="dashboard-data-field">
                    <span className="dashboard-data-header">ชื่อ-นามสกุล</span>
                    <span className="dashboard-data-description">{`${auth.user.firstname} ${auth.user.lastname}`}</span>
                </div>

CodePudding user response：

You could try two different solutions:

Adding a   as the content of the html element when it's supposed to be empty.
Or you could add the css style attribute min-height: 1em; in the rules addressing header and description. (I corrected this part compared to what I wrote before)

I picked the second option here because consistent with css font-size arbitrarily chosen and doesn't require you to modify the logic to fill the contents adding a non blank space when it's empty:

.dashboard-data-field {
  display: grid;
  grid-auto-flow: row;
  align-content: center;

  /*the field background is yellow to get contrast with the description bg*/
  background-color: yellow;
}
.dashboard-data-header {
  display: block;
  padding: 4px;

  /*this shows the size of the header*/
  border: solid 1px red;

  /*minimum height is 1em even when the content is empty*/
  min-height: 1em;
}
.dashboard-data-description {
  display: block;
  padding: 8px;

  /*this background will cover the parent background*/
  background-color: #fff;

  /*this shows the size of the header*/
  border: solid 1px red;
  border-top: none;

  /*minimum height is 1em even when the content is empty*/
  min-height: 1em;
}

<div >
  <span >Header with content</span>
  <span >Description with content</span>
</div>

<br>

<div >
  <span ></span>
  <span ></span>
</div>

CodePudding user response：

Give fixed height to span from where you wanna show text

.dashboard-data-field {
    display: grid;
    grid-auto-flow: row;
    align-content: center;
  }
  .dashboard-data-header {
    padding: 4px;
  }
  .dashboard-data-description {
    padding: 8px;
    background-color: red;
    height: 40px;
  }

const App = () => {
  return (
    <>
      <div className="dashboard-data-field">
        <span className="dashboard-data-header">ชื่อ-นามสกุล</span>
        <span className="dashboard-data-description">with text</span>
      </div>
      <div className="dashboard-data-field">
        <span className="dashboard-data-header">ชื่อ-นามสกุล</span>
        <span className="dashboard-data-description"></span>
      </div>
    </>
  );
};

export default App;