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

Achieve a flat text indentation similar to an ordered list using CSS

Is there a way to format my FAQ Q & A like an ordered list? <div class="col-left"> <h3><strong>CAPTION</strong></h3> <ul> <li>Q: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspe ...

htmlcss

Google Chrome is unable to process Jquery JSON .each() function

My website has a simple chat application that is functioning well. It uses ajax to request data in this manner: $.ajax({ url: "fetch/"+CHAT_SESSION_ID+"/"+LAST_MESSAGE_ID, dataType: "json", cache: false, success: function(data) { if (data.session_ac ...

javascriptjqueryajaxjsongoogle-chrome

How should a React Testing Library wrapper be properly typed in a TypeScript environment?

There's this code snippet from Kent C. Dodd's library that I find extremely helpful import * as React from 'react' import {render as rtlRender} from '@testing-library/react' import {ThemeProvider} from 'components/theme& ...

reactjstypescriptreact-testing-library

Do all descendants consistently trigger rerenders?

Recently, I was exploring the React new documentation here, where I came across this interesting piece of information: The context value mentioned here is a JavaScript object with two properties, one being a function. Whenever MyApp re-renders (for examp ...

javascriptreactjs

loading a dynamic grid using Ajax with jQuery

Setting up a jquery grid on a standard webpage gridPage.html involves incorporating HTML and JavaScript code as follows: $("#gridtable").jqGrid('setGridParam', { data: [ {'type': 'aType', ...

javascriptjqueryajaxjqgrid

Enabling the "allowUnreachableCode" Compiler Option in Visual Studio 2015 Triggers "JsErrorScriptException (0x3001)" Issue

We've implemented TypeScript in our Visual Studio 2015 (Update 2) setup for a non-ASP.Net project consisting of pure HTML and JavaScript. In order to disable the 'allowUnreachableCode' option, we made adjustments in the tsconfig file. It&apo ...

typescriptvisual-studio-2015tsconfig

Having trouble sending a GET request from the client to my backend route using axios in a React-Node.js/Express setup. Where did I go wrong?

Struggling with making an API request from my backend route (using nodes/express). I'm making an axios request from the client site using React. The express backend route works fine, so the issue must be in my client-side code. I've been stuck on ...

javascriptreactjsexpresshttprequestnodes

Having difficulty initializing jQuery DataTables upon button click with an Ajax request

I have a piece of HTML code that represents a partial view: <table id="table_id" class="table table-inverse"> <thead class="thead-inverse"> <tr> <th>Select</th> ...

javascriptjqueryajaxdatatablesasp.net-mvc-partialview

Utilizing inline styles with the asset pipeline feature in Rails

<%= link_to root_path do %> <div class=""> <div style="background-image:<%= image_tag " image1.png "%>"> </div> <div> <h2>Title</h2> <p>Paragraph</p> </div& ...

cssruby-on-rails-5asset-pipeline

Extracting information from a string with JSON in Javascript

Can you assist me? I have developed a web service that provides a clean string after clicking on the URL: { "PersonID": 125, "Title": "Security Officer", "Company": "TSA", "CellNum": "423-915-3224", "EmergencyPhone": "", "Email": " ...

c#javascriptjsonvb.net

Trouble with Displaying Table Outside of Div in Internet Explorer

As a UI developer, I encountered an issue where the table inside two divs is not displaying correctly in IE8. It works seamlessly in Firefox, but IE is causing me headache. If anyone has any suggestions or advice on how to fix this, please help me out. Yo ...

htmlcssinternet-explorerhtml-table

I am looking for a way to display multiple images when the user clicks a button. It needs to be done

After successfully implementing a draggable single circle image when clicking a button, I am now looking to add multiple circle images each time the button is clicked. I'm considering using the append function with the canvas tag for this purpose. Ca ...

jqueryjquery-uicsshtml5-canvas

Issue with updating BehaviorSubject not being reflected when called from my service component has been identified

In my HomeComponent, I am currently using *ngIf to switch between 3 components. The focus right now is on the relationship between two of them - the ProductListComponent and the ProductDetailComponent. Inside the ProductListComponent, there is a ProductLis ...

angulartypescript

How can you determine the status of an individual checkbox within a reactjs (material-table) component?

In my project, I have implemented a table that displays a list of students retrieved from a database. Upon clicking on each student row, a modal popup appears showing another table with 4 rows and 3 columns. Each column in the modal contains 4 checkboxes. ...

javascriptreactjscheckboxmaterial-uimaterial-table

Explore the power of accessing XML data using JavaScript

Currently, I am dealing with an XML file and attempting to extract data from it. The structure of the XML file is as follows: <doc> <str name="name">Rocky</str> <str name="Last_name">balboa</str> <str name="age ...

javascriptjqueryxmlajax

In the React js and emotion framework, fonts are only loaded in production mode after the page has been re

I have set up emotion's Global component to globally apply a font to my app: export const GlobalStyle: FC<{}> = () => ( <Global styles={css` @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;50 ...

javascriptreactjsfontsemotion

Ways to center vertically aligned buttons within cards in a React application with Material-UI

I've encountered an issue with my ReactJS project using material-ui. I created 3 cards, each with a paragraph of varying lengths. This caused the buttons to be misaligned vertically in each card, as the position differs due to paragraph size differenc ...

javascripthtmlcssreactjsmaterial-ui

Using nested ternary operations in React can cause issues with accessing local variables

Note: I encountered an issue where the extra curly braces around the first ternary result did not solve my initial problem. I replaced them with parentheses. Josep's suggestion to use getTime required me to equate the dates. The Date().setHours(0, 0, ...

javascriptreactjs

Revamp List Model through Ajax Integration in ASP .NET MVC5

Could someone please provide a hint on how to update the Model list in the view page after calling the Action Result with an Ajax request? Specifically, how can I refresh the current list model with the result of the Ajax call back? Here is the code for m ...

javascriptjqueryajaxasp.net-mvcasp.net-core

Avoiding Scroll Reset on Browser Navigation with Delayed Transition

I've recently implemented a delay in my router configuration on my website. However, I've noticed that when I try to navigate using the browser's back and forward buttons, it first jumps to the top of the page because of the delay set with { ...

javascriptvue.jsroutesvuejs3vue-router