How to use Grid Resizable?

Hi,
I need to use grid resizable. I’m executing the app with electron on MacOs.
I need to have a row reusable which contains a table, like as follows.
However, I’m not able to resize the grid. It seems that nothing happens and it doesn’t works using the
span.

 <div class="row resizable" >
	<div class="col" id="info-company">
        <div class="data-table card">
		<table>
		    <thead>
		       <th class="label-cell white"> <b> Company </b> </th>
		       <th class="label-cell white"> <b> Number </b> </th>
               <th class="label-cell white"> <b> ID </b> </th>
        </thead>	 
        <tbody>
		<tr>
         <td class="label-cell"> .....</td>
         <td class="label-cell"> .....</td>
         <td class="label-cell"> .....</td>
        </tr>
        </tbody>
      </table>
      </div>
      </div>
      <span class="resize-handler"></span>
    </div>

Your col class div needs to also have resizeable class

As seen in https://framework7.io/docs/grid.html#resizable-grid

<div class="row">
  <div class="col resizable">
    ...
    <span class="resize-handler"></span>
  </div>
  <div class="col resizable">
    ...
    <span class="resize-handler"></span>
  </div>
  ...
</div>

I think maybe you have put the resizeable class into the row div by mistake?

Thank you for your help @kerrydp :slight_smile: , however It does not change anything. In my case I need row resizable. I’m trying to have all elements inside a stack of rows. I also set the height, as written in the documentation, but it still doesn’t work
Like this:

 <div class="page-content">

	<div class="block">

		<div class="row resizable"  style="height: 100%">
			<div class="col resizable" id="info-company1" style="height: 100%"></div>
			<span class="resize-handler"></span>
		</div>
						
			
		<div class="row resizable"  style="height: 100%">
			<div class="col resizable" id="info-comapany2" style="height: 100%"></div>
			<span class="resize-handler"></span>
		</div>

	</div> <!--block-->
</div> <!-- ./ page-content -->

I found a partial solution. Now the resizable rows work. However, the text/elements inside the text doesn’t stretch. As showed in the following figures:

Schermata 2021-03-14 alle 10.50.07 Schermata 2021-03-14 alle 10.50.24

@nolimits4web where I wrong? I was not able to reproduce the issue in a jsfiddle.

<div class="page-content">

    <div class="block align-items-stretch" style="height: 100px" id="row-grafici">
    
        <!--first row-->
        <div class="row resizable"  style="height: 100%;">
            <div class="col-100 medium-100 large-100 display-flex justify-content-center no-margin no-padding" id="id-company" style="height: 100%"></div>
            <span class="resize-handler"></span>
        </div>

        <!--second row-->
        <div class="row resizable"  style="height: 100%;">
            <div class="col-100 medium-100 large-100 display-flex justify-content-center no-margin no-padding" style="height: 100%">        
            <div class="card">
                <div class="card-header">Header</div>
                <div class="card-content"> Card content.......
                </div>
                <div class="card-footer">Footer</div>
            </div>          
            </div>
            <span class="resize-handler"></span>
        </div>

    </div> <!--block-->
</div> <!-- ./ page-content -->

Would be good to see JSFiddle, Codesandbox to see the issue. Use template from this thread How to ask a good question on forum

thank you @nolimits4web. Here the issue.

Not sure what you mean, but as I see resizing works correctly, you had some CSS issues, like setting overflow: hidden to .card. Anyway just tweak the CSS to your needs https://codesandbox.io/s/hardcore-banzai-w6fxf?file=/pages/home.html

1 Like