Scrollable Turbo Table experiencing a problem with the PrimeNG filter dropdown

When using PrimeNG Turbo Table, I am facing an issue where the filter dropdown is getting placed inside the scrollable table.

The dropdown works perfectly fine without the scrollable table. You can see it in action here.

However, when the table is scrollable, the dropdown gets trapped inside the table as shown here. I want the dropdown to appear outside the table rather than inside it.

You can view the code here. Please check it out in 1024 resolution to see the scrolling functionality and try selecting one of the brands to filter the data.

If anyone has any solutions or suggestions, I would greatly appreciate the help!

cssangularangular5primengprimeng-turbotable

Answer №1

Consider utilizing the appendTo="body" attribute found in the Primeng dropdown, which could be beneficial for your situation.

See a complete example below:

<p-dropdown appendTo='body' [options]="value" [style]="{'width':'100%'}" placeholder="Select"></p-dropdown>

For more information, check out this source.

Answer №2

The issue arises at the following code snippet:

.ui-table-resizable .ui-table-thead>tr>th, .ui-table-resizable .ui-table-tfoot>tr>td, .ui-table-resizable .ui-table-data>tr>td {
    /* overflow: hidden; */
}

One possible solution is to either comment out the overflow attribute or change it to visible ... this should resolve the problem!

Answer №3

This issue was resolved by modifying the overflow property to ensure visibility:

//Original code in primeng.min.css
    .ui-table-scrollable-header, .ui-table-scrollable-footer {
        **overflow: hidden;**
        border: 0 none;
    }
//Replace with this in your stylesheet
    .ui-table-scrollable-header, .ui-table-scrollable-footer {
        **overflow: visible;!important**
        border: 0 none;
    }

Additionally, include the following in your stylesheet below the updated code:

.ui-table-scrollable-view {
  overflow: hidden!important;
}

View the result image here

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

`Issues encountered with resizing the menu``

Looking to create a unique restaurant horizontal list bar for my application. The goal is to have a horizontal menu that displays 3 options on the screen at a time, with the middle one being the largest and the two flanking it smaller in size. As I scroll ...

javascripthtmlcss

Scan across a lineup of pictures

I am looking to showcase a series of images in a horizontal alignment, but I want to avoid overloading the screen width. My goal is to allow users to navigate through the images using their mouse - when they move right within the image container, I want t ...

javascripthtmlcss

Maintain the selected list item after filtering in AngularJS

I am facing an issue with highlighting selected items in a list. I have three first names: Roy, Sam, David displayed in a ul as list items. Initially, I can toggle each li on click just fine. However, after performing a search and returning to the list, th ...

jquerycssangularjs

Error: The script "build:universal" is required but not found in the

I encountered errors while attempting to run my Angular application on the server side: npm ERR! missing script: build:universal npm ERR! A complete log of this run can be found in: npm ERR! /home/training/.npm/_logs/2018-10-03T11_50_40_593Z-debug.lo ...

node.jsangularnpm

iterative outcomes with ajax and jquery scripting in javascript

Hey there! I'm trying to create a JavaScript script using AJAX that will extract the id and value of a button when hovered over. The extracted value will then be sent to a PHP script on the same page, where it will be used as a variable for searching ...

javascriptphpjquerycssajax

What is the best way to adjust the maximum width of Reddit's embedded comment iframe?

Reddit provides a code that can be embedded to display their comments on a website, As an example: <div class="reddit-embed" data-embed-media="www.redditmedia.com" data-embed-parent="false" data-embed-live="false" data-embed-uuid="24a3e666-f855-4664 ...

javascripthtmlcssiframereddit

Error encountered during Angular unit testing: Unable to read the 'id' property of a null value. (Jasmine, Karma)

I am currently working on writing unit tests for a specific component in my Angular application. The component uses a currentUser variable both in the component logic and the HTML template. I have hardcoded this variable by mocking it in every test using c ...

javascriptangulartypescriptunit-testingkarma-jasmine

Tracking the progress of reading position using Jquery within an article

Here is an example of a reading progress indicator where the width increases as you scroll down the page: http://jsfiddle.net/SnJXQ/61/ We want the progress bar width to start increasing when the article content div reaches the end of the article c ...

javascriptjqueryhtmlcssscroll

Stay updated with Angular/RxJS by subscribing to keys and observables!

While going through the documentation for Angular and RxJS, I couldn't find an answer to this specific query. When I make a HttpClient request in Angular and it returns an observable, like so: let request = this.http.get(url); request.subscribe( { ...

angularrxjsobservable

Adding an active class on a selected chat list item in Angular - here's how!

We are currently developing a chat component where users can click on the left side chat item to open messages with the selected user. We have implemented an active class that changes the color of the selected chat list item. Our goal is to apply the activ ...

angulartypescriptangular6

CSS Flexbox: Dealing with Overlapping Flex Items on Narrow Screens

Hey there! I've successfully created a custom timeline using flexbox, but I'm encountering an issue on smaller screens. As the window size decreases, the flex items start to overlap. Is there a way you can assist me in adding some space without d ...

cssflexboxoverlaptimeline

Ways to identify the moment a form becomes 'ready' after the component has been initialized

It seems like I might be making a mistake, as there are instances where I need to make adjustments to a Form or FormControl after a component has initialized and data has been loaded. The problem arises because the form and its controls don't seem to ...

angularforms

The checkbox in ng-2-smart-table will either be checked or unchecked based on the value of the column

I am working with an ng2-smart-table and I need the second column to be a checkbox that is initially checked or empty based on the binary value in the fourth column of my data object. Currently, my code looks like this: export class UsermanagementComponen ...

angularng2-smart-table

The side navigation panel transition is stuck and failing to slide out as intended

My element is able to slide in smoothly, but encounters trouble when attempting to slide back out. I suspect the issue lies within the syntax for "display: none". Any assistance or recommendations would be greatly appreciated, and feel free to request more ...

javascripthtmlcss

Utilizing Typescript with Angular 2 to efficiently convert JSON data into objects within HTTP requests

I am dealing with a file called location.json, which contains JSON data structured like this: { "locations": [ { "id": 1, "places": [ { "id": 1, "city": "A ...

jsonangularparsingtypescriptangular2-services

Display an image with HTML

My current project involves creating a chrome extension that will display a box over an image when hovered, while also zooming the image to 1.5 times its original size. In my research, I came across a similar example. .zoomin img { height: 200px; wi ...

javascriptjquerycsshtml

What causes images to unexpectedly expand to fill the entire screen upon switching routes in Next.js?

I'm in the process of creating a website using Next and Typescript, with some interesting packages incorporated: Framer-motion for smooth page transitions Gsap for easy animations One issue I encountered was when setting images like this: <Link&g ...

cssreactjstypescriptnext.jsvercel

Permitting the user to remove an option from the antd select widget

I have integrated the antd select component in my React application and I am looking to add a delete option for users. For more details, please refer to the image below:https://i.sstatic.net/ZP4PP.png This is how I attempted to implement it: {tasks.map( ...

cssreactjsselectantd

Uploading files in Angular 5 with additional properties of other objects

I am facing a challenge with uploading a file as part of a property to an object within a form. Most documentations I have come across only focus on services that handle standalone files. In my case, I have a form with various text inputs and date pickers, ...

angulartypescriptasp.net-core-webaping-file-upload

Tips for avoiding the reconstruction of components in if-else conditions within Angular

After just joining the Angular4 club as a ReactJS developer, I find myself using basic conditional statements with a very simple condition. Take a look: <div class="app-component"> <app-country *ngIf="condition"></app-country> ...

angularconditional-statements