Mixing
Material UI - Expand Panel doesn't shrink the above div
0
Scenario :
- I am using leaflet and React-table as one component.
- I have two div one below the another.
- The first div is leaflet map
and the second div is react-table. - The second div has Expansion
Panels inside panel it has react-table.
Issue :
- The issue here is when I
expand the panel it taking more than 100% of parent height.
It should
shrink the first div to 60% and second div to 40% when I expand the
panel.
ISSUE
Expected Output - below image
Running Code - Editor
javascript html css css3 material-ui
edited Jan 2 at 12:45
Abhishek Kumar
1,175417
asked Jan 2 at 0:45
contact dummycontact dummy
1639
add a comment |
0
Scenario :
- I am using leaflet and React-table as one component.
- I have two div one below the another.
- The first div is leaflet map
and the second div is react-table. - The second div has Expansion
Panels inside panel it has react-table.
Issue :
- The issue here is when I
expand the panel it taking more than 100% of parent height.
It should
shrink the first div to 60% and second div to 40% when I expand the
panel.
ISSUE
Expected Output - below image
Running Code - Editor
javascript html css css3 material-ui
edited Jan 2 at 12:45
Abhishek Kumar
1,175417
asked Jan 2 at 0:45
contact dummycontact dummy
1639
1
Thediv#maphas a hard-coded height of93vh, specified inleaflet.js. If you want it to shrink, you need to override that accordingly.
– Andrei Gheorghiu
Jan 2 at 3:30
1
your code is not working..
– Gaurav Rana
Jan 2 at 6:32
@GauravRana Please check now.
– contact dummy
Jan 2 at 21:38
The map container has fixed width of 90vh. Therefore, it takes 90% of the view port.
– mahan
Jan 3 at 8:16
add a comment |
0
0
0
Scenario :
- I am using leaflet and React-table as one component.
- I have two div one below the another.
- The first div is leaflet map
and the second div is react-table. - The second div has Expansion
Panels inside panel it has react-table.
Issue :
- The issue here is when I
expand the panel it taking more than 100% of parent height.
It should
shrink the first div to 60% and second div to 40% when I expand the
panel.
ISSUE
Expected Output - below image
Running Code - Editor
javascript html css css3 material-ui
edited Jan 2 at 12:45
Abhishek Kumar
1,175417
asked Jan 2 at 0:45
contact dummycontact dummy
1639
Scenario :
- I am using leaflet and React-table as one component.
- I have two div one below the another.
- The first div is leaflet map
and the second div is react-table. - The second div has Expansion
Panels inside panel it has react-table.
Issue :
- The issue here is when I
expand the panel it taking more than 100% of parent height.
It should
shrink the first div to 60% and second div to 40% when I expand the
panel.
ISSUE
Expected Output - below image
Running Code - Editor
javascript html css css3 material-ui
javascript html css css3 material-ui
edited Jan 2 at 12:45
Abhishek Kumar
1,175417
asked Jan 2 at 0:45
contact dummycontact dummy
1639
edited Jan 2 at 12:45
Abhishek Kumar
1,175417
asked Jan 2 at 0:45
contact dummycontact dummy
1639
edited Jan 2 at 12:45
Abhishek Kumar
1,175417
edited Jan 2 at 12:45
Abhishek Kumar
1,175417
edited Jan 2 at 12:45
Abhishek Kumar
1,175417
1,175417
asked Jan 2 at 0:45
contact dummycontact dummy
1639
asked Jan 2 at 0:45
contact dummycontact dummy
1639
asked Jan 2 at 0:45
contact dummycontact dummy
1639
1639
1
Thediv#maphas a hard-coded height of93vh, specified inleaflet.js. If you want it to shrink, you need to override that accordingly.
– Andrei Gheorghiu
Jan 2 at 3:30
1
your code is not working..
– Gaurav Rana
Jan 2 at 6:32
@GauravRana Please check now.
– contact dummy
Jan 2 at 21:38
The map container has fixed width of 90vh. Therefore, it takes 90% of the view port.
– mahan
Jan 3 at 8:16
add a comment |
1
Thediv#maphas a hard-coded height of93vh, specified inleaflet.js. If you want it to shrink, you need to override that accordingly.
– Andrei Gheorghiu
Jan 2 at 3:30
1
your code is not working..
– Gaurav Rana
Jan 2 at 6:32
@GauravRana Please check now.
– contact dummy
Jan 2 at 21:38
The map container has fixed width of 90vh. Therefore, it takes 90% of the view port.
– mahan
Jan 3 at 8:16
1
1
The
div#map has a hard-coded height of 93vh, specified in leaflet.js. If you want it to shrink, you need to override that accordingly.– Andrei Gheorghiu
Jan 2 at 3:30
The
div#map has a hard-coded height of 93vh, specified in leaflet.js. If you want it to shrink, you need to override that accordingly.– Andrei Gheorghiu
Jan 2 at 3:30
1
1
your code is not working..
– Gaurav Rana
Jan 2 at 6:32
your code is not working..
– Gaurav Rana
Jan 2 at 6:32
@GauravRana Please check now.
– contact dummy
Jan 2 at 21:38
@GauravRana Please check now.
– contact dummy
Jan 2 at 21:38
The map container has fixed width of 90vh. Therefore, it takes 90% of the view port.
– mahan
Jan 3 at 8:16
The map container has fixed width of 90vh. Therefore, it takes 90% of the view port.
– mahan
Jan 3 at 8:16
add a comment |
1 Answer
1
active
oldest
votes
0
Add min-height for iframe as in below. You can add min-height according to your requirement.
<pre>
iframe{min-height:300px;}
</pre>
answered Jan 3 at 7:53
Sarabjit SinghSarabjit Singh
14812
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000095%2fmaterial-ui-expand-panel-doesnt-shrink-the-above-div%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Add min-height for iframe as in below. You can add min-height according to your requirement.
<pre>
iframe{min-height:300px;}
</pre>
answered Jan 3 at 7:53
Sarabjit SinghSarabjit Singh
14812
add a comment |
0
Add min-height for iframe as in below. You can add min-height according to your requirement.
<pre>
iframe{min-height:300px;}
</pre>
answered Jan 3 at 7:53
Sarabjit SinghSarabjit Singh
14812
add a comment |
0
0
0
Add min-height for iframe as in below. You can add min-height according to your requirement.
<pre>
iframe{min-height:300px;}
</pre>
answered Jan 3 at 7:53
Sarabjit SinghSarabjit Singh
14812
Add min-height for iframe as in below. You can add min-height according to your requirement.
<pre>
iframe{min-height:300px;}
</pre>
answered Jan 3 at 7:53
Sarabjit SinghSarabjit Singh
14812
answered Jan 3 at 7:53
Sarabjit SinghSarabjit Singh
14812
answered Jan 3 at 7:53
Sarabjit SinghSarabjit Singh
14812
answered Jan 3 at 7:53
Sarabjit SinghSarabjit Singh
14812
14812
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000095%2fmaterial-ui-expand-panel-doesnt-shrink-the-above-div%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
The
div#maphas a hard-coded height of93vh, specified inleaflet.js. If you want it to shrink, you need to override that accordingly.– Andrei Gheorghiu
Jan 2 at 3:30
1
your code is not working..
– Gaurav Rana
Jan 2 at 6:32
@GauravRana Please check now.
– contact dummy
Jan 2 at 21:38
The map container has fixed width of 90vh. Therefore, it takes 90% of the view port.
– mahan
Jan 3 at 8:16