Hi all,
I am trying to create a div (attribute table) that would expand from the bottom and collapse just like in WebAppBuilder. My problem is that my div is hiding behind the map. Any ideas how I can get it to push the map up without loosing the current extent.
Web app Builder (what Id like to achieve)
Attached is my html code
Solved! Go to Solution.
Alex,
I have edited your JSBin to work now for toggling the table and resizing the map properly:
Alex,
Your whole head section is missing (no style, css, or script). Hard to do anything with this. Hve you tried adjust the z-index of the div?
Robert, I was only able to toggle the size of the map so far (although the scalebar is acting weird when toggled, It is going when the height reduces 70% it works fine but I go back to 100% seems like the scale bar goes first) . Here is my code. I am not yet able to toggle the attribute table
toggle map size:
$("#attribute").on('click', function () {
var state = $(this).data('state');
if (state) {
$("#map").animate({ height: '100%'}, 800);
state = false;
} else {
$("#map").animate({ height:'70%'});
state = true;
}
$(this).text(state ? 'Open' : 'Close').data('state', state);
});
Now I still need to find a way to toggle the table the same way as the map. Not too sure how to make that happen yet. Any help is welcome
<div id="table" style="top: auto; left: 0px; background: white; right: 0px; bottom: 0px; position: absolute; height: 299.667px; z-index: 101; display:none;">
<table id="example" class="display nowrap" cellspacing="0" width="50%"></table>
</div>
Alex,
I have edited your JSBin to work now for toggling the table and resizing the map properly:
That is it! Thank you!