Jake
March 11, 2021, 5:07pm
1
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?
Jake
March 12, 2021, 8:20am
3
Thank you for your help @kerrydp , 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 -->
Jake
March 14, 2021, 6:38pm
4
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:
@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
Jake
March 15, 2021, 9:57am
6
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