Developing a surplus of features in Bootstrap can be done by utilizing button

I need help creating an "Actions" dropdown in the last column of a table, but I'm facing overflow issues when clicking on the dropdown (refer to the attached screenshot).

Here is the structure of my HTML:

<table id="app_progress" class="table table-striped">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>In Build</th>
                        <th>Signed off</th>
                        <th>In deployment Apple</th>
                        <th>In deployment Android</th>
                        <th>In review Apple</th>
                        <th>In review Android</th>
                        <th>Live Apple</th>
                        <th>Live Android</th>
                        <th>Paid</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--for loop here that will create a TR all content in the TD based on whats passed in.-->

                    <tr>
                        <!--td>523</td-->
                        <td><a href="#" class="view-form-a">Primary</a></td>
                        <!-- in_build column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- signed_off column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_deployment_apple column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_deployment_android column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_review_apple column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_review_android column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

... (remaining code omitted for brevity) ...

                    <tr>
                        <!--td>99786</td-->
                        <td><a href="#" class="view-form-a">Primary School</a></td>
                         ... (similar structure for other columns) ...
                    </tr>
                     <!--End of If statement-->
                    <!--everything goes within the loop-->
                    </tbody>
                </table>

How can I solve the issue of overflow while using the dropdown?

Thank you.

javascripthtmlcsstwitter-bootstrap

Answer №1

To make the dropdown menu align to the right side of the button, simply add the dropdown-menu-right class to the ul.dropdown-menu. This will cause the menu to expand towards the left.

Answer №2

$('.mydropdown').on('shown.bs.dropdown', function(e) {
  var myBtn = $(this);
  var offset_t = $(this).offset().top - $(window).scrollTop();
  var offset_l = $(this).offset().left - $(window).scrollLeft();

  console.log(offset_l, offset_t);
  myBtn.find(".dropdown-menu").css({
    "position": "fixed",
    "left": offset_l,
    "top": offset_t + myBtn.height()
  });
});
$('.mydropdown').on('hidden.bs.dropdown', function() {
  var myBtn = $(this);
  myBtn.find(".dropdown-menu").removeAttr("style");
});


$("#wrap").on("scroll", function(e) {
  var myBtn = $('.mydropdown.open');

  var offset_t = $(myBtn).offset().top - $(window).scrollTop();
  var offset_l = $(myBtn).offset().left - $(window).scrollLeft();

  myBtn.find(".dropdown-menu").css({
    "position": "fixed",
    "left": offset_l,
    "top": offset_t + myBtn.height()
  });

});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div style="width:850px; overflow: scroll;height:450px;" id="wrap">
  <table class="table table-striped table-bordered table-hover" id="example" cellpadding="0" cellspacing="0" border="0" width="100%">
    <thead>
      <tr>
        <th>Head1</th>
        <th>Head2</th>
        <th>Head3</th>
        <th>Head4</th>
        <th>Head5</th>
        <th>Head6</th>
        <th>Head7</th>
        <th>Head8</th>
      </tr>
    </thead>
    <tbody>
      <tr height="48px">
        <td>1</td>
        <td>Gabriel</td>
        <td>Some value is here</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>Some value is here and little longer</td>
        <td>
          <div class="btn-group mydropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="link/1" title="View SPK">
                  <span class="glyphicon glyphicon-check"></span> View SPK</a>
              </li>
              <li>
                <a href="link/1" title="Edit SPK">
                  <span class="glyphicon glyphicon-edit"></span> Edit SPK</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr height="48px">
        ...
        ... (repeated rows)
        ...
      </tr>
    </tbody>
  </table>
</div>

overflow:scroll - The content is clipped and a scroll-bar is added to view the rest of it.

In case overflow:scroll is necessary, you can add position: fixed to dropdown-menu using jQuery.

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

Manipulating the position of an element within the three.js canvas

Currently, I am facing a challenge in my three.js project where I need to position multiple objects on the canvas. However, I cannot seem to figure out how to change the location of these objects within my code snippet: var scene = new THREE.Scene(); var c ...

javascriptthree.js

Customizing App (directory) elements in next.js 13

Imagine having this directory organization: https://i.stack.imgur.com/Hd5gu.png Is there a method for loading the component from the custom folder instead of the default one in the app folder? In case the custom folder does not have that component, can t ...

javascriptnext.jsnext.js13

The functionality for making a GET request in a React Component is not functioning as

I have successfully imported the axios library and React. In a React component, I am making a GET call which is returning a response like this: {"functionality": [ {"category": "", "price": 2.0, "moltiplicator": 100.0, "name": "Plat"} ] } How ...

javascriptapireactjsgetbabeljs

Parsing dates in Firefox using Moment.js and AngularJS

