Ensuring Proper Tabulator Width Adjustment Across All Browser Zoom Levels

<div id="wormGearTabulatorTable" style="max-height: 100%; max-width: 100%; position: relative;" class="tabulator" role="grid" tabulator-layout="fitDataTable"><div class="tabulator-header" role="rowgroup"><div class="tabulator-header-contents" role="rowgroup"><div class="tabulator-headers" role="row" style="height: 62px;"><div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="name" style="min-width: 40px; width: 78px; height: 62px;"><div class="tabulator-col-content"><div class="tabulator-col-title-holder"><div class="tabulator-col-title" style="text-align: left;">Type</div></div></div></div><span class="tabulator-col-resize-handle" style="height: 62px;"></span><div class="tabulator-col tabulator-col-group" role="columngroup" aria-sort="none" aria-title="Value" style="height: 62px;"><div class="tabulator-col-content" style="max-width: 119px;"><div class="tabulator-col-title-holder"><div class="tabulator-col-title" style="text-align: center;">Value</div></div></div><div class="tabulator-col-group-cols" style="min-height: 42px;"><div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="minValue" style="min-width: 40px; width: 40px; height: 41px;"><div class="tabulator-col-content"><div class="tabulator-col-title-holder"><div class="tabulator-col-title" style="text-align: right;">Min</div></div></div></div><span class="tabulator-col-resize-handle" style="height: 41px;"></span><div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="nomValue" style="min-width: 40px; width: 40px; height: 41px;"><div class="tabulator-col-content"><div class="tabulator-col-title-holder"><div class="tabulator-col-title" style="text-align: right;">Nom</div></div></div></div><span class="tabulator-col-resize-handle" style="height: 41px;"></span><div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="maxValue" style="min-width: 40px; width: 40px; height: 41px;"><div class="tabulator-col-content"><div class="tabulator-col-title-holder"><div class="tabulator-col-title" style="text-align: right;">Max</div></div></div></div><span class="tabulator-col-resize-handle" style="height: 41px;"></span></div></div><span class="tabulator-col-resize-handle" style="height: 62px;"></span></div><div class="tabulator-frozen-rows-holder" style="min-width: 0px;"></div></div></div><div class="tabulator-tableholder" tabindex="0" style="height: 260px;"><div class="tabulator-table" role="rowgroup" style="padding-top: 0px; padding-bottom: 0px;"><div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Axial Damping [N*S/mm]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-even" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Axial Stiffness [kN/mm]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Efficiency [-]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.83</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.83</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.83</div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-even" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Inertia Worm Wheel [kgmm²]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Inertia Worm [kgmm²]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-even" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Max. Motor Torque [Nm]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Transmission Worm -  Worm Wheel [-]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">21.00</div><span class="tabulator-col-resize-handle"></span><div class="tabu......</pre>
</div>
</div>
</p>
<p><a href="https://i.sstatic.net/SGpBf.jpg" rel="nofollow noreferrer">source image</a><br />
<a href="https://i.sstatic.net/y4Jwp.jpg" rel="nofollow noreferrer">reference image</a></p>
<p>the dynamic table width adjustment should make it look consistent across different zoom levels, similar to the second image provided.</p>
<p><div>
<div>
<pre class="lang-js"><code>[image description][1]

     this.iShaftTabulatorHeaders = [
                {
                    title: "Type", field: "name", headerHozAlign: "left", width: "42%", headerSort: false, hozAlign: "left", editable: false
    
                },
                {
                    title: "Value", headerHozAlign: "center", width: "60%",
                    columns: [
                        {
                            title: "Min", field: "minValue", editor: "input",editable:editCheck, headerSort: false, width: "20%", hozAlign: "right", formatter:
                                decimalFormatter
                            , headerHozAlign: "right", cellEdited: validateIShaft
                            , editorParams: {
                                formatter: decimalFormatter
                            },
                        },
                        {
                            title: "Nom", field: "nomValue", editor: "input", headerSort: false, cellEdited: validateIShaft, width: "20%", hozAlign: "right", formatter: decimalFormatter, headerHozAlign: "right"
    
                            , editorParams: {
                                formatter: decimalFormatter
                            }
                        },
                        {
                            title: "Max", field: "maxValue", editor: "input",editable:editCheck, cellEdited: validateIShaft, headerSort: false, width: "20%", hozAlign: "right", formatter: decimalFormatter, headerHozAlign: "right"
    
                            , editorParams: {
                                formatter: decimalFormatter
                            }
                        },
                    ],
                },
    
            ];
            this.ishaftTabulatorTable = new Tabulator("#ishaftTabulatorTable", {
                maxHeight: "100%",
                maxWidth: "100%",
                data: ishaftTableData,
                layout: "fitDataTable",
                headerSort: false,
                columns: this.iShaftTabulatorHeaders,
            })

[original appearance of my code ][1]
 [desired appearance for better zoom flexibility][1]
                                <div *ngIf="tableDataWorm!==null||tableDataWorm !== undefined||tableDataWorm.length !==0"  id="ishaftTabulatorTable" style="max-height: 100%;max-width: 100%;position: relative;"></div>

javascriptcssangulartypescripttabulator

Answer №1

In order to make your website responsive on different devices, it is important to incorporate media queries into your custom CSS code. By determining the relationship between zoom level and pixel width, you can effectively tailor your site for various screen sizes. This ensures that when users adjust their browser's zoom settings, your website will still maintain its responsiveness.

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

Obtain a specific element in Puppeteer JS by utilizing the waitForSelector function to detect when its class name changes

I am faced with a situation where I need to wait for a specific element to change its classes dynamically. The challenge arises when utilizing the waitForSelector function, as it fails to work when no new element is added to the DOM. Instead, it is the &l ...

