ngx datatable vertical scroll with rowheight set to auto

» html » ngx datatable vertical scroll with rowheight set to auto

By : Jose Fernando Saband

Date : November 25 2020, 01:01 AM

I wish this help you I am using ngx-datatable inside my Angular application. I was wondering if it is possible to use vertical scrolling together with automatic row height. This means that if the text insde a cell of the tabel, becomes to big, the length of the row will be expanded. This works perfect if setting the attribute [rowHeight]="'auto'". However, when using [scrollbarV]="true" the rowheight has to be a number because of the virtual scroll mechanisme used. Does anyone have a workaround to this? , For future seekers:

code :

<ngx-datatable
    class='bootstrap material'
    style="height: 600px; overflow-y:visible"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [limit]="20" >

Share :

Disable vertical scroll bar on div overflow: auto

By : user3605262

Date : March 29 2020, 07:55 AM

Hope that helps Is it possible to allow only a horizontal scroll bar when using overflow:auto (or scroll)? , These two CSS properties can be used to hide the scrollbars:

code :

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal

Jquery tabs added to code makes auto scroll (vertical) scroll past anchors

By : Drashti

Date : March 29 2020, 07:55 AM

wish of those help I believe the issue is that after you apply the scrolling you are hiding a bunch of items. For some reason it seems to be interfering with the calculations.
If you move the smooth scrolling code below the tab functions, it will work fine:

Preventing "jump" in vertical auto scroll and looping vertical auto scroll

By : Alpha3

Date : March 29 2020, 07:55 AM

I hope this helps . Animations automatically vary in speed. This is called "easing", and the two standard options for animate are swing and linear. Swing is the default, and causes the fast-then-slow look. By specifying linear in the animation, you should get rid of this problem:

code :

$('ul').animate({top:'-=30'+'px'}, 1000, 'linear');

Jquery datatable column headers width issue with vertical scroll

By : Jerry H

Date : March 29 2020, 07:55 AM

will help you I solved this problem by wrapping the "dataTable" Table with a div with overflow:auto

primefaces datatable vertical scroll

By : Ramalingareddy Mared

Date : March 29 2020, 07:55 AM

I think the issue was by ths following , You can use stickyHeader attribute of p:dataTable for that purpose. See showcase example:

code :

<p:dataTable var="car" value="#{dtStickyView.cars}" stickyHeader="true">
...
</p:dataTable>

Related Posts :

Ems or pixels in fluid layouts?

Html/CSS aligning the text of a label

How to have background changed(border addition) when size becomes larger than 1024 pixels

absolute positioned div not expanding in height

RouterLink is not working properly dynamically in angular 6

Simple HTML rendering issue

Best Approach to separate Form sections

How to Organize Phonegap HTML Files

Wrap a long single word using CSS

I am trying to implement a hover effect using CSS3 Transitions

How can I avoid hard coding line height while vertically centering element in a div?

Bootstrap3 - Removed container-fluid

Bootstrap framework not responsive for asp.net webform

How to align two inner divs inside outer absolute positioned div that has fixed width in which both divs have the same w

Div to ignore html tags

Prevent caching and stale content with a static web site

Is there a way to change the whole document with one selector in CSS?

why cant I click om my navigationbar links?

Is there a CSS/HTML way to cut multiple shapes out of the top/bottom of a div?

css border around multiple links/images

'No data was received in the uploaded file', but file is not empty

How input boxes save previous entries

AMP carousel direction change

Bootstrap multiple carousel not working on thumbnails click

Is there a way to put a permanent space into an input field?

Html boxes not displaying properly

How can I change a variable in Jekyll _config.yml dynamically?

How can I prevent DIVs from overlapping a right floated image?

Eclipse and .tml files highlighting not working

Footer is not in the bottom of the window, (phonegap jquery mobile app for windows mobile)

How to put div over another

How to use glyphicons in bootstrap 3.0

Wordpress page links not working

How Do I Use CSS to Set the Color of An ALink?

Webpage doesn't scroll smoothly on screen

YouTube iframe, browser looks for file locally

html displaying inline image

Font acting differently on IE and Firefox

Encoding and decoding of the character references

An Image Button navigate to another site html/css

IE8 "Save Target as ..." won't display for block elements

Image hover transition for span - CSS

How to apply min and max on textarea?

How to draw multiple horizontal lines (Notebook Paper effect) using css?

Table Printing Issue: Gaps in top and Bottom Border of th Elements

grouping elements with div and applying stylesheet for that group

Click <div> to expand, then click again to shrink - Its expanding, just not shrinking

CSS - How can I center a <script>'s output?

Django's template variable gets interpreted as HTML

How to make input text border with CSS when it's OnFocus

Anyone know of a calendar web widget for my website I could use?

How does Bootstrap manage to use fixed positioning for navbar on iOS?

Centered text in fully clickable table cell

Compare HTML and HTML5

steps of creating webpage in bangla

css root element margin

What is the point of using absolute positioning in CSS?

Responsive solution for long URLs (that exceed the device width)

Divs don't collapse as they should - media queries

QTreeWidgetItem display html