I'm currently incorporating Moment.js into my project and parsing a normal date string like "21-jun-2020". However, I've noticed that the parse result differs between Chrome and Firefox. _d: Mon Jun 21 2021 00:00:00 GMT+0530 (India Standard Time ...

javascriptmomentjs

When using IndexedDB with a Javascript To-Do list, the dates for all items appear to be the same after adding a new item to the list

I developed a To-Do List using Javascript, HTML, and IndexedDB to store the items in the database so that they won't be deleted when the browser is refreshed. I also want to include the date for each item, however, whenever I add an item, the date end ...

javascripthtmldateindexeddb

Locate files through specific object field within an array

How can I retrieve only available tickets for a show from the Show Schema? I need to find all documents where availableTickets is greater than 0 and display subdocuments with show._id and show.title. Can someone guide me on how to achieve this? // Show&ap ...

javascriptnode.jsmongodbmongoosemongodb-query

The implementation of classList.toggle in my JavaScript code is not functioning as expected

I created a button that toggles the visibility of a div. It works fine the first couple of times, but then it stops working. When I click on column1, the hidden div inside column1 doesn't appear. But when I click on column2, the hidden div inside colu ...

javascripthtmlcssweb

Bizarre issue encountered while attempting to upgrade a program to Vue2

Upon running vue-migration-helper and updating everything, I encountered the error below. vue2.default.user is not a function Console error: Uncaught TypeError: _vue2.default.use is not a function at eval (eval at <anonymous> (app.js:1624), & ...

javascriptlaravel-5vue.jsvuejs2laravel-elixir

Tips for keeping a span element from breaking onto a new line in responsive web design

Here is a simple list with h4 headings, each ending with a span element. <ul class="items"> <li> <h4>Avoid Line Break Of Plus <span class="goto">o</span></h4> </li> <li> <h4> ...

htmlcssresponsive-designline-breaks

Load HTML/erb templates efficiently in Rails to optimize performance for AngularJS applications

I recently came across a discussion about eager loading HAML templates on this website. The concept of caching HTML partials to enhance performance in Angular applications caught my attention. However, I'm curious to know if there is a similar approac ...

javascriptruby-on-railsrubyangularjserb

Searching DynamoDB in node.js using mapped items

In my DynamoDB table, I am trying to retrieve all Items where the Review.ID matches 123. Item: { id: 1, review: { Id: 123, step1: 456, step2: 789, step3: 1234, }, // Add more items here }, Item: { id: 2, review: { Id: 123 ...

javascriptnode.jsamazon-web-servicesamazon-dynamodb

The Dropdown Menu and Slick Gallery are not intersecting

In my jQuery Slick Gallery, I have a Dropdown Menu that displays an unordered list of menu entries when a button is clicked. The issue I am facing is that the unordered list is hidden at the bottom edge instead of appearing above the dots as intended. You ...

javascriptjquerycssdrop-down-menuslick.js

What is the best way to prevent the background-image fade effect in Chrome?

While transitioning the background-image, I noticed a difference between Chrome and Firefox. Firefox simply replaces the image instantly as expected, while Chrome adds a fade effect to the transition. Although this may be visually appealing, it introduces ...

cssbrowser

AngularJS fetches the 'compiled HTML'

If I have this angularjs DOM structure <div ng-init="isRed = true" ng-class="{'red': isRed == true, 'black': isRed == false}"> ... content </div> How can I obtain the 'compiled' version of this on a cl ...

javascripthtmlcssangularjs

Jquery Mobile: Navigating back to the first page after calling changePage

In the process of developing a mobile app with phonegap/cordova and jquery mobile, I encountered an issue where the user is supposed to land on a specific page from a status bar notification. However, the app initially displays the default page briefly bef ...

javascriptjquerycordovajquery-mobile

Tips for retrieving arguments within a method called from a template in vue.js?

Here is an example where I am attempting to call a method from the template and pass in some arguments. How can I access those arguments from within the method? Snippet from script: methods: { showBinaries(job, id) { let test_url = process.en ...

javascriptvue.js

Creating an HTML form that communicates with PHP and ASPX

I recently completed a project where I created a contact us page that sends information to our sales team using PHP for email delivery. The next step in this process is to also send the same customer information to our Sales Fusion CRM system. To accompli ...

phphtml

Is there a comparable method to hasAttribute() in AngularJS?

Is there a way in a directive to check if an element has a specific attribute before performing a function on it? I couldn't find anything related to this in the jqLite documentation. For example: .directive('noReadonly', function() ...

javascriptangularjs

Ensure that only one button can be selected at a time for non-radio button elements in the

This is the code snippet I am working with $(document).ready(function(){ $("a.btn1").click(function() { $(this).find("i").toggleClass("fa-thumbs-o-up fa-thumbs-o-down"); }); $("a.btn2").click(function(){ $(this).fi ...

javascripthtmlcss

Creating a switch case statement within a specific scope

How can I generate cases using $scope.type[i] (a JSON array from the database)? $scope.type = [{nomcarac: "phone"}, {nomcarac: "shoes"}]; $scope.getValuesList = function(item) { switch (item.type){ case 'phone': item.val ...

javascriptangularjsjson