54291

Dojo Dgrid - Use remaining space in block

Question:

I have a block like this:

<div class="container"> <div class="someStuff">Some stuff of unknown height</div> <div class="myDGrid" data-dojo-attach-point="dgrid"></div> </div>

The DGrid is started like this:

new (declare([OnDemandGrid, DijitRegistry]))({ store: ..., columns: ... }, this.dgrid);

Requirements:

<ul><li>The container block has some height. </li> <li>The someStuff block has some height that is dynamically set. </li> </ul>

The myDGrid block contains a Dojo DGrid. It should use the remainder of the space in container. For example:

<ul><li>If container is 400px and someStuff is 200px then myDGrid should be 200px. </li> <li>If container is 300px and someStuff is someStuff is 10px then myDGrid should be 290px.</li> </ul>

The dgrid should have scrollbars if all rows cannot be shown.

What is the best way to do this?

Answer1:

One solution is to change the html to this:

<div class="container"> <div class="someStuff">Some stuff of unknown height</div> <div class="containsDGrid"> <div class="myDGrid" data-dojo-attach-point="dgrid"></div> </div> </div>

And then use CSS like this:

.container { display: table; } .someStuff { display: table-row; } .containsDGrid { display: table-row; height: 100%; } .dgrid { width: 100%; height: 100%; } .dgrid .dgrid-scroller { overflow-y: auto; overflow-x: hidden; }

Recommend

  • How to update Datagrid using mvvm databinding
  • Content-Range configuration for Django Rest Pagination
  • How do I use javascript to update the values of hidden input fields
  • dojo: which events are attached to an element?
  • The value of my function is undefined
  • Invoking a Javascript from Lotus Notes on click of a button
  • How to store result of stored procedure in a variable using SQL Server
  • Get row for each user where the count of a value in a column is maximum
  • How to mount dynamically single file component in Vue.js
  • LatLong falls within a given polygon in D3 + Leaflet
  • event not defined in Firefox
  • Remove every nth element from swift array
  • sql if statement checking for null parameter
  • Convert from hex-encoded CLOB to BLOB in Oracle
  • Trouble Attaching Call Back to Unobtrusive Validation Show Error
  • Conversion failed when converting the nvarchar value 'SELECT * FROM
  • Extend Name Box
  • Select from table that does not exist
  • iOS - Is this a task for enums?
  • How can I emulate a recursive type definition in C++?
  • mapping between two ontologies
  • Need code translation from VB to C#
  • Best practice to eliminate magic numbers within a member function
  • Primefaces :radioButton inside a ui:repeat
  • How can I replace the server in Web Component Tester
  • Clear activity stack before launching another activity
  • R convert summary result (statistics with all dataframe columns) into dataframe
  • Eliminate partial duplicate rows from result set
  • Jenkins: FATAL: Could not initialize class hudson.util.ProcessTree$UnixReflection
  • Breaking out column by groups in Pandas
  • Unable to get column index with table.getColumn method using custom table Model
  • Record samples being played with OpenAL
  • How do I change content of ComboFieldEditor?
  • Android screen density dpi vs ppi
  • How would I use PHP exceptions to define a redirect?
  • How to extract text from Word files using C#?
  • Weird JavaScript statement, what does it mean?
  • Do I've to free mysql result after storing it?
  • SQL merge duplicate rows and join values that are different
  • need help with bizarre java.net.HttpURLConnection behavior