Develop Reference

Create Scrollable Div for Angular Chat

I am creating a chat application in Angular and I am trying to set up the UI for it. I need to create a div that will be housing the chat messages and as more messages fill the div I do not want the div to expand but just stay the same size and show a scroll bar. This div should be 100% the size of the parent div. As you click the button to add data the div grows. Even if I set a height in px or percent format the div still grows.

The page you link won't load but here are the basics to make a scrollable element:
HTML / JS Structure
Make an outer container div
Make an inner container div (this will be the "scroll wrapper")
Append the inner container to the outer container
Insert whatever you need into the inner container (you can use something like insertAdjacentHtml or whatever works for your specific situation)
This order of steps in particular will work well for a scenario where the contents are dynamically changing.
CSS
For the outer container
Set a fixed value for width and set height: auto
Set a border-radius if you want circular edges
Set overflow: hidden to keep the scroll wrapper's corners from popping out
You will probably want some padding
For the inner container
Set position: relative
Set overflow-y: auto and overflow-x: hidden so that you can scroll up and down, but not side to side
For the desired overflow behavior, you need to set width: 100% and set fixed values for max-height and min-height. (max-height decides when things will start to overflow ie. make a scroll bar)
You will want max-height and min-height to be less than the outer container's fixed width + any padding, etc. it may have.

Remove horizontal scroll bar and make table wider

By default, Tabulator reduces the max width of the table and displays a horizontal scroll bar at the bottom of the table. Is it possible to remove this scroll bar and force tabulator to increase the width of the table (so that the horizonta scrollbar is displayed at the bottom of the browser window)?

Add this to your CSS file for the div containing the horizontal scrollbar.
overflow-x: hidden;
To make the table wider, you can enclose it within a <div> and add this to the CSS file for that particular div.
table-layout: fixed;
width: 100%;

Update
As of Tabulator v4.7 there is a built in layout mode for handling this. the fitDataTable layout mode will fit the width table to its contents:
var table = new Tabulator("#example-table", {
layout:"fitDataTable",
});
See the Layout Documentation for full details and a working example
Original Answer
There is no built in feature for allowing external scrolling of the table. The table is based in a div and so will take up 100% the width of its parent element.
It will then either handle scrolling inside the table or resize the columns to fit depending on how your table is configured.
You could make some CSS tweaks to allow this form of display but it may cause the table to malfunction under certain circumstance, depending on your configuration.
You would need to include the following CSS after the tabulator style sheet has been included:
.tabulator, .tabulator-header, .tabulator-tableHolder{
overflow:visible !important;
}
But essentially at that point you may be better off just using a standard HTML table as you seem to be disabling a lot of the features that you would use Tabulator for.

Dynamically adjust ag-Grid header height

Is there a way to adjust the header height of the headers in ag-Grid? I would like to increase the height if the title is longer than the column width. I know that I can set the height in the gridOptions, but I want the height to be changed 'on the fly'.
I got this css styling to break the words, it works fine for me,
.ag-header-cell-label {
text-overflow: clip;
overflow: visible;
white-space: normal;
}
but I didn't find a way to change the height.

There is a headerHeight method setHeaderHeight(heightInPx)
This sets the height in pixels for the row containing the column label header. There are setter methods that can be called from the API and will change the header heights dynamically. Have you tried this?
you can check more details on ag-grid website, they have examples as well. Hope it will help.

There are only two types of header height settings for AG grid version 24.
groupHeaderHeight – sets height of grouped headers.
headerHeight – sets height of leaf headers.
If a grid has 3 level headers, level 1 and 2 can be set using ‘groupHeaderHeight’ and level 3 using ‘headerHeight’. There is no option to set height of headers at level 1 or 2 independently.

How to change default row height in fullcalendar day view?

How to change default height of row elements in FullCalendar day view(agenda)? Need CSS class or Javascript function. Refer to screenshot for details-

If you want to change the height of each 30-minute block, you should use the following CSS and adjust the height as you need. The default value is 2.5em.
.fc-time-grid .fc-slats td {
height: 2.5em;
}
Take a look at a working jsfiddle.

forcing a definite size on a select multiple element

When a select multiple element is empty (without any options), the dimensions of the element become zero and shows only the scroll bar , also the element resizes according to the size of the data of the options . How can i create a select multiple element with a definite size which does not change irrespective of the above two factors?
Thanks in advance

Use CSS:
select.multiple {
width: 200px;
height: 400px;
}
The above assumes your select has class="multiple", but obviously you can set your CSS selector to ID or whatever suits, and of course you'll set the dimensions and units to suit your specific case.