Adjust the height of the parent element containing the divs nested within the span

I recently created a unique square grid of SVG icons and positioned them directly to the right of some text within a header.

The code for creating this grid looks like this:

<div>HEADER TEXT    
  <span>
    <div>
      <svg></svg>
      <svg></svg>
    </div>
    <div>
      <svg></svg>
      <svg></svg>
    </div>
  </span>
</div>

Here is the CSS for the span:

display: inline-block;

Everything seems to be working well, except for one issue - the height of the outer div containing the grid increases by the height of one of the inner divs.

For example, if the icon row div is 20px tall, the parent div grows from 70px to 90px in height.

This stacking behavior seems to be causing the problem.

Even when the height is set explicitly to 70px, the icons still shift down and protrude out of the div container.

Is there a way to prevent this behavior? Or perhaps a more elegant solution to implement the grid of icons without encountering this issue?

I have created a demonstration using Plnkr to showcase this problem...

http://plnkr.co/edit/IcXkse4XLnDI83OQ7G4S

htmlcss

Answer №1

To resolve the issue, a quick solution is to include font-size: 0; in the style of .share-square-div. This solves the problem because .share-square-div is currently inheriting a font-size: 62px; from .header, and your SVG's are set to display: inline; by default. Consequently, the browser interprets the SVG's as text, causing .share-square-div to expand as though it contains text. However, with a specified height and the addition of font-size: 0;, this overflow issue can be remedied.

A demonstration illustrating this fix has been added below:

var $button = $('#button');
var $shareSquareDiv = $('.share-square-div');
var step = 0;

$button.on('click', cycleExample);
cycleExample();

function cycleExample() {
  switch (step) {
    case 0:
      $button.text('hide overflow on .share-square-div');
      $shareSquareDiv.each( function() {
        $(this).css('background-color', 'orange');
        $(this).css('font-size', '');
      });
      break;
    case 1:
      $button.text('set height to auto on .share-square-div');
      $shareSquareDiv.each( function() {
        $(this).css('overflow', 'hidden');
      });
      break;  
    case 2:
      $button.text('reset height to 20px and set font-size to 0');
      $shareSquareDiv.each( function() {
        $(this).css('height', 'auto');
        $(this).css('overflow', '');
      });
      break;  
    case 3:
      $button.text('success! restart demo');
      $shareSquareDiv.each( function() {
        $(this).css('height', '');
        $(this).css('font-size', '0');
        $(this).css('background-color', '');
      });
      step = -1;
      break;
  }
  
  step++;
}
/* Styles go here */
.share-square-span {
display: inline-block;
}

.share-square-div {
height: 20px;
  
    /* ===add this=== */
    /* font-size: 0; */
    /* ============== */
}

.share-icon {
margin-right: 4px;
}


.header {
font-size: 62px;
font-weight: 300;
text-align: center;
}

