When I click on refresh it becomes half visible - html

Question

I have on my page a grid where I show log history and a refresh button ( onclick I refresh the grid with new data ).
<div dojoType="dijit.layout.ContentPane" title="Log history">
<button dojoType="dijit.form.Button" id="btn_refresh" onclick="load_logs" style="float:right; border:1px solid black;">Refresh</button>
<div dojoType="dojo.data.ItemFileReadStore" jsId="log" data="window.store_data_log"> </div>
<div id="grid_log" dojoType="dojox.grid.DataGrid" store="log" structure="window.layout_log" queryOptions="{deep:true}" query="{}" clientSort="true" rowsPerPage="5"> </div>
</div>
Before
After
Problem is that when I click, in Chrome, my refresh button moves up and become half visible. I tried to put <BR/> after the button but then grid is then not visible at all. I tried to put the button in a new but also then grid is not visible at all. What to do ?

Answer 1

I had a similar issue and decided to use dijit.layout.LayoutContainer and dijit.layout.ContentPane which has worked great. On the main content pane just set layoutAlign="client" and it will take up the remaining layout space.
<div dojoType="dijit.layout.ContentPane"
title="Log history">
<div dojoType="dijit.layout.LayoutContainer"
style="width: 100%; height: 100%;">
<div dojoType="dijit.layout.ContentPane"
layoutAlign="top"
style="height:28px;padding:2px;">
<button dojoType="dijit.form.Button"
id="btn_refresh"
onclick="load_logs"
style="float:right; border:1px solid black;">
Refresh</button>
</div>
<div dojoType="dijit.layout.ContentPane"
layoutAlign="client"
style="padding:0px 2px;">
<div dojoType="dojo.data.ItemFileReadStore"
jsId="log"
data="window.store_data_log"> </div>
<div id="grid_log"
dojoType="dojox.grid.DataGrid"
store="log"
structure="window.layout_log"
queryOptions="{deep:true}"
query="{}"
clientSort="true"
rowsPerPage="5"> </div>
</div>
</div>
</div>