Include ellipses for child elements within a parent div set to a specific height

I need help with a design issue involving a parent div that has a fixed height, overflow hidden, and multiple child divs inside. How can I display an ellipsis after the visible child divs to indicate that there are more divs present?

Here is the code I have been working on:

.parent {
  display: inline-block;
    padding-left: 10px;
    padding-top: 7px;
    overflow: hidden;
    height: 50px;
}

.child {
  margin-right: 5px;
    color: #fff;
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 12px;
    margin-bottom: 10px;
    background: red;
}
<div class="parent">
  <div class="child">
    first
  </div>
   <div class="child">
    second
  </div>
   <div class="child">
    third
  </div>
   <div class="child">
    fourth
  </div>
</div>

In this scenario, as the third and fourth child divs are hidden due to overflow, I want to display dots after the second div.

Furthermore, since the number of child divs could vary, I aim to show the dots only when the parent div overflows.

htmlcssellipsis

Answer №1

$('.showLessBtn').hide();
var fixedHeight = 50;

var allParents = $('body').find('.parent');
for(var x = 0; x < allParents.length; x++){
  var allChildsOfThisParent = $(allParents[x]).find('.child');
  var parentHeight = 0;
  var childHeight = 0;
  parentHeight = $(allParents[x]).height();
  for(var y = 0; y < allChildsOfThisParent.length; y++){
    childHeight = childHeight +           $(allChildsOfThisParent[y]).height();
  }
  if(childHeight > parentHeight){
    $(allParents[x]).find('.showMoreBtn').show();
  }else{
    $(allParents[x]).find('.showMoreBtn').hide();
  }
}

$(".showMoreBtn").on('click', function(){
  $(this).parent().parent().css({'height':'auto'});
  var parentNewHeight = 0;
  parentNewHeight = $(this).parent().parent().height();
  $(this).parent().find('.showLessBtn').css({'top':parentNewHeight+10});
  
  $(this).hide();
  $(this).parent().find('.showLessBtn').show();
});

$(".showLessBtn").on('click', function(){
  $(this).parent().parent().css({'height':fixedHeight});
  $(this).parent().find('.showMoreBtn').show();
  $(this).hide();
});
.parent {
  display: inline-block;
    padding-left: 10px;
    padding-top: 7px;
    overflow: hidden;
    height: 50px;
    width: 100px;
}

.showMoreBtn, .showLessBtn{
  border: none;
  cursor: pointer;
  position: absolute;
  top: 60px;
  left: 55px;
  height: 10px;
  padding-top:0;
  background: transparent;
}


.child {
    padding: 2px;
}
.child>div{
    color: #fff;
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 12px;
    background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div>
    <button class="showMoreBtn" type="button">.....</button>
    <button class="showLessBtn" type="button">...</button>
  </div>
  <div class="child">
    <div>
      first
    </div>
  </div>
   <div class="child">
    <div>
      second
    </div>
  </div>
   <div class="child">
    <div>
      third
    </div>
  </div>
   <div class="child">
    <div>
      fourth
    </div>
  </div>
</div>

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

What could be causing the jQuery news ticker to malfunction on my site?

I recently made some changes to my main page by embedding HTML and adding the following code/script: <ul class="newsticker"> <li>Etiam imperdiet volutpat libero eu tristique.</li> <li>Curabitur porttitor ante eget hendrerit ...

javascriptphpjqueryhtml

Trouble with Bootstrap card dimensions: Height and width not functioning correctly

I specified a height and width for all card images, but the heights are inconsistent with one being too large and another too small. I want each card to have the same height and width. How can I achieve this? Here is what I tried. .card { height: 50%; ...

htmlcssbootstrap-4

Error: Compilation was unsuccessful due to module not found. Unable to resolve in ReactJS

As I was wrapping up this task, an unexpected error popped up: Module not found: Can't resolve './components/Post' in ./src/pages/index.js I've tried everything to troubleshoot it but no luck. Here's a rundown of my code snippets ...

javascripthtmlcssreactjsreference

Tips for updating the background color of your navigation bar:

I've been using bootstrap and I want to customize the active page background color to green, but for some reason it doesn't seem to be working. .navbar-inverse { color: #fff; background-color: #4CAF50; } <nav class="navbar navbar-invers ...

htmlcsstwitter-bootstrap

Using the .val method on an input element modifies the HTML content without affecting the value displayed

Currently, I am working on validating the range input type by utilizing JavaScript along with jQuery's val method. While it successfully displays the output in HTML, I encountered an issue where changes to the value are not being logged in the console ...

javascriptjqueryhtmlvalidation

Exploring the ins and outs of HTML event handlers with JavaScript

When using events in your HTML and including a small amount of JavaScript, what is this called? Is it referred to as a "JavaScript attribute function," simply a "JavaScript attribute," or something else entirely? For example: <button onClick="locat ...

javascripthtmldom-events

HTML tag in CSS not covering entire page

What is the reason behind body, html, and #black sizing to the size of the viewport rather than the document height? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> html, body{ height:100%; } #black{ position:absolute; w ...

htmlcss

Using TypeScript, pass an image as a prop in a Styled Component

I am facing an issue with the code below that is supposed to display the "NoBillsLaptopPNG.src" image on the screen, but for some reason, the image is not showing up. The images are being imported correctly, so I'm unsure why the image is not appeari ...

javascriptcssreactjstypescriptstyled-components

The :not() exclusion in CSS property fails to exclude the class

I'm attempting to style all the links on my webpage in a particular way, except for those in the navigation bar. Despite trying to exclude the navbar links using a:not(.navbar), it seems that the styling still applies to all links, including Link 1 in ...

htmlcsscss-selectors

An abundant array of options spread across numerous dropdown menus

I have been tasked by a client to do something new that I haven't done before, so I am seeking the best approach. The project involves creating a form with three dropdown menus where users can select from thousands of options. For instance: Users mu ...

phpjavascripthtmlajaxdrop-down-menu

Having trouble accessing the link from the dropdown list in Selenium

While trying to select a link from a dropdown menu, I am facing an issue with Selenium. The element is being located successfully, but it cannot be interacted with and the following exception is thrown: Error in thread "main" org.openqa.selenium.ElementNo ...

javahtmlseleniumselenium-webdriverselenium-iedriver

What is the reason that elements with % properties totaling 100% do not align next to each other?

I've been attempting to arrange two blocks side by side within another block, but they just don't seem to fit together smoothly. What could be causing this issue? .container {height: 200px; width: 400px; background:darkgrey;} .left {height: 100% ...

htmlcss

Before displaying the output, Flask first shows the HTML heading

I have developed a user input form that displays a graph after selection. The title of the graph result is 'Results,' however, it appears before the user makes a selection. Check out the screenshot below: https://i.sstatic.net/1WkZ4.png No sele ...

pythonhtmlflaskjinja2

Error: The index.js file could not be located within the React application being used by Express with Node

I am having an issue with setting up my own express server for a React app in production. I keep getting a 404 error for the index.js file which contains my React js script. Here is the folder structure I am working with: server.js +public | index.html | ...

javascripthtmlnode.jsreactjsexpress

Struggling to find solutions for debugging HTML codes in Visual Studio Code and linking my CSS page to my HTML page

I ran into some issues with linking my CSS stylesheet to my HTML pages. I tried using the <link rel="stylesheet" href="style.css"> command, where style.css is the name of the file. However, for some reason, it wasn't working ...

htmlcssdebugginglinker

Adding Dynamic Shadow to Bootstrap 4 Card

I've been trying to figure out how I can add an animated shadow effect to a Bootstrap 4 Card. Currently, my Cards are arranged like this: Image of Bootstrap Card My objective is to create an animated shadow around the card similar to the one shown i ...

htmlcsstwitter-bootstrapbootstrap-4

The WordPress GD Star rating plugin is failing to load on the webpage

I am having trouble getting the GD star rating plugin to load on my website. I followed the correct installation and configuration steps, but the plugin still won't show up on the page. I have attempted various solutions without success. Can anyone s ...

csswordpress

What is the best way to split a single column into two using blocks?

I am working with a container that currently has all its blocks lined up in a column. I need to divide them into two columns, with 5 blocks in each. Unfortunately, the plugin I am using generates the code for me and does not allow me to insert my own div e ...

javascriptcss

Issue with material-table filtering: the filterCellStyle backgroundColor is not being applied to the entire row as

When using material-table filtering, I noticed that the filter cell style's background color is not being applied to the entire row. Additionally, the column created for row selection has its own style that I am struggling to override. For a code exa ...

javascriptcssreactjsmaterial-uimaterial-table

What is the best way to showcase a Table and an Image side by side in HTML using inline

Can someone help me figure out how to align my image and table on the same level? I've been struggling to get "inline-block" to work. :( <p id="play"> hey </p> <div id="menu"> <table> <tr> <td>Models</td& ...

htmlcsslayout