Material UI Grid container should not be 100%
I have a full-width google map with a Grid container and items on top of the map (like google maps search box. The Grid container spans 100% of the with of the screen, and it makes sense; but this prevents you from zooming in and out of the map when the mouse cursor is on top the Grid container.
Any idea how I should resolve this? I am using the grid because I need the responsive layouts based on screen sizes.
The picture shows the search box o top of the map. I can't zoom or scroll to the right of this search box.
reactjs material-ui
asked Nov 14 '18 at 9:09
HarryHarry
4,9071980142
add a comment |
I have a full-width google map with a Grid container and items on top of the map (like google maps search box. The Grid container spans 100% of the with of the screen, and it makes sense; but this prevents you from zooming in and out of the map when the mouse cursor is on top the Grid container.
Any idea how I should resolve this? I am using the grid because I need the responsive layouts based on screen sizes.
The picture shows the search box o top of the map. I can't zoom or scroll to the right of this search box.
reactjs material-ui
asked Nov 14 '18 at 9:09
HarryHarry
4,9071980142
add a comment |
I have a full-width google map with a Grid container and items on top of the map (like google maps search box. The Grid container spans 100% of the with of the screen, and it makes sense; but this prevents you from zooming in and out of the map when the mouse cursor is on top the Grid container.
Any idea how I should resolve this? I am using the grid because I need the responsive layouts based on screen sizes.
The picture shows the search box o top of the map. I can't zoom or scroll to the right of this search box.
reactjs material-ui
asked Nov 14 '18 at 9:09
HarryHarry
4,9071980142
I have a full-width google map with a Grid container and items on top of the map (like google maps search box. The Grid container spans 100% of the with of the screen, and it makes sense; but this prevents you from zooming in and out of the map when the mouse cursor is on top the Grid container.
Any idea how I should resolve this? I am using the grid because I need the responsive layouts based on screen sizes.
The picture shows the search box o top of the map. I can't zoom or scroll to the right of this search box.
reactjs material-ui
reactjs material-ui
asked Nov 14 '18 at 9:09
HarryHarry
4,9071980142
asked Nov 14 '18 at 9:09
HarryHarry
4,9071980142
edited Nov 14 '18 at 9:16
Harry
asked Nov 14 '18 at 9:09
HarryHarry
4,9071980142
asked Nov 14 '18 at 9:09
HarryHarry
4,9071980142
asked Nov 14 '18 at 9:09
HarryHarry
4,9071980142
4,9071980142
add a comment |
add a comment |
0
active
oldest
votes
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
});
}
});
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%2f53296488%2fmaterial-ui-grid-container-should-not-be-100%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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%2f53296488%2fmaterial-ui-grid-container-should-not-be-100%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
