So the problem I am having is that whenever I switch the size of the map container in my project to something other than a hardcoded amount of pixels, the map effectively disappears. I think that it might be setting the height to 0 somehow or it is not properly getting the % to the container.
CSS:
.map-container {
height: 100% !important;
width: 100%;
border-style: solid;
border-color: cadetblue;
}React Render bit that it is constructed in:
render() {
return (
<div>
<div className="sidebar">
Longitude: {this.state.lng} | Latitude: {this.state.lat} | Zoom: {this.state.zoom}
</div>
<div ref={this.mapContainer} className="map-container" />
</div>
);
}What its supposed to look like (when container height is set to hardcoded 800px):
What it looks like with height set to 100% or really any other percent:
The overall goal here is to make the entire window you can see be sized to whatever size window the user has and the map and other panes to be sized properly so they are fixed in between the header and footer. I think I recall seeing somewhere that to get the heights to go by %, you need to have all of the other pieces in its ancestry set to the right percentages, but I am not entirely clear on how to do that within my react app.
Side note: Probably needs to be a separate question, but I can't get the footer to stop hiding the bottom of my map. Think it's a problem of the IonContent not interacting with the IonFooter correctly. Any ideas would help here.
code for reference:
<IonPage>
<IonHeader>
<IonToolbar color="primary">
<IonGrid>
<IonRow>
<IonCol>
<div className="home-title">
<h2 color="light" >
Welcome to IPSS!
</h2>
</div>
</IonCol>
<IonCol>
</IonCol>
<IonCol >
<IonSearchbar>
</IonSearchbar>
</IonCol>
</IonRow>
</IonGrid>
</IonToolbar>
</IonHeader>
<IonContent className="home-content">
<IonGrid >
<IonRow>
{/* To be replaced with countryInfo component src: countryInfo.tsx */}
<IonCol class="menu1">
<IonRow>
<IonCol> <IonIcon size= "large" icon={add}></IonIcon> </IonCol>
<IonCol>
<div>
{selectedCountry}
</div>
</IonCol>
<IonCol>
<IonIcon class="ion-float-right" size= "large" icon={arrowForward}></IonIcon>
</IonCol>
</IonRow>
<IonRow>
<IonText>
<p className="para1">
Population: 1<br/>
Median Age: 34 <br/>
Pop. Growth Rate <br/>
Birth Rate: 18.2/ 1000 <br/>
Death Rate: 7.45/ 1000 <br/>
Infant mortality rate: 30 / 1000 <br/>
Life Expectancy: 72.5
</p>
</IonText>
</IonRow>
</IonCol>
<IonCol>
{/* To be replaced with regionItem component src: regionItem.tsx use flyto from mapbox */}
<IonContent scrollEvents={true} scrollY={true} className="regionSelect">
<IonItem detail={true}>
</IonItem>
<IonItem>
</IonItem>
<IonItem>
</IonItem>
</IonContent>
</IonCol>
<IonCol>
{/* Home page chart*/}
<HomeChart selectedCountry={this.state.selectedCountry}></HomeChart>
</IonCol>
</IonRow>
<IonRow>
<IonCol>
{/* Map component src: Map.js */}
<WorldMap selectedCountry={selectedCountry} onCountryChange={this.handleCountryChange}></WorldMap>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
<IonFooter>
<IonToolbar color="primary">
<IonButtons slot="start">
<Link to="/HomePage" className="footer-icons">
<IonButton>
<IonIcon size= "large" slot="start" icon={homeOutline} ></IonIcon>
Home
</IonButton>
</Link>
<Link to="/Page2" className="footer-icons">
<IonButton >
<IonIcon size= "large" slot="start" icon={locationOutline} ></IonIcon>
Page 2
</IonButton>
</Link>
</IonButtons>
<IonButtons slot="end">
<IonButton>
<IonIcon size= "large" icon={globeOutline} ></IonIcon>
</IonButton>
<IonButton>
<IonIcon size= "large" icon={statsChartOutline} ></IonIcon>
</IonButton>
<IonButton>
<IonIcon size= "large" icon={saveOutline} ></IonIcon>
</IonButton>
<IonButton>
<IonIcon size= "large" icon={shareOutline} ></IonIcon>
</IonButton>
<IonButton>
<IonIcon size= "large" icon={listOutline} ></IonIcon>
</IonButton>
</IonButtons>
</IonToolbar>
</IonFooter>
</IonPage>A little additional info: Project is made with React 17.0.2, Ionic/React 5.6.6, and map box gl 2.2.0 The map is a custom react component generally set up like this example from the map box docs: Link
