The parent element is concealed when the content inside the expanding span grows

Question

The parent element is concealed when the content inside the expanding span grows

I created an HTML and CSS design with the following styles:

.sectionTitle {
  color: #fff;
  background-color: #e8eaed;
  padding: 0;
  height: auto;
}

.contentAlignment {
  margin-left: 10px;
  line-height: 23px;
  max-width: 100%;
  cursor: text;
  font-size: 15px;
}

.contentAlignment {
  font-size: 14px !important;
}

.contentAlignment {
  margin-left: 0;
}

The <span> element within the div using the class contentAlignment displays dynamic content that needs to be shown as provided by the user, even if it has a large font size which may overflow the parent div.

To address this issue, I attempted to adjust the CSS properties by changing the line-height:

.contentAlignment {
  line-height: 0;
  margin-left: 0;
}

However, removing the line-height property entirely from the global CSS file did not solve the problem, as it is used across all pages and altering it might affect other components. The challenge now lies in finding a suitable solution without compromising the existing layout.

html css bootstrap-4

Answer 1

Answer №1

Seems like the issue stems from setting line-height in pixels rather than relative to the font size. (Note: It's also recommended to use rem or em units for the font size, although that isn't directly related to this problem).

I've gone ahead and removed the CSS that was being overwritten anyway.

.sectionTitle {
  color: #fff;
  background-color: #e8eaed;
  padding: 0;
  height: auto;
}

.contentAlignment {
  line-height: 1.35;
  max-width: 100%;
  cursor: text;
  font-size: 14px;
  margin-left: 0;
}

<div class="sectionSpacing col-12">
  <!---->
  <div>
    <!---->
    <div class="sectionTitle d-flex justify-content-between align-items-center">
      <label class="formLabelStyles sectionheading">References</label>
    </div>

    <!---->
    <div>
      <!---->
      <div class="contentAlignment">
        <span style="font-size: 48px; background-color: rgb(255, 0, 0);">Middle Cerebral Artery</span>
      </div>
    </div>
  </div>
</div>

Answer 2

Seems like the issue stems from setting line-height in pixels rather than relative to the font size. (Note: It's also recommended to use rem or em units for the font size, although that isn't directly related to this problem).

I've gone ahead and removed the CSS that was being overwritten anyway.

.sectionTitle {
  color: #fff;
  background-color: #e8eaed;
  padding: 0;
  height: auto;
}

.contentAlignment {
  line-height: 1.35;
  max-width: 100%;
  cursor: text;
  font-size: 14px;
  margin-left: 0;
}

<div class="sectionSpacing col-12">
  <!---->
  <div>
    <!---->
    <div class="sectionTitle d-flex justify-content-between align-items-center">
      <label class="formLabelStyles sectionheading">References</label>
    </div>

    <!---->
    <div>
      <!---->
      <div class="contentAlignment">
        <span style="font-size: 48px; background-color: rgb(255, 0, 0);">Middle Cerebral Artery</span>
      </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

The issue at hand stems from the utilization of a fixed line height within your style sheet, causing an unintended enlargement of the font size while maintaining a line_height: 23px

To rectify this situation, simply eliminate the line-height declaration.

.sectionTitle {
  color: #fff;
  background-color: #e8eaed;
  padding: 0;
  height: auto;
}

.contentAlignment {
  margin-left: 10px;
  max-width: 100%;
  cursor: text;
  font-size: 15px;
}

.contentAlignment {
  font-size: 14px !important;
}

.contentAlignment {
  margin-left: 0;
}

<div class="sectionSpacing col-12">
  <!---->
  <div>
    <!---->
    <div class="sectionTitle d-flex justify-content-between align-items-center">
      <label class="formLabelStyles sectionheading">References</label>
    </div>

    <!---->
    <div>
      <!---->
      <div class="contentAlignment">
        <span style="font-size: 48px; background-color: rgb(255, 0, 0);">Middle Cerebral Artery</span>
      </div>
    </div>
  </div>
</div>

Answer 4

The issue at hand stems from the utilization of a fixed line height within your style sheet, causing an unintended enlargement of the font size while maintaining a line_height: 23px

To rectify this situation, simply eliminate the line-height declaration.

.sectionTitle {
  color: #fff;
  background-color: #e8eaed;
  padding: 0;
  height: auto;
}

.contentAlignment {
  margin-left: 10px;
  max-width: 100%;
  cursor: text;
  font-size: 15px;
}

.contentAlignment {
  font-size: 14px !important;
}

.contentAlignment {
  margin-left: 0;
}

<div class="sectionSpacing col-12">
  <!---->
  <div>
    <!---->
    <div class="sectionTitle d-flex justify-content-between align-items-center">
      <label class="formLabelStyles sectionheading">References</label>
    </div>

    <!---->
    <div>
      <!---->
      <div class="contentAlignment">
        <span style="font-size: 48px; background-color: rgb(255, 0, 0);">Middle Cerebral Artery</span>
      </div>
    </div>
  </div>
</div>

Answer 5

Answer №3

The issue arises from the discrepancy in line-height: 23px not aligning with the specified font-size (in this instance, 43px).