.fixed-height-header {
  height: 71px;
  font-size: 62px;
font-weight: 300;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button"></button>
<div class="header" style="background:blue;">First Header</div>

    
    <div class="header" style="background:yellow;"><span>Second Header</span>
    
    <span class="share-square-span">

  <div class="share-square-div"><!-- 
  
  --><svg class="share-icon" enable-background="new 0 0 266.893 266.895" height="16px" id="Layer_1" version="1.1" viewBox="0 0 266.893 266.895" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d="M248.082,262.307c7.854,0,14.223-6.369,14.223-14.225V18.812  c0-7.856-6.368-14.224-14.223-14.224H18.812c-7.856,0-14.224,6.367-14.224,14.224v229.271c0,7.854,6.366,14.225,14.224,14.225  H248.082z" fill="#3C5A99" id="Blue_1_"/>
        <path d="M185.076,246.307v-99.803h33.499l5.016-38.896h-38.515V82.777c0-11.261,3.127-18.935,19.274-18.935  l20.596-0.009V29.045c-3.562-0.475-15.787-1.533-30.012-1.533c-29.694,0-50.024,18.126-50.024,51.413v28.684h-33.585v38.896h33.585  v99.803H185.076z" fill="#FFFFFF" id="f"/>
      </svg><!--
      
      --><svg class="share-icon" enable-background="new 0 0 64 64" height="16px" id="Layer_1" version="1.1" viewBox="0 0 64 64" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M62.967,52.35c0,5.863-4.753,10.617-10.618,10.617H11.65c-5.863,0-10.617-4.754-10.617-10.617v-40.7  c0-5.863,4.753-10.617,10.617-10.617h40.699c5.864,0,10.618,4.753,10.618,10.617V52.35z" fill="#60A8DC"/>
  <g id="XMLID_1_"><g><path d="M5.515,48.65c0.846,0.104,1.713,0.154,2.59,0.154c5.098,0,9.783-1.744,13.488-4.653    c-4.757-0.094-8.762-3.23-10.145-7.554c0.671,0.134,1.352,0.196,2.054,0.196c0.991,0,1.94-0.134,2.858-0.382    c-4.984-1.001-8.72-5.387-8.72-10.66c0-0.041,0-0.083,0-0.134c1.465,0.815,3.137,1.3,4.922,1.362c-2.91-1.95-4.83-5.273-4.83-9.05    c0-1.992,0.537-3.86,1.465-5.459c5.366,6.573,13.374,10.897,22.404,11.351c-0.186-0.794-0.279-1.62-0.279-2.477    c0-6.006,4.861-10.866,10.856-10.866c3.137,0,5.964,1.321,7.946,3.426c2.477-0.485,4.799-1.383,6.904-2.631    c-0.805,2.539-2.528,4.665-4.788,6.016c2.208-0.268,4.293-0.856,6.253-1.713c-1.455,2.177-3.302,4.086-5.428,5.624    c0.011,0.464,0.021,0.939,0.021,1.404c0,14.365-10.918,30.927-30.907,30.927C16.041,53.531,10.313,51.735,5.515,48.65z" fill="#FFFFFF"/></g><g/></g>
  </svg>
  
  </div>
  
  <div class="share-square-div"><!--
  
  --><svg class="share-icon" enable-background="new -16 -16 64 64" height="16px" id="Layer_1" version="1.1" viewBox="-16 -16 64 64" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M47.083,35.427c0,6.438-5.219,11.656-11.656,11.656H-3.427c-6.438,0-11.656-5.219-11.656-11.656V-3.427  c0-6.438,5.219-11.656,11.656-11.656h38.854c6.438,0,11.656,5.219,11.656,11.656V35.427z" fill="#D93725"/>
  <g>
  <path d="M16.724,20.112c-1.528-1.079-4.444-3.705-4.444-5.251c0-1.809,0.518-2.7,3.239-4.828   c2.789-2.182,4.77-5.755,4.77-9.326c0-4.244-1.896-6.848-5.444-10.254h5.354l3.778-1.703c0,0-12.662,0-16.884,0   c-7.571,0-14.691,5.726-14.691,12.365c0,6.79,5.158,12.265,12.859,12.265c0.535,0,1.056-0.014,1.565-0.048   c-0.501,0.955-0.856,2.03-0.856,3.149c0,1.886,1.016,3.416,2.296,4.666c-0.966,0-1.904,0.027-2.924,0.027   c-9.38,0-16.592,5.968-16.592,12.161c0,6.094,7.91,9.914,17.283,9.914c10.688,0,16.589-6.067,16.589-12.164   C22.624,26.194,21.181,23.272,16.724,20.112z M7.703,11.653c-4.351-0.13-8.482-4.866-9.234-10.574   C-2.279-4.636,0.636-9.007,4.982-8.878c4.35,0.133,8.483,4.715,9.236,10.427C14.969,7.263,12.051,11.783,7.703,11.653z    M5.999,40.549c-6.48,0-11.16-4.098-11.16-9.027c0-4.829,5.804-8.85,12.285-8.778c1.513,0.02,2.922,0.258,4.199,0.676   c3.518,2.446,6.042,3.832,6.759,6.613c0.129,0.567,0.203,1.152,0.203,1.746C18.285,36.699,15.11,40.549,5.999,40.549z" fill="#FFFFFF"/><polygon fill="#FFFFFF" points="34.732,12.594 34.732,4.078 31.327,4.078 31.327,12.594 22.812,12.594 22.812,16 31.327,16    31.327,24.515 34.732,24.515 34.732,16 43.25,16 43.25,12.594  "/>
  </g>
  </svg><!--
  
  --><svg class="share-icon" height="16px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M456,506H56c-27.617,0-50-22.393-50-50V56  C6,28.383,28.383,6,56,6h400c27.618,0,50,22.383,50,50v400C506,483.607,483.618,506,456,506z M214.213,259.408  c0-0.762-0.195-1.475-0.224-2.227l98.73-54.814c9.649,8.135,21.953,13.232,35.576,13.232c30.655,0,55.498-24.843,55.498-55.488  c0-30.654-24.843-55.498-55.498-55.498c-30.654,0-55.498,24.844-55.498-...

Answer №2

To change the default display property of divs, you can use either display:inherit or display:inline in your CSS.

<style>
    div {display:inline}
</style>
<span>
    <div>row 1, cell 1</div>
    <div>row 1, cell 2</div>
</span>

If you want all divs to have the same width regardless of content:

<style>
   div{ display: inline; overflow: hidden; width: 20px, height: 20px }
</style>

While using a table might seem like an easier solution, it may not be optimal for all screen resolutions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The border color of the text input is not changing as expected when in focus

Is there a way to change the border color of a text input field to blue when it is not selected and then change it to orange when the field is selected? input[type="text"]{ border: 1px solid blue; } input[type="text"]:focus{ border: 1px solid ora ...

javascripthtmlcss

Error: Identical div IDs detected

<div id="tagTree1" class="span-6 border" style='width:280px;height:400px;overflow:auto;float:left;margin:10px; '> <a class="tabheader" style="font-size:large">Data Type</a><br /> <div class="pane">Refine sea ...

javascripthtmlcss

What is preventing BODY from respecting min-height: 100% ?

Struggling to create a basic webpage with a container that extends to the bottom? Here's what I'm aiming for: #Main should be as tall as the viewport, but able to stretch further with additional content. body should match the viewport height, y ...

htmlcssheightdocument-body

Angular: verifying the presence of any of the ng-content slots supplied

I have a component template that contains several ng-content elements: <div class="form__general"> <ng-content select="[general]"></ng-content> </div> <div class="form__footer"> <ng-conte ...

htmlangularng-content

The hideCol method does not work on jqGrid

Encountering a problem with the hidecol method in jqGrid. Despite calling the method, nothing seems to happen. Using version 4.5 of jqGrid. The table is created as follows: // Table creation using jqGrid $('#shipTable').jqGrid({ data: tabl ...

jquerycssjqgrid

Mapping an array in ReactJS based on the specific order of another array

In my experience with Unmitigated, the answer proved beneficial. If you're arriving from a Google search, please scroll down for more information. Order: [ "567", "645", "852", "645", "852", "852 ...

javascripthtmlreactjsarraysreact-hooks

"Learn how to convert basic input fields into user-friendly Bootstrap input groups using the power of jQuery

Is there a way to use jQuery to convert my basic input field into a bootstrap input-group like the one shown below? This is how I created the input: <div class='input-group date' id='ff'> <input type='text' class= ...

javascriptjqueryhtmltwitter-bootstrap

How can I arrange images vertically instead of placing them side by side?

I need help figuring out how to display multiple images in a vertical format instead of horizontally in the code below. The images are wide and take up too much space if shown side by side. My coding skills are basic, so specific guidance on where to mak ...

phphtmlcss

Guide to creating a contenteditable div that automatically generates smart quotes instead of traditional dumb quotes

I've observed that when I write in Google Docs, I get smart quotes. However, when I create contenteditable divs on my own, I only see dumb quotes. Is there a way to make my contenteditable divs display smart quotes instead of dumb quotes? ...

javascripthtmlcss

Modifications to the toolbar styling are made by the Angular Material mat-form-field

Having some trouble creating an input field in my component alongside a mat-toolbar element. When I try to insert a mat-form-field, it ends up messing with the styling of the mat-toolbar. I've been unable to pinpoint exactly where the issue lies (if ...

cssangularangular-material

Move the divs within the overflow container by sliding them, then take out the initial element and append it to the end

Currently, when I utilize .appendTo(".wrapper") as shown in the code below, it eliminates the animation effect. My goal is to have the div on the far left slide out of view, triggering an overflow hidden effect, and then be placed at the end of the slide c ...

javascriptjqueryhtmlcss

Create an HTML table with a static header, adjustable columns, and the ability to resize to a width smaller than the content

Looking to create a unique web application with a table that has a fixed, styled header, resizable columns, and the ability to resize the columns without truncating content. Additionally, I want the body of the table to scroll if it cannot all fit on the p ...

jquerycsshtmlwebkithtml-table

Applying the document height to window height ratio to create a scale ranging from 1 to 100

My goal is to create a scroll bar using two divs with heights of 110px and 10px. The smaller one will be nested inside the taller one, allowing for adjustment of its margin-height from 0 to 100px while still fitting within the larger div. When I refer to ...

javascriptjquerycss

Eliminating padding from columns results in the appearance of a horizontal scrollbar

I needed to eliminate the padding from the bootstrap grid column classes. So I went ahead and did just that .col-x { padding: 0; } However, this action ended up causing the entire layout to break as a horizontal scrollbar appeared. I've put to ...

htmlcsstwitter-bootstrapbootstrap-4

JavaScript: Controlling the ability to enter text based on the chosen option from a drop-down menu

After struggling to make my code work, I decided to create a piece of JavaScript to disable a text input when "Cash" payment is selected from the dropdown menu. On the contrary, I aimed to enable the text input if "Credit Card" payment was chosen. Unfortun ...

javascriptjqueryhtml

What is the best way to retrieve both the start and end date values from a React date range picker component

I have integrated a date range picker npm package called react-date-range into my code. On my screen, there is an "Apply Dates" button. When this button is clicked, I want to retrieve the selected date range value. How can I achieve this onclick event? ...

javascripthtmldatepickerreactjsnpm

What is causing the col-auto with the red border to exceed its available height?

For this code, I've utilized version 5 of Bootstrap. In full screen width, the col-auto with the red border seems to be taking up more space than its content. The yellow border marks the available content space inside. I'm curious about what migh ...

htmlcssbootstrap-5

What is the best way to keep an image centered in the nav-bar as it decreases in size?

As I work on building a website using a template (https://github.com/learning-zone/web-templates/tree/master/victory-school-free-html5-bootstrap-template), I encountered an issue with the navigation bar. The original design appears like this: Before shrin ...

javascripthtmlcss

The value of Angular Input remains unchanged within a FormArray

I am experiencing an issue with the Sequence No in my PreprocessingForm's FormArray. When I add a new row, the Sequence No does not change as expected. <tr class="mat-row" *ngFor="let dynamic of PreprocessingForm.controls.arithmeticI ...

htmlangulartypescriptformarray

Retrieving the chosen option using a change event listener

Is there a way to retrieve the selected option using a change listener in TypeScript? I have come across JavaScript examples where the value is retrieved through event., but I am unable to locate any field that contains the selected option. <!DOCTYPE ...

htmltypescriptformsevent-listener