I'm using vertical full screen Swiper and ran into a problem. Due to content overflow for slide, I set flex-wrap: wrap and overflow: scroll so that this content can be viewed. But when I try to scroll the contents of the slide, the swipe scroll to the next one works at the same time. How to disable switching to the next slide until the previous one has scrolled completely?
MainSlider.js
<Swiper
className={styles.swiper}
direction={"vertical"}
slidesPerView={"auto"}
spaceBetween={0}
mousewheel={true}
speed={700}
touchReleaseOnEdges={true}
threshold={20}
pagination={{
clickable: true,
}}
>
<SwiperSlide className={styles.slide}>
<SectionOne/>
</SwiperSlide>
<SwiperSlide className={styles.slide}>
<AnswersTwo/>
</SwiperSlide>
</Swiper>
MainSlider.module.scss
.swiper {
width: 100%;
height: 100vh;
}
.slide {
min-height: 100vh;
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
overflow: hidden;
#media only screen and (max-width: 1023px) {
flex-wrap: wrap;
overflow: scroll;
}
Added a link to a similar example.
https://codesandbox.io/s/swiper-mousewheel-control-react-forked-c97l1q
Please note that if you display the code in full screen and then turn on the mobile version, the mouse wheel will work, but scrolling inside the container will also work, but with swipe you will not be able to flip the slide until you reload the page. After that, swipe will work, but there will be a problem that I wrote about at the very beginning. The woman needs to solve them both
Related
I have to display some item card. Each card has min-width property. When my screen size change, card size also changed. Because of that, I am facing a problem. That is, the last item/items takes whole area. Is it possible to keep a minimum width for each card, though it is last item or not? Please help.
Problem:
Attempt:
Please find in codesandbox: https://codesandbox.io/s/multiple-items-arrange-926fx
It sounds like you also want to specify a max-width for your cards.
In your example it could simply be:
const Container = styled.div`
flex: 1;
margin: 5px;
max-width: 300px;
min-width: 280px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5fbfd;
position: relative;
&:hover ${Info} {
opacity: 1;
}
`;
You can of course also leave max-width: 280px if you don't wish to change the width of the elements at all.
Additionally you can add justify-content: flex-start to the container to make it look less weird on resizes. In your example:
const Container = styled.div`
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
`;
I need to create a sort of overlay to display forms that need more space in the mobile version of my webapp.
I'm trying to use ngx-bootstrap modal for that but even after using the means they offer to customize this component, I still cannot get the result I want.
This is how I applied a custom class for the modal:
ngx-bootstrap.component.ts
goToReportOne() {
// ...
this.bsModalRef.setClass('full-screen-modal');
// ...
}
The problem is more obvious when I rotate the device (landscape mode). To make the issue clearer I assigned a different color to each section.
The blue one(the custom style applied to the modal) can be found in
styles.css
.full-screen-modal {
height: 100vh !important;
width: 100vw !important;
position: fixed;
top: 0;
left: 0;
margin: 0;
background-color: blue;
}
The other two colors, green and orange are applied to the component I display in the modal and host container respectively
modal-one.component.scss
:host {
width: 90vw;
height: 90vh;
background-color: orangered;
}
.report-one {
background-color: green;
width: 20rem;
height: 20rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
I know I can easily set the width and height to 100 in the :host selector but I want to know:
1) Why doesn't the modal (in blue) occupy whole screen
2) Why is it that for the orange section applying 100% for its height and width doesn't work. Only 100vh and 100vw would make it occupy the entire screen
Here's a demo in stackblitz
Thanks
So I have a bottom div which needs to be fixed in all screen size, and the remaining upper contents just get scrolled when the screen size gets sufficiently small.
.mainContainer {
display: flex;
flex-direction: column;
overflow-y: scroll;
text-align: center;
position: fixed;
top: 0;
bottom: 70px;
width: 100%;
}
.fixedBottom {
display: flex;
flex-direction: row;
padding: 10px 10px;
justify-content: space-around;
bottom: 0;
position: fixed;
width: 100%;
}
I've put bottom: 70px for the meantime to see lowers contents, when otherwise 0 the page wouldn't be able to scroll through the whole page as the bottom div is fixed hence hindering it. Well, this setup actually works on well on chrome, moz and opera but not on safari, my bottom div is whitened lol but the element is there.
Update: (temporary solution) since bottom div is fixed and it's going to be in the bottom of the page no matter what, put fixedBottom outside mainContainer. mainContainer becomes a sibling element to fixedBottom and wrap these elements into a div. However, I would still prefer mainContainer becoming a parent element.
I'm using chrome both on my laptop and on my iphone.
I created a simple example that demonstrates the problem: https://s3.us-east-2.amazonaws.com/asteroid-public/test/test.html
Try viewing that page on your desktop/laptop. The messages render correctly, not overlapping each other. Even when you use the DevTools to view the page as if you are viewing on a mobile device, it still works fine on the laptop. Now, try viewing it on your chrome app on your mobile phone. The messages all overlap each other and so it is hard to read.
Here are some screenshots showing the difference:
Why is this happening and how do I fix it on mobile?
It looks like your .chat .message css properties are causing this. I understand what you tried to do by doing this:
.chat .message {
margin: 4px 16px;
white-space: nowrap;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
However what is causing your problem seems to be the display property. I hope that helps.
.chat .message {
margin: 4px 16px;
white-space: nowrap;
//display: flex;
//flex-direction: row;
align-items: center;
position: relative;
}
I suggest making all div class="message" include a div class="inner". In this way, you can have your div class="inner" at a width: 80%; and display: block;, and your messages have width: 100%; and height: auto;. You can set alignment rules on div class="message" by using .message[origin-me] and .message[origin-them] to set where the div class="inner" aligns. I hope this helps!
I have a problem combining div boxes and the overflow: auto property for adding scrollbars if needed.
The problem is that I don't want the whole page to be scrollable, but just the content div, thus I added overflow: hidden to the body and overflow: auto to the content.
body
{
padding: 0;
margin: 0;
background-color: navy;
overflow: hidden; /** no scrollbar on whole page **/
height: 100%;
}
#content
{
background-color: green;
overflow: auto;
height: 100%;
}
Nevertheless, I'm not able to see the end of the page, as the div increases its size beyond the viewable part of the website.
Please suggest how to solve this problem and only keep the content div scrollable.
I uploaded an example of my problem here: jsfiddle.net/3n7ay/
I can only get this to work with a fixed header height, is there no solution for dynamic header size? It's hard for me to believe...
Thanks & Regards
I think you looking for overflow-y: scroll; instead?
See fiddle: http://jsfiddle.net/3n7ay/5/
If you set height: 100% to the content element and you have also an header in your viewport this will make the former not entirely visible inside the viewport itself.
So the height must be defined as 100% - <header height>, either via javascript (if you need to support older browser) or via CSS3 calc() function, e.g.
#content {
height: -webkit-calc(100% - <height of header>px);
height: -moz-calc(100% - <height of header>px);
height: calc(100% - <height of header>px);
}
Try flex box, if you don't concern about Ie8 and Ie9. You can see the compatibility situation in caniuse.com: flexbox
Make container a flex box:
#container {
background-color: yellow;
height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
Flex the content:
#content {
background-color: green;
overflow: auto;
height: 100%;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
See fiddle: http://jsfiddle.net/r4JUk/4/