To remedy this, simply add line-height: normal to the .contentAlignment class. Unless another source specifies a more specific line-height, this should resolve the issue. Additionally, ensure that line-height: normal is placed after line-height: 23px in the CSS file as styles are processed from top to bottom. If your selector is more specific, it will take precedence.

You can observe in my example where I've included line-height: normal after line-height: 23px, effectively overriding the previous line-height. Remember, this principle also applies to stylesheets, so ensure that the stylesheet applying line-height: normal is read after the one implementing line-height: 23px (unless your selector is more specific).

.sectionTitle {
  color: #fff;
  background-color: #e8eaed;
  padding: 0;
  height: auto;
}


/*class from global css file */

.contentAlignment {
  /* doesn't work - it's being overridden */
  line-height: normal;
}

div.contentAlignment {
  /* works - more specificity than just .contentAlignment */
  line-height: normal;
}


.contentAlignment {
  margin-left: 10px;
  line-height: 23px;
  max-width: 100%;
  cursor: text;
  font-size: 15px;
  /* works - supersedes the line-height */
  line-height: normal;
}

.contentAlignment {
  /* works - overrides the line-height */
  line-height: normal;
}

/*these classes are modifications within the component itself */

.contentAlignment {
  font-size: 14px !important;
}

.contentAlignment {
  margin-left: 0;
}

<div class="sectionSpacing col-12">
  <!---->
  <div>
    <!---->
    <div class="sectionTitle d-flex justify-content-between align-items-center">
      <label class="formLabelStyles sectionheading">References</label>
    </div>

    <!---->
    <div>
      <!---->
      <div class="contentAlignment">
        <span style="font-size: 48px; background-color: rgb(255, 0, 0);">Middle Cerebral Artery</span>
      </div>
    </div>
  </div>
</div>

Answer 6

The issue arises from the discrepancy in line-height: 23px not aligning with the specified font-size (in this instance, 43px).

To remedy this, simply add line-height: normal to the .contentAlignment class. Unless another source specifies a more specific line-height, this should resolve the issue. Additionally, ensure that line-height: normal is placed after line-height: 23px in the CSS file as styles are processed from top to bottom. If your selector is more specific, it will take precedence.

You can observe in my example where I've included line-height: normal after line-height: 23px, effectively overriding the previous line-height. Remember, this principle also applies to stylesheets, so ensure that the stylesheet applying line-height: normal is read after the one implementing line-height: 23px (unless your selector is more specific).

.sectionTitle {
  color: #fff;
  background-color: #e8eaed;
  padding: 0;
  height: auto;
}


/*class from global css file */

.contentAlignment {
  /* doesn't work - it's being overridden */
  line-height: normal;
}

div.contentAlignment {
  /* works - more specificity than just .contentAlignment */
  line-height: normal;
}


.contentAlignment {
  margin-left: 10px;
  line-height: 23px;
  max-width: 100%;
  cursor: text;
  font-size: 15px;
  /* works - supersedes the line-height */
  line-height: normal;
}

.contentAlignment {
  /* works - overrides the line-height */
  line-height: normal;
}

/*these classes are modifications within the component itself */

.contentAlignment {
  font-size: 14px !important;
}

.contentAlignment {
  margin-left: 0;
}

<div class="sectionSpacing col-12">
  <!---->
  <div>
    <!---->
    <div class="sectionTitle d-flex justify-content-between align-items-center">
      <label class="formLabelStyles sectionheading">References</label>
    </div>

    <!---->
    <div>
      <!---->
      <div class="contentAlignment">
        <span style="font-size: 48px; background-color: rgb(255, 0, 0);">Middle Cerebral Artery</span>
      </div>
    </div>
  </div>
</div>

The parent element is concealed when the content inside the expanding span grows

Answer №1

Answer №2

Answer №3

Similar questions

Discover the visibility of an element through monitoring DOM manipulation with Selenium

What is the CSS technique for displaying text overflow after displaying only two lines within a div?

When submitting a form with the jQueryForm plugin, take action on the form by selecting it with `$(this)`

Troubleshooting a display issue with Chrome's User Agent - Possible CSS solution?

Activate the WebDAV feature within the .htaccess file

Can you customize the background color for the entire section where the first child appears in a nested collapsible list with CSS?

Personalize a bootstrap theme specifically for the mobile interface

Angular element fails to display properly

The item on my list is barely visible, as the height of the list column is adjusted upon loading the page

Tips for creating a layout with two responsive columns side by side: one with text and the other with an image, using Bootstrap 4

Unable to adjust the border radius of a filled text-field variant in Material-ui-core

Automating the process of populating preferredCountries from intl-tel-input with database output

How do you locate elements using text in Selenium with special characters like &#65279?

Set the background of the vue widget to be completely see-through

Whenever I insert an http link for FontAwesome, the icons work perfectly fine. However, when I try to host it locally,

Utilizing Bootstrap for Efficient Image Alignment

Using Laravel to seamlessly integrate Bootstrap modals into a table structure

Excessive content and the upper limit of height

Incorporating JavaScript unit tests into an established website

AJAX fails to retrieve a result