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
Alex,
I have edited your JSBin to work now for toggling the table and resizing the map properly:
JS Bin - Collaborative JavaScript Debugging
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>
That is it! Thank you!
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
