Windy bottom "timeline" is not displayed correctly

jantold

Hey guys!
I am right now testing out the windy API and I have an issue with the #bottom, the timeline of windy is cut in half

My css:

#windy {
height: 100%;
width: 100%;
position: absolute;
}

#windy #embed-zoom {
display: none !important;
}
#windy #logo-wrapper {
top: initial;
bottom: 65px;
}
#windy #logo-wrapper #logo {
left: 140px;
}

Thanks for your help!

oderon

@jantold Hi, go to html inspector F12, and find class named: progress-bar and set it to progress-bar2 for example. If it fix the problem it means that you are using another library which overrides progress-bar class behaviour.

Greetings

jantold

@oderon oh it changed! thank you for your help,
so could it have something to do with my current leaflet library?

oderon

@jantold IF it changed then yes it does impact leaflet library. Go to inspector again F12, select the div with class progress-bar, then look at Styles tab and find what library overrides the leaflet style. In my case it was bootstrap who causes the problem. I had to bypass it by creating global style for progress-bar like this:

.progress-bar {
  overflow: visible;
  background-color: transparent;
  text-align: unset;
}

jantold

@oderon thank you so much!
bootstrap was also in my case the problem :D