Conceal overflow content within a Bootstrap btn-group using CSS styling

Suppose I have a table like the one below:

/* CSS Styles for the table */
    
    table.my {
      width: 600px;
    }
    
    table.my > tr {
      height: 40px;
      overflow: hidden;
    }

  
    .tag {
      background: #b8b8b8;
      padding: 4px;
      color: blue;
    }
    
    .tag-area{
      display: inline;
    }
    
    .name {
      width: 400px;
      height: 100%;
      display: inline-block;
    }
<table class="table table-striped table-hover my">
        <tbody>
          <tr>
            <td>1</td>
            <td>
              <span class="name">Ammy Holdings</span>
              <div class="tag-area">
                <span class="tag">iOS</span>
                <span class="tag">PM</span>
                <span class="tag">Android</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>
              <span class="name">Ken Martins</span>
              <div class="tag-area">
                <span class="tag">PM</span>
                <span class="tag">CTO</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>3</td>
            <td>
              <span class="name">Ammy Holdings</span>
              <div class="tag-area">
                <span class="tag">iOS</span>
                <span class="tag">PM</span>
                <span class="tag">Android</span>
                <span class="tag">CEO</span>
                <span class="tag">Sale</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

And it looks like this:

You can see that the overflow tags are not aligned correctly... but due to the restricted dimensions of the table, I need to group the overflowed content together. Here is an example of how I want to achieve this:

I'm currently out of ideas on how to accomplish this. Any suggestions from the community on how to place overflow content into a button group (using Bootstrap)?

You can review the styles and Plunker demo here:

http://plnkr.co/edit/5qSDb6BGvskS0iwncZdi?p=preview

By the way, I am utilizing AngularJS in the actual application...

Answer №1

To resolve your issue, make sure to incorporate Bootstrap into your code. This will produce the same outcome as the plunk you provided.

/* Insert styling here */
    
    table.my {
      width: 600px;
    }
    
    table.my > tr {
      height: 40px;
      overflow: hidden;
    }
    
    .tag {
      background: #b8b8b8;
      padding: 4px;
      color: blue;
    }
    
    .tag-area{
      display: inline;
    }
    
    .name {
      width: 400px;
      height: 100%;
      display: inline-block;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02606d6d76717670637242312c31"... 

...otstrap/3.3.5/css/bootstrap-theme.min.css" />
  <script data-require="<a href="/cdn-cgi/l/email-protection"... 

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

Enlarge an element to the extent of filling the list item

I am facing a challenge in expanding the a elements within this jsfiddle to fully occupy the li element. The use of display:block does not seem to be effective since I am utilizing a table for spacing. What steps can I take to achieve this while ensuring ...

Utilizing Bresenham's line drawing algorithm for showcasing box contours

I am seeking a similar behavior to what is demonstrated on , but with some modifications to the boxes: div { display: inline-block; width: 100px; height: 100px; border: 1px solid black; cursor: pointer; } div.selected, div:hover { backgroun ...

Tips on utilizing media queries to optimize website layout for mobile devices

I'm currently working on a responsive website and utilizing media queries for that purpose. However, I've encountered an issue where the media queries don't seem to apply when the browser window is set to mobile view. Below is the snippet of ...

Using jQuery to add a checkbox to a list that is not ordered

My HTML structure includes an unordered list with nested lists. Here is a snippet of the code: <div id="checklist"> <ul> <li>On Page SEO <ul> <li>My work <i>And note.</i>< ...

Creating a multiplication table using a multidimensional array in mathematics

I'm attempting to create a multiplication table from 1 to 10 using a `for` loop and store it in a multidimensional array, but I'm encountering issues. Every time I run the script, I receive the following error message: Notice: Undefined offset ...

Switch the image source when hovering over a text menu

Currently, I have been using the following code to switch between images. However, what I actually want to do is change the image when hovering over the title link of the image. onmouseover="this.src='Images/img.png'" onmouseout="this.src=' ...

AngularJS - regular expression to validate zip codes in the format 11-111

Can you explain why the regular expression for matching zip codes in the format 11-111 is not functioning correctly? <input type="text" ng-pattern="/^[0-9]{2}-[0-9]{3}$/" required /> ...

What steps can I take to embed a video in HTML without autoplaying in a browser?

I have a simple but important question that I need help with. I am creating a compilation of family videos and I want to put them all on one page or in an HTML file. However, when I embed/link a directory file of the video into the HTML, it automatically ...

The JQuery click() function may fire twice if triggered by the live() method

http://pastebin.com/1MGTtzij is where you can find my complete HTML document. Here's a condensed version: $(document).ready(function () { $("#myDiv").append($("<input />", { type : "button", ...

issue with the submit button due to non-functional base64 encoded image

After successfully converting multiple file images to base64 format, I encountered an issue when trying to submit the values. When a user selects multiple images and clicks the submit button, the converted base64 values are returned as undefined. How can t ...

finding the index of a particular checkbox in a list

I am working with a list of checkboxes that are dynamically created using JavaScript, each contained within its own separate div element. I need to determine the position number of a specific checkbox within all checkboxes sharing the same class within a p ...

Using a PHP switch case statement with an HTML multiple select dropdown

I am facing an issue with my HTML multiple select box: <option value="1">First choice</option> <option value="2">Second choice</option> <option value="3">Third choice</option> Using jQuery, ...

Full image with stylish CSS text overlay

I'm having trouble displaying an overlay text that should look like: This is what I've tried: <div class="row"> <div class="col-md-3 program-cat"> <img src="<?php echo EF_THEME_BASE_URL; ?>/image ...

Adding to and retrieving data from an array

I am relatively new to the world of JavaScript and jQuery, and I have spent the last three days working on a script. Despite my efforts to find a solution by searching online, I have been unsuccessful so far. It seems like my search skills are lacking. My ...

Is it possible to create a grid by arranging each statement with a specific format?

After fetching and parsing some data, I have utilized the 'each' function to display it: $.ajax({ url : 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('htt ...

Troubleshooting a glitch with passing a variable to a PHP script using AJAX

Explanation of the page functionality: When the quiz php page loads, a user can create a score using a function in quiz.js. This score is then stored in a variable score within quiz.js Once the score is generated, the user must click a button to move on ...

UI-Router is malfunctioning, causing ui-sref to fail in generating the URL

I'm currently working on a project that involves Angular, Express, and UI-router for managing routes. While I've properly configured my $states and included the necessary Angular and UI-router libraries in my HTML file, I am facing an issue wher ...

Unable to retrieve the chosen option from the datalist

I am encountering an issue with a datalist where I can't seem to retrieve the value that is currently selected when a button is clicked. Despite following recommendations from various posts on Stack Overflow, my code still returns undefined. Interesti ...

Using jQuery in Rails 3 to display the id of a td element

I am working with a 3x3 table that contains td elements with unique id's (id='a1'...id='c3'). I want to enable the user to click on any of these 9 td elements and receive an alert displaying the id of the clicked td. Below is my C ...

What is the best method to organize HTML tables in Knockout by utilizing a Breeze navigation property?

Currently, I am utilizing Breeze.js to manage my data model within Knockout.js. This involves a simple view model with an adapter library for handling sorting tables on entity properties. The tables are sorted using tablesorter, along with a knockout bindi ...