The horizontal scrollbar in PrimeNG's p-tree is cleverly concealed until I reach the bottom of the div and start scrolling

I'm facing an issue where the horizontal scrollbar in my p-tree component is hidden until I scroll all the way down. I've tried various CSS modifications, but nothing seems to work. It's surprising that I couldn't find anyone else with this problem after searching extensively on different forums.

One solution mentioned was to use [scrollable] properties for PrimeNG DataTable, but unfortunately, it doesn't apply to p-tree. Changing overflow values didn't yield the desired results either—either eliminating the vertical scrollbar completely or displaying an empty horizontal bar.

The UI-tree CSS I'm using includes styling for border, background, color, padding, width, and overflow settings. However, the issue persists regardless of these configurations.

If no one has a solution, I can create a demo on fiddle/stackblitz/plunkr, but it will take some time due to propriety issues preventing me from sharing code directly here.

A visual representation of the problem can be seen here. Essentially, I need the horizontal scrollbar to be visible and functional at all times, irrespective of the vertical scrollbar position.

Any assistance or suggestions would be greatly appreciated!

Thank you.

htmlcssangularprimeng

Answer №1

Resolved my own problem, although the solution may seem a bit messy and unrefined. I am sharing this here in case someone else faces the same issue or knows of a more graceful way to resolve it without relying heavily on :host and ::ng-deep, as they will eventually be phased out.

I found myself having to implement additional CSS rules for the following:

:host ::ng-deep .custom-tree {
  border: 1px solid #adabab;
  border-radius: 0px 5px 5px 0px;
  background-color: rgba(0, 0, 0, 0.38);
  color: #eaeaea;
  padding: 0em 0em;
  padding-right: 5px;
  width: 22em; /* This sets the width and triggers the horizontal scrollbar when a p-tree node expands beyond this point. */
  line-height: 15px !important;
  max-height: 75vh;
  overflow: overlay; /* Changed from auto to overlay */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* This ensures the visibility of the horizontal scrollbar above the inner divs */
:host ::ng-deep .custom-tree .tree-container {
  overflow: initial;
}

/* Adding margin between horizontal overflow and the vertical scrollbar to prevent content behind the scrollbar */
:host ::ng-deep .custom-tree .tree-container .treenode .node-content .node-label {
  margin-right: 10px;
}

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

Utilizing PrimeNG Datatable to Connect with an Array of Objects in a Dynamic Manner

I currently have an array of objects with various properties such as: "rows": [ { "id": 1, "createdAt": "2017-07-21T06:05:38.000Z", "updatedAt": "2017-07-21T06:05:38.000Z", "createdBy": null, "modifiedBy": null, "name": "ABC", "owner": "Dian ...

angularprimengprimeng-datatable

How to Keep Images Within Table Borders From Overlapping?

I am in the process of experimenting with creating a newsletter and have developed a template. I am very new to design and have created a table of album releases that is not fitting within the border I established. How can I resolve this issue? The code s ...

htmlcssresponsive-design

The response URL in Angular 2 is logged character by character instead of as one complete string

Hello, I am a beginner in the world of Angular 2 and I am currently working on obtaining the response URL in the following manner. .map(res => res.url); --this code is part of my service .subscribe(data => { for (let entry of data){ this.test = ...

angularurlresponse

Enhance the URL with a search form for including the 'sku'

Currently, I have a search form on my website that successfully refreshes the page when the submit button is pressed, displaying the table of results below. The URL generated by this form is http://example.com/?txtKeyword=searchterm. However, I am looking ...

phphtmlmysqldatabase

Storing Passport.js Token Locally: Best Practices

Struggling to save the jwt token provided by passport.js in browser localStorage, I am facing challenges with transferring it from the server to the client as it is generated on the server side. If anyone can assist me with setting the server-generated to ...

node.jsangularexpress

Enforce numerical input in input field by implementing a custom validator in Angular 2

After extensive research, I was unable to find a satisfactory solution to my query. Despite browsing through various Stack Overflow questions, none of them had an accepted answer. The desired functionality for the custom validator is to restrict input to ...

angulartypescriptecmascript-6angular-forms

Is it possible to conceal a component from all other active components?

One key element in the application is the <app-tabs-components> component. This component retrieves data from a service. The service contains a variable called show: boolean, which controls whether the component is displayed or hidden on the page. ...

angularangular6angular8

When a Grid Item is enclosed in a link, it does not extend over rows

After avoiding HTML/CSS for a long time, I finally decided to dive in and create a simple CSS grid website with 3 items in the grid. Everything was working well and looking exactly as I wanted it to: https://i.sstatic.net/zVQ9U.jpg However, I had the ide ...

htmlcsslayoutcss-grid

Looking for assistance in designing a responsive web page with CSS, specifically in determining the optimal page width

Currently, I am working on making my web page responsive for four different screen sizes (320px, 640px, 980px, and 1024px). Everything looks great and adapts well when I resize the site up to 1024px. However, once the size goes beyond that, I want to preve ...

htmlcssresponsive-designviewport

Issue with Django Form not showing up on HTML after encountering an error

I have a question regarding my Django project. When a user sends a GET request, I need to display a form on the page. Here is the initial code snippet: form = SignUpForm() if request.method == 'POST': .... else: return render(request, & ...

pythonhtmldjangodjango-templates

Resolving the issue of the 'Failed to load resource: net::ERR_FILE_NOT_FOUND' error

I'm encountering issues with loading my CSS in different browsers when using the "Copy Path" feature in VSCode. While everything displays correctly in preview mode within VS, none of the styles appear when pasting the path into Chrome or Edge. Below ...

htmlcssfile-not-found

Is there a way to customize the cursor of the webkit resizer (pulltab)?

I'm having difficulty implementing a custom cursor on my webkit pulltab. While I am able to change other properties like background color, the CSS "cursor" property remains unchangeable: #sessionbuilder::-webkit-resizer { background: #000; cursor ...

htmlcsswebkit

Semantic UI Troubles: Unraveling the Sidebars and #pusher Defects

Hey there, I could really use some assistance with an issue I'm facing. I have this particular structure that's causing me trouble. <div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed"> ... </div> < ...

javascriptjqueryhtmlcss

How can I adjust the size and alignment of each line within a single cell in an HTML table?

<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <style> .chess-board { border-spacing: 0; border-collapse: collapse; } .chess-board ...

htmlcsslinecell

Applying CSS Filters can sometimes interfere with the functionality of 3D

While playing around with CSS transforms, I discovered that filters flatten the transforms just like setting transform-style: flat. var toggleFilter = function() { var div = document.getElementById("cube") if (div.className == "cube") { d ...

javascripthtmlcsscss-transformscss-filters

The div remains unchanged when the button is clicked

My webpage is filled with several large div elements. There's a button on the page that, when clicked, should switch to the next div. Despite my efforts, the code I've written doesn't seem to be working as expected. :( This is the HTML st ...

javascriptjquerycsshtml

What is the best approach to managing categorical variables with Flask?

After developing a machine learning model to classify a target variable Y based on predictors x1, x2, x3, and others, I needed to create an HTML form "calculator" for users. The form requires the user to input data for x1, x2, x3, etc., and then displays t ...

pythonhtmlmachine-learningflaskcategorical-data

Removing the final element within a nested array: a step-by-step guide

let originalArray=[ [ "Test1", "4", "160496" ], [ "Test2", "6", "38355" ], [ "Test3", "1", "1221781" ], [ " ...

javascriptarraysangulartypescript

Utilize Jquery to dynamically update form input in real time based on checkbox selections

I am working on a form that requires real-time calculation of GST (Goods and Services Tax) directly within the form (GST = Price/11) This functionality has been implemented with the following script. Additionally, the calculation needs to be adjust ...

javascriptjqueryhtmlformscheckbox

What is the best way to extract text using Selenium in Java?

My goal is to extract the text $1.00 from the HTML code snippet below (I already have the xpath, so no need to worry about that). Let's assume the xpath is //*[@id="price-string"] <strong id="price-string">$1.00</strong> ...

javahtmlselenium