0

I'm creating a web map. I have a div at the top of the map that when clicked maximizes and shows a custom attribute window. The attribute window displays data based on other actions in the map. The attribute window currently has 4 buttons at the top that will change the contents of the window depending on which button is selected.

The actions on the map will send a request to my Python flask web service which returns data formatted in <ul><li></li><ul> that I want to display in the attribute window.

The problem I currently have is that the text goes outside the the window - probably because I have the div set to position: absolute. But is there any way around this?

Here is a working CodePen (click the div at the top):

https://codepen.io/anon/pen/oeJGdm

Thank you for any advice.

Improve this question

1 Answer 1

Reset to default
1

Keeping your structure i would suggest few changes, I'm including only the changes in this answer.

First give room for .nav in #atributeWindow.

#attributeWindow { padding-top: 30px; /*to accomodate nav bar*/ ... }

Move nav to top padding area of #attributeWindow.

.nav{ top: 0;/* to place at top;*/ ... }

Contents will be placed below .nav since padded in #attributeWindow. So remove this padding.

.attributeContent{ /*padding-top:30px; remove this padding.*/ ... }

Finally remove the display:inline 

#test1{ /*display: inline;*/ ... }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

As far i know the default display value for a div is block. Also display:inline might prevent your overflow-y: auto;

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.