I'm building a SPA with Ionic and Angular. My map shows up just fine when it takes up the full screen (i.e., ion header + map only) but in one of my screens, I'm trying to show the ion header + a form + the map so that the map would only occupy ~50% (~325px) of the screen. My issue is that, for this screen, the map still takes on the full screen height (~625px) so that ~50% of the map exists off-screen.
My current structure looks as follows:
ionic nav bar
formContainer div (height determined by contents) wraps the form
mapContainer div (height set to fill the rest of the visible screen via flex box) wraps the map
I think that my issue is caused by this css styling:
.angular-google-map {
height: 100%;
}
.angular-google-map-container {
position: absolute;
height: 100%;
width: 100%;
}
My hypothesis is that the height gets set to 100% (~625px) before the mapContainer div can determine its height (~325px). Has anyone had any luck wrapping a map so that its height only takes up the visible div?
Try to set top and left. Also remember that ionic adds a new scroll class to your content
.map-container .scroll{
height: 100%;
}
.angular-google-map-container {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Related
I'm creating a application with angular.js 1.5 components. I'm facing a problem with the footer it's going up side rather than staying down how can I fix this?
Here is the plunker code.
[https://plnkr.co/edit/ax1EO771NJg1rfgI840S?p=preview][1]
The problem is that you are using virtual height value so the .wrapper element takes the height of your window and doesn't push the footer below.
.wrapper {
position: relative;
top: 0;
// height: 100vh
}
I want to add an image inside the doughnut
you can see my doughnut here
I already tried by using background-image:url(image.png) but is there any way to do it.
Technically, it's not possible to add images in Charts.
However, you can easily work with that by adding an image as a background for chart container. I.e.:
#chartdiv {
width: 210px;
height: 210px;
margin: 0 auto;
background: transparent url(YourImage) no-repeat center 70px;
}
I'm trying to create a React app that is optimized for mobile and am doing most of the layout using flexbox. I'm having trouble forcing the main container of my app to automatically expand to the full device height.
What rules can I apply, specifically to my html container <div id="react-app"></div> and my main app container <App></App> so that they will always stretch to the full screen height, even when their children wouldn't force them to do so?
You can use
height:100vh
for your App component, but it can looks not perfect on iOS Safari. Also you can set
html, body, #reactapp, .App {
height: 100%;
}
.App {
display: flex;
}
patelarpan's answer here seems to be the most concise solution:
You can achieve this by using "vh" units, and it's a more effective way than using percentages because you don't need to set every parent height to 100% if you want the child's height to be 100%.
.columnContainer {
display: flex;
height: calc(100vh - 60px);
}
Here is an example of the 60px app bar height being excluded from the viewport height.
I replaced the height line in patelarpan's example with this, since I don't have an app bar:
height: 100vh;
root > [data-reactroot] { height: 100% } in your CSS should work.
Or just the tag itself:
[data-reactroot] { ... }
All:
Im pretty new to React, I wonder how can I implement a Header Menu + Side Menu component layout in React?
It should be something like:
Click the orange header menu item, according side menu(the dark grey part on the left, there is no the dark grey part shown initial, only show when click according item in the header menu) will show up, click same item again, it will slide left to toggle. And the content area will auto scale.
Any help about how to implement this will be appreciated, it does not have to be a total solution, somethign like how to click and side menu toggle slide out or how scale the right side when left side menu slide out, or something like that.
Thanks
Theres too much in this question to give a full answer. So I'm just going to give a simple layout design with no code. You should be able to write the code yourself with this setup as it should be very straight forward.
you need a main component that renders the Header, Sidebar and Content of the page.
the header main component needs to handle an open or closed state based on the header clicks. so header item onClick(this.props.onClick). the props.onClick is passed to the header component and the main component needs to capture that and set a state.
this.setState({sidebarOpen: !this.state.sidebarOpen}); this will sumulate a toggle effect on the state for the click. now when you render just set a className based on that state.
let sidebarClassname = this.state.sidebarOpen ? 'sidebar open' : 'sidebar';
let contentClassname = this.state.sidebarOpen ? 'content open' : 'content';
and pass that through on the render to your component.
<Sidebar className={sidebarClassname}
<Content className={contentClassname}
from here you should have the components rendering and the sidebar should be getting an active class when you click on the header. then you just need to style it
the layout itself should be fairly simple.
css
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
}
.sidebar {
position: absolute;
top: 60px;
left: -300px;
height: 100%;
width: 300px;
transition: left .3s ease-in-out;
}
.content {
position: absolute;
top: 60px;
left: 0;
right: 0;
height: 100%;
transition: left .3s ease-in-out;
}
that should be pretty straight forward. you need to position the sidebar out of the page and the content needs to fill the page
the cool part here is when you get an active class (i.e open) you should be able to adjust the left position to create the slide in effect (because we added the css transition on the left property.
.sidebar.open {
left: 0;
}
.content.open {
left: 300px;
}
Sample Fiddle
I have tried everything but can't seem to get the height of the page content. I am using Onsen UI with JQuery. Can anyone provide me with an example?
I am trying to calculate the height minus the navbar so that I can adjust a map to full height.
Thanks!
You don't need to calculate any height, just put the map in a div and set the style to something like that:
#map_canvas {
position: absolute;
width:100%;
height: 100%;
margin: 0;
padding: 0;
z-index: -1
}
Anyway, if you really need the height of the current page, you can get it with JQuery using $('.page__content').height();