Placing two Slickgrid tables next to each other

Is there a way to arrange two slickgrid tables next to each other? Currently, I am creating two grids using grid = new Slick.Grid..., but the dimensions are hardcoded in CSS like this:

#dynamic1 { /*this is grid one*/
  position: absolute;
  top: 120px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

#dynamic2 { /*grid two*/
  position: absolute;
  top: 120px;
  left: 750px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

This is not ideal and lacks flexibility. It would be great if I could display them side by side with a total width that fills the ENTIRE browser window.

Edit: Issue resolved! Below is the updated code:

#dynamic1 {
float: left;
width: 49%;
position: absolute;
  top: 120px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

#dynamic2 { /*grid two*/
  float: right;
  width: 50%;
  position: absolute;

  top: 120px;

  right: 0px;
  bottom: 0px;
  height:500px;
}

Answer №1

position: absolute;
  **display: block;**
  top: 120px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

#dynamic2 { /*grid two*/
   **display: flex;**
  position: absolute;
  top: 120px;
  left: 750px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

To achieve the desired layout, you just need to update the display property to "block" and "flex". You can adjust the widths accordingly to make them add up to 100%. Here is an example:

position: absolute;
  **display: block;**
  **width: 45%;**
  top: 120px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

#dynamic2 { /*grid two*/
   **display: flex;**
  **width: 55%;**
  position: absolute;
  top: 120px;
  left: 750px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

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

A useful guide on how to fetch information in the front end from res.send and dynamically generate a page for every item in the database

I have a variable named data which holds an Array where each item has a unique ID. app.get('/products/:id', function (req, res) { res.send(data.map(data => "" + data.id + "")) //retrieves data of the element in the Array ...

Making an input field in Vue automatically read-only when a specific value is met

Is it possible to make an input field read-only in Vue.js based on data values? Here's a situation: <select class="form-control" id="selectCategory" :readonly="cat_id >= 1" name="cat_id"> I'm looking for a wa ...

What is the best way to design a scalable row of square elements using Bootstrap 5?

Looking to create a set of 6 Bootstrap 5 cards in square dimensions to function as buttons. Each card should be col-xl-2 wide and exactly square in height. https://i.sstatic.net/iqZyk.png I've started creating the cards with the code below. Can anyo ...

jQuery code for displaying images in a random popup position is malfunctioning

I am trying to create a feature where an image pops up randomly every 2 seconds using jQuery. However, I am facing an issue where the image always appears in a fixed position at the top-left corner. Upon checking the attributes of the image through console ...

Double-column design for viewing on both computers and mobile devices

Check out my fiddle: https://jsfiddle.net/b6q7pmkg/ I'm attempting to create a layout with two-column cards that will maintain two-column structure across both mobile and desktop viewports. Here's what I envision: On desktop: https://i.sstatic.ne ...

The main source for loading the 'XYZComponent' cannot be located

There's an issue I'm facing where ng2 code is being loaded into a .Net MVC component, but the console is showing the following error: EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'UsersComponent' Error: C ...

Executing a pair of AJAX calls and combining their results within a single div element

My project entails utilizing two AJAX requests The first request loads all the streams The second request retrieves information about online streams Due to lack of combined data from APIs for both online and offline streams, I have successfully loaded ...

How to Retrieve Values from a Movie API?

Struggling with The Movie Database API integration. Specifically, I'm stuck on retrieving the "keys" variable when calling the function with the Movie's id. I'm still learning JavaScript, so this is proving to be a bit challenging. Any assis ...

Break up every word into its own separate <span>

I am currently facing an issue with displaying an array of strings in HTML using spans. These spans are wrapped inside a contenteditable div. The problem arises when a user tries to add new words, as the browser tends to add them to the nearest existing sp ...

The lighting discrepancies on Three.js planes do not align with the material used

After creating a shape in Three.Js by combining a curved plane and two flat planes, I encountered an issue. While the vertical plane and curved plane blend seamlessly, there is a noticeable harsh line where the horizontal plane meets the curve. The lightin ...

Prevent span/button clicks by graying them out and disabling the ability to click using HTML and JQuery

I am facing a challenge with my two spans that reveal specific information when clicked. I want to make one span appear as a disabled button (greyed out) when the other span is clicked. I tried using $("#toggle-odd").attr("disabled", tr ...

Utilizing the '::marker' pseudo-element for generating Markdown-inspired headers

This code snippet is functioning correctly, however, I have a suggestion to make it more appropriate. Instead of using '::before', why not try using '::marker'? I attempted this adjustment but encountered an issue. Can anyone explain wh ...

Tips for configuring CakePHP to trigger the second submit button when the enter key is pressed

My form includes two submit buttons: "cancel" and "find." While both buttons work correctly when clicked, pressing the enter key always triggers the submission of "cancel." I don't want to change the button order in the form. To address this issue, I ...

Sending basic HTML from Express.jsSending simple HTML content from an Express.js

Within my index.html document, I have the following: <input name='qwe'> {{qwe}} I am looking to send {{qwe}} in its literal form, without it being replaced by server-populated variables. How can I achieve this? My initial thought was to ...

Issue with onClick event not functioning properly in a React / Next.js component that is nested

I'm struggling to make the hideMoreDetails() function work on this component. Whenever I click on the 'close-more-info-cross' div, nothing gets logged in the console and the state remains unchanged. Any thoughts? Could it possibly be a stac ...

Error Message: Unable to retrieve property "country" as the variable this.props is not defined

Currently, I am developing a react application However, when running this function using infinite scroll, an error is encountered An Unhandled Rejection (TypeError) occurs: Unable to access the "country" property, since this.props is undefined async pa ...

Guide on making a color legend with JavaScript hover effects

On my website, there is a dynamic element that displays a table when values are present and hides it when there are no values. The values in the table are color-coded to represent different definitions. I wanted to add hover text with a color key for these ...

Showing the Datepicker from jQuery right in the middle of the screen

Here's the generated code as default: <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper- clearfix ui-corner-all ui-datepicker-multi ui-datepicker-multi-2" style="width: 34em; position: absolute; left: ...

The Chrome extension I created using JQuery to trigger 'keyup' events is not updating the value of the 'input' field on a website that utilizes knockout JS

I am currently working on developing a Google Chrome extension for a website that appears to be utilizing 'knockout JS'. Let's take a look at the HTML element below: <input type="text" class="form-control text-right" id="amount" autoco ...

Expand or collapse in a sequential manner

Is there a way to ensure that only one table row expands at a time, causing the others to collapse? Any suggestions on achieving this? Here's the HTML code snippet: <table class="table"> <tbody> <tr class="parent" id="2479"> ...