There is 1 Div-container, into which I want to render my full application. The application shall fill out the whole Div width.
I have tried both the following Divs, but still the Div-container is not 100%, there is even no width like as if there is no content. What is wrong?
<div id="stuff"></div>
and
<div style="width: 100%;" id="stuff"></div>
My ExtJS app:
launch: function() {
var div = Ext.Element.get('stuff');
Ext.create('Ext.panel.Panel', {
renderTo: div,
width: "100%",
height: 500,
title: 'Container Panel',
layout: 'border',
items: [
{
xtype: 'panel',
title: 'Child Panel 1',
height: '80%',
width: '100%'
},
{
xtype: 'panel',
title: 'Child Panel 2',
html: 'textextetxtext',
height: '80%',
width: '100%'
}
]
});
}
Try setting the div to a fixed width in pixels instead of just 100%. In other words, if I give you 100% of my money, and you get nothing, it's because I have no money. Similarly, you have 100% width specified, but of what? Perhaps the #stuff div needs a containing div to draw its 100% width from.
Furthermore, both child panels Have 100% width and 80% height. Try 50% each.
Thanks for the help. There were several additional Divs of the framework on top. So removing them solved it.
Related
I am using #react-google-maps/api to use google map inside Next JS app.
Based on their documents, they mentioned that the parent HTML element could determine the size of the map.
My return function from my component looks like this:
return (
<div
style={{
display: "flex",
flexDirection: "column",
height: "100vh",
width: "100%",
}}
>
<GoogleMap
options={mapOptions}
zoom={mapOption.zoom}
center={mapCenter}
mapTypeId={google.maps.MapTypeId.ROADMAP}
mapContainerStyle={{width: "300px",height: "300px"}}
onLoad={() => console.log("Map Component Loaded...")}
/>
</div>
)
So basically I need to determine the width and height of the map and via parent, it would be overridden if I want to make it fill the entire screen. The problem is that the above return still shows the map with 300 to 300 px.
Does anyone have any solution so that the initial map fills the entire screen?
MapContainerStyle is a child of your div container
It's because the <GoogleMap /> attribute mapContainerStyle is also a seperate container and is only a child of the <div> container outside it, where you put the style attribute.
So although you set the <div> container with 100% width and height or 100vh/vw, if it's child component got a lower width and height, most especially because what you're using here is pixels, ofcourse it would show as only 300px in width and also in height.
Here's an example:
return (
<div
style={{
backgroundColor: "green",
display: "flex",
flexDirection: "column",
height: "500px",
width: "500px"
}}
>
<GoogleMap
mapContainerStyle={{
margin: "auto",
width: "50%",
height: "50%"
}}
center={center}
zoom={3}
></GoogleMap>
</div>
)
Notice that the <div> container having a green background and height/width of 500px, shows that it contains the mapContainerStyle provided here that I set the width and height to 50%.
So if you want to fill the 500px square <div> container, you should just set the height and width of mapContainerStyle to 100%. It would look like this:
return (
<div
style={{
backgroundColor: "green",
display: "flex",
flexDirection: "column",
height: "500px",
width: "500px"
}}
>
<GoogleMap
mapContainerStyle={{
margin: "auto",
width: "100%",
height: "100%"
}}
center={center}
zoom={3}
></GoogleMap>
</div>
)
So to answer your question, you can just leave your <div> container without any styling, then setting the mapContainerStyle to 100% for it's width and height. Or you can set your <div> container as you have on your sample, depending on your use case. But here's the sample for both.
Without <div> styling:
return (
<div>
<GoogleMap
mapContainerStyle={{
margin: "auto",
width: "100%",
height: "100%"
}}
center={center}
zoom={3}
/>
</div>
)
With <div> styling:
return (
<div
style={{
height: "100vh",
width: "100%"
}}
>
<GoogleMap
mapContainerStyle={{
margin: "auto",
width: "100%",
height: "100%"
}}
center={center}
zoom={3}
></GoogleMap>
</div>
)
Hope this helps! Feel free to leave a comment if you need clarification or if I misunderstood your question somehow. But that's about it from me for now.
I want to show scrollbar without providing fixed height to inner container with outer container having position fixed.
I am facing an issue that if I provide to fixed height to the innerContainer. And when I check the responsiveness and change the height of the window the outerContainer with position fixed hides the content of innerContainer.
// OUTER CONTAINER
<div style={ { width: "250px", zIndex: 5, position: "fixed", right: "2rem" } }>
<div style={ { width:"100%, height: "100px" } }>
// having some other content
</div>
// INNER CONTAINER
<div style={ { width: "100%", height: "400px", overflowY: "auto" } }>
// overflowing content inside the container
</div>
</div>
Is there any solution please help me. I will be very thnkfull for time and help.
add to the outer container:
display: "flex", flexDirection: "column"
and then you can remove the height of the inner container.
I'm trying to make a vertical slider using Swiper.
It wants to look like the images do on this site
https://www.ikbird.com/
But respond a little better to browser size changes.
Its just to contain images like the example. I want each image to be the same height. So, say it takes up 80% of the screen height.
I can achieve that, but not at the same time as scaling by width
I've tried vh and vw units in css. The problem is, I can get it working for width, but then it doesn't work for height, and vice versa.
I've tried using vh and vw, but nothing seems to work both ways.
Here's one version of CSS I tried:
.swiper-container {
width: auto;
height: 100%;
max-height: 100%;
text-align: center;
background: blue;
}
.swiper-container-container {
margin-top: 5vh;
height: 90vh;
background: green;
}
img {
max-width: 100%;
max-height: 100%;
height: 100%;
}
With the HTML (for some reason the vh units break if its not got an outer container)
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/placeholder-a.png"></div>
<div class="swiper-slide"><img src="images/placeholder-b.png"></div>
<div class="swiper-slide"><img src="images/placeholder-c.png"></div>
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
centeredSlides: true,
/*cssMode: true,*/
mousewheel: true,
keyboard: true,
/*freeMode: true,*/
spaceBetween: 30,
})
</script>
Does anyone have any idea how to implement this? If its in a different slider or with a different technique that would be fine.
Thanks
Simply put I have 3 elements,
<div>
<Header/>
</div>
<div>
<Body/>
</div>
<div>
<Footer/>
</div>
The header is a static but undefined height.
The body is an accordion that when expanded should overflow into a scroll bar
The footer is also an accordion that should always be showing but can minimize to only show its header rather than header + content.
What I need to have happen is to have the header always displayed in full, have the accordionFooter always display as much as it wants (whether header + content, or just header), and finally let the bodyAccordion display as much as it can and then overflow into a scroll bar.
Here's what I have so far.
Container: {
height: '100%',
minHeight: '100%',
display: 'flex',
flexDirection: 'column'
},
SectionContainer: {
flex: '1',
display: 'flex',
flexDirection: 'column',
position: 'relative'
},
bodyAccordion: {
overflowY: 'auto'
},
footerAccordion: {
position: 'absolute',
bottom: '0px',
right: '0px',
left: '0px'
}
The html is considerably more complex so here is a simplified version
<div className={Container}>
<MyHeader/>
<div className={SectionContainer}>
<div className={bodyAccordion}>
<MyAccordion/>
</div>
<div className={footerAccordion}>
<MyFooterAccordion/>
</div>
</div>
</div>
When the above code runs the bodyAccordion will overflow into the footeraccordion rather than increasing the size of the scrollable wheel.
Here's a jsFiddle that shows the issue
https://jsfiddle.net/jackyFrosty/mwz62bh9/2/
You need to to asign in your container class min-height:100vh. It happens because your 100% is equal to your child's labels
var headerheight= document.querySelector("header").offsetHeight;
var footerheight= document.querySelector("footer").offsetHeight;
var contentheight = window.innerHeight -(footerheight+headerheight);
document.querySelector(".content").style.height= `${contentheight}px`;
*{
margin:0;
padding:0;
}
header{
height:100px;
background-color:red;
}
footer{
height:50px;
background-color:yellow;
}
.content{
background-color:skyblue;
width:100%;
overflow-y:scroll;
}
.inner{
height:500px;
width:50%;
margin:0 auto;
background-color:white;}
<header>header</header>
<div class="content">
<div class="inner">body</div>
</div>
<footer>footer</footer>
i used javascript to get header and footer height so u can calculate the body height for remaining screen height !
When the above code runs the bodyAccordion will overflow into the footeraccordion rather than increasing the size of the scrollable wheel.
This is happening because you have given position: absolute to your footer. Get rid of it and the bodyAccordion will stack over your footer. If you want the scroll to work, you should restrict the height of your bodyAccordition. Currently there's no restriction on it. As Sergio has explained in his answer, it will be better if you go with 100vh instead of 100%
let the bodyAccordion display as much as it can and then overflow into a scroll bar
Finally for it, get rid of flex:1. This will make your bodyAccordition to take up maximum space above footer.
Hope it helps. Cheers!
Thanks for the answers everyone,
I was able to figure this out by using the following
<div className='header'>
<MyHeader/>
</div>
<div className='container'>
<div className='content'>
<MyContent/>
</div>
<footer className='footer'>
<MyFooter/>
</footer>
</div>
container: {
position: 'relative',
height: 'calc(100vh - 95px)',
display: 'flex',
flexDirection: 'column'
},
header: {
height: '35px',
width: '100%'
},
content: {
overflowY: 'auto',
flex: '1'
},
footer: {
marginBottom: '0px',
textAlign: 'left'
}
I am using the following CSS to provide scroll bar when window is re-sized. I have two problems. One is the vertical scroll bar is visible by default. I want it to appear only if window is re-sized. I have tried with different heights but that didn't go. Second problem is when window is re-sized, the background color of the part of div which is viewed after scrolling is not applied. How do I fix these? This is my CSS and div
<div class = "gridclass" id="grid1" jsid="grid1" dojoType="dojox.grid.EnhancedGrid"
query="{ name: '*' }"data-dojo-props="plugins:{ pagination:{pageSizes: ['10', '25', '50', '100'],
description: true, sizeSwitch: true, pageStepper: true, gotoButton: true, position: 'bottom', maxPageStep: 7}}, rowsPerPage:10"></div>
</div>
#grid1{
overflow-x:auto;
overflow-y:auto;
height:60%;
width: 106.5%;
}
Set overflow: hidden; on the body tag :
<style type="text/css">
body
{
overflow:hidden;
}
</style>
To hide only the vertical scrollbar, use overflow-y:
To hide only the Horizontal scrollbar, use overflow-x:
<style type="text/css">
body
{
overflow-y:hidden; or overflow-x:hidden
}
</style>
Second Problem :
Try this one..
Fiddle
$(window).scroll(function(){
if($(window).scrollTop()<800){
$('#fixed').css('background-color','Yellow');
}else{
$('#fixed').css('background-color','White');
}
})
css style:
body{
overflow:hidden;
}
and javascript:
$(window).resize(function() {
$('body').css({'overflow':'auto'});
});