javascriptnode.jsweb-scrapingnext.jspuppeteer

Encountering problem when creating new app with Angular CLI version 6.0.4 and specifying the

I just used npm to globally install angular cli version 6.0.4 with the command `npm install -g @angular/cli`. However, when I attempt to create a new project using `ng new my-first-app`, an error message is displayed: The input for the schematic does not ...

angularangular-cli

Organize items within an array based on dual properties rather than a single one

Here is an array of objects that I would like to group based on certain keys (JSON format): [ { "name": "john", "lastName": "doe", "gender": "male" }, { "name": &qu ...

javascripttypescriptjavascript-objects

Iterate through each key in the response JSON object using a variable named "a

Here is a snippet of my code: var roomid= roomIds[i] const Availabilitydata = await AvailResponse.json(); availableroomsArray.push(Availabilitydata); app.get("/api/availability", (req, res) => { res.json({ indicateur: availableroomsA ...

javascriptnode.jsjsonmern

Unfulfilled promises are left hanging

I've encountered a problem while writing a unit test for my Angular application using Jasmine with a mock service. The promise I am trying to run is not functioning as expected. Below is the service code: CreateItemController = $controller('Cre ...

javascriptangularjsunit-testingtestingjasmine

When resizing, the image problem does not transition to the next column

Just started learning how to code and I've been stuck on this issue for a while now. Whenever I resize the browser window, the image doesn't move down to the next line after the .text class like I want it to. Instead, it overflows off the page to ...

htmlcss

Adding items to a JSON document

My task involves creating a pseudo cart page where clicking on checkout triggers a request to a JSON file named "ordersTest.json" with the structure: { "orders": [] }. The goal is to add the data from the post request into the orders array within the JSO ...

javascriptjqueryjsonnode.jsexpress

What happens if I attempt to pass a blank field in multer?

I am trying to verify if the image field passed to Multer will include the file. There are no errors being thrown by Multer and the server is currently processing the request. ...

javascriptnode.jsexpressfile-uploadmulter

Are there any methods to improve the coding, align images to the center, and ensure that elements stay in their designated positions?

Is there a way to tidy up the code, center images, and keep everything in place? This is the look I desire: The main outer box should remain centered on the browser page. Pause, play, and stop buttons should float to the left of the box. My image sh ...

htmlcss

What could be causing the absence of the exported Object when importing into a different Typescript project?

I am currently in the process of developing a React component library using Typescript that I want to import into another Typescript project. Specifically, I want to import an Analytics chart library into a storybook for demonstration and testing purposes. ...

typescriptwebpackbabeljsstorybookjavascript-import

Is there a way for me to generate an Nx command that can dynamically create a library with a specified name?

In the world of Nx and Angular, I have a repository named org housing all my projects. To create a special library within this setup, like one called auth, I typically use a command that looks like this: npx nx g @nx/angular:lib auth-data-access --directo ...

angularnrwl-nx

Utilizing AngularJS to showcase and verify a form field populated by JSON data

I am looking to set up a form with validation and a submit button. As a beginner in Angular, I'm not entirely sure where to start. - I need some guidance on what Controller to use or perhaps a starting point. JS: myApp.controller('jsonCtrl&a ...

javascriptangularjsjson

The dot operator cannot be used to access Json objects

Utilizing a4j jsFunction to transmit data to the server and receive JSON in return <a4j:jsFunction name="submitData" action="#{imageRetriveBean.saveData}" data="#{responseNodesPathsBean}" oncomplete="processData(event.data)"> <a4j:param name= ...

javascriptjsonajax4jsf

Ways to identify browser version in Angular 4 to discourage IE usage

Is there a method in Angular 4 (TypeScript) for detecting the browser type? I am currently working with Angular 4 and would like to explore options for identifying the browser type when my application is loaded. I specifically want to prevent my applicati ...

javascriptangulartypescriptbrowser

Cross-building targets for Node modules for deployment on npm platform

I'm working on an ES6 module that needs to be compatible with different environments. I'm not sure whether to use webpack or rollup for building, and how to target specific environments. Building for Different Environments ES6 environments like ...

javascriptnode.jsnpmwebpacknode-modules

Using jquery to toggle active nav links in Bootstrap

I'm currently working on integrating a jQuery function to automatically update the active status of the navigation links in my Bootstrap Navbar. The structure involves a base HTML file that extends into an app-specific base file, which is further exte ...

javascripthtmljquerydjangobootstrap-4

How can I efficiently include all css from node_modules in vuejs?

For my Vue.js app built with the webpack template and vuetify, I am starting by importing the vuetify css in my App.vue. <style> @import '../node_modules/vuetify/dist/vuetify.min.css' </style> I'm wondering if this is the c ...

javascriptnpmvue.jsnode-modulesvue-cli

Front-end displaying empty data fields on my webpage

I've been struggling to understand why my data isn't mapping correctly on these two components. I have attempted two debugging methods to analyze my code and have observed the data object for both the navigation and footer. Unable to comprehend ...

javascriptreactjsgraphqlapollohygraph

Customizing default attribute prop types of HTML input element in Typescript React

I am currently working on creating a customized "Input" component where I want to extend the default HTML input attributes (props). My goal is to override the default 'size' attribute by utilizing Typescript's Omit within my own interface d ...

reactjstypescript

The Hull.js Node.js npm module now offers convex hull computations instead of concave hull calculations

For my project, I am utilizing the node.js module called hull.js to compute a concave hull. However, when following the steps outlined in the "How it works" section on this link, the algorithm seems to halt at the 2nd step, resulting in a convex hull ins ...

javascriptnode.jsnpmconcave-hull