nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

HTML expand attribute table from bottom

AlexGole

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

Test.html.zip

Find more posts tagged with

Accepted answers

rscheitlin

Alex,

I have edited your JSBin to work now for toggling the table and resizing the map properly:

JS Bin - Collaborative JavaScript Debugging

All comments

AlexGole

That is it! Thank you!

rscheitlin

Alex,

I have edited your JSBin to work now for toggling the table and resizing the map properly:

JS Bin - Collaborative JavaScript Debugging

AlexGole

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>

rscheitlin

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?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.