Develop Reference

React position fixed issue

So I have a component which is basically a custom button, with position: fixed, and I need it to render twice, one next to the other, but how can I achieve this if this component has position: fixed ? Basically, Is rendered twice in the same position.
Here is my code, where FloatingButton is the component with the issue above:
return (
<div className="details">
<Grid container spacing={3}>
<Grid item xs={12} md={12}>
<Header {...headerProps} />
</Grid>
<Grid container className="inner-container" justifyContent="flex-end">
<Grid item>
{floatingButtonProps ? <FloatingButton {...floatingButtonProps} /> : null}
</Grid>
<Grid item>
{floatingButtonProps ? <FloatingButton {...floatingButtonProps} /> : null}
</Grid>
</Grid>
</Grid>
</div>
);
and here is the CSS from the Button component:
min-width: 80px;
max-width: 80px;
height: 80px;
border-radius: 40px;
position: fixed;
bottom: 32px;
right: 32px;
display: inline-flex;
border-color: transparent;
color: #fff;
overflow: hidden;
cursor: pointer;
transition: max-width 0.5s;

position:fixed: An element with position: fixed is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. SO technically your code is working just fine.
Now if you want to achieve two "fixed buttons" side by side. One of the ways is:- you should make the container of the button to be position:fixed and render the button without a fixed position

You can also pass the value for right in props to FloatingButton
like,
For first button <FloatingButton right='32px'/> and for second one <FloatingButton right='132px'/>
and in the Button component, you can assign it as CSS property

Making "View" fill upp entire screen in React Native

I am working on a React-native project and stumbled upon issues when setting width and height using percentage values to a View. I have tried to set width: 100% and height: 100% but this does not work.
function CalendarPage() {
return (
<MainWrapper>
<SafeAreaView style={styles.container}>
<ScrollView>
<StyleContentWrapper>
<Paragraph> Hello World! </Paragraph>
</StyleContentWrapper>
</ScrollView>
</SafeAreaView>
</MainWrapper>
);
}
const MainWrapper = styled.View`
flex: 1;
justify-content: center;
align-items: center;
background-color: lightgray;
color: white;
`
const StyleContentWrapper = styled.View`
height: 100%; // this does not work
width: 100%; // this does not work
background-color: red;
padding-top: 40px;
padding-horizontal: 20px;
`
A quick explaination for the components:
MainWrapper covers the entire screen and is the base layer. The reason why it nests SafeAreaView is because this allows me to set a background color on the "safe area".
I have also nested another view called StyleContentWrapperinside a ScrollView, because I want everything inside to be scrollable.
This is the results
StyledContentWrapper or The red box does not cover the entire screen, despite having the styles of width: 100% and height: 100%. Why is this? Setting fixed width and height does work, but this is not the approach I want, because different devices has different widths and heights, and I want it to work for multiple screens with different widths and heights, hence the use of perecentage.
How can I solve this?

Fix header using flex now working in ipad

I have following html structure.
<div className={css.mainContainer}>
<div className={css.headerContainer}> // fixed not scrollable
//some content
</div>
<div className={css.attributeContainer}> // this needs to be fixed
<div className={css.attribute}>
//some content
</div>
<div className={css.commentsContainer}>//some content needs to be scrollable
</div>
</div>
</div>
Now, Here I am trying to make few divs scrollable and one with fixed header using flex
.mainContainer {
display: flex;
flex-direction: column;
}
.headerContainer {
height: 44px
}
.attributeContainer {
display : flex
flex-direction: column
height: calc(100vh - 44px); // Not sure should we use this or flex:1
}
.attribute {
// some font related styles
}
.commentsContainer {
display: flex;
flex: 1;
overflow: auto;
}
These are the styles which I have applied for this.So, here on Laptop it makes the header fixed but in case of IPAD it does not whole tab is scrollable. can any one one help me with this ?
using safari browser on ipad .

carousel, let horizontal scrolling end movement when parent element vertical scrolling is moved

I created a carousel similar to the one on Instagram that is working, but I realized that if I move the scroll y of the parent element before the scroll x movement of the child element ends it will not end.
gif of the example below ...
note: sorry for bad English, not my native language.
code
.container {
width: 100%;
display: flex;
flex-direction: column;
overflow-y: scroll;
.x {
margin-top: 30px;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
div {
flex: 0 0 auto;
scroll-snap-align: start;
width: 100vw;
height: 100vw;
}
.x-item1 {
background: green;
}
.x-item2 {
background: blue;
}
}
}
<Container>
<div className="x">
<div className="x-item1" />
<div className="x-item2" />
</div>
... other divs
</Container>
--->> Example Gif !! <<---

I found a solution that, in my opinion, meets my proposal without losing the performance of the functionality ...
I just thought that there could be a delay in scrollIntoView, like "behavior: smooth" ...
https://developer.mozilla.org/pt-BR/docs/Web/API/Element/scrollIntoView
but it didn't work if someone wants to add an improvement, thanks.
in the container I put an "onTouchStart"
<Container className="works" onTouchStart={() => handleCarousel()} >
<div className="x">
<div className="x-item1" />
<div className="x-item2" />
</div>
... other divs
</Container>
function handleCarousel...
const handleCarousel = () => {
const works = Array.from(document.querySelectorAll('.work-content'));
const carousels = Array.from(document.querySelectorAll('.work-carousel'));
carousels.forEach(carousel => {
if (carousel.scrollLeft % window.innerWidth !== 0) {
const item = document.querySelector(
`.work-content:nth-child(${
works.indexOf(carousel.parentElement) + 1
}) > div.work-carousel > img.work-carousel-item-active`,
); // in another function I already control which image is being viewed and add this class
const scroll = document.querySelector('.works').scrollTop; // optional: get vertical scroll value
item.scrollIntoView(); // horizontal scrolling gains focus
document.querySelector('.works').scrollTop = scroll; // optional: returns vertical scroll value
}
});
};

I believe this is the expected behavior; scrolling in one direction interrupts scrolling in the other, even scrolling that's declared manditory by Scroll Snap CSS attributes.
If you dislike this behavior, you might use a JS-based animation that programmatically scrolls the container horizontally, since this won't be affected by vertical scrolling.
Sorry I can't help more.

Stacked divs resizing each other

This is probably going to be a long one:
I'm trying to make a chat application (similar to Slack) with Electron, React and Socket.io. My issue is mostly dealing with React and CSS/Sass though. Right now I've got a few bootstrap, but I'm not really using the grid system at all, so that can/may be scrapped.
The structure of the page is as follows: I've got a footer with a resizable textarea. above it I've got a div that will be holding messages. That div has overflow-y set to scroll, that way the scrollbar is only for the messages and doesn't take the entire page's space. I want the div to get shorter as the footer grows with the textarea. Right now though the div just extends under the footer (and the scrollbar along with it). Since the messages fill the div there's nothing to scroll and no thumb (I think that's the correct term) in the scrollbar.
React component (I've only included one li for the sake of brevity, but in my code I've got bunch):
import React from 'react';
import { Button, Image, Media, Panel } from 'react-bootstrap';
export default class Page extends React.Component {
constructor(props) {
super(props);
this.state = props;
}
footerResize() {
// code to resize messages div, or at least get some information about
// the footer's height
}
render() {
return (
<div className="page">
<div className="sidebar">
</div>
<div className="container-fluid">
<div classname="messages">
<ul>
<li className="message>
<Media>
<Media.Left>
<Image src="#" />
</Media.Left>
<Media.Body>
<Media.Heading>
Name
</Media.Heading>
Message content
</Media.Body>
</Media>
<li>
</ul>
</div>
<footer>
<textarea defaultValue="test text" />
</footer>
</div>
</div>
);
}
}
_page.scss (most of this is from the file name _page.scss but a few properties are pulled in from other files here so I'm only typing one file's contents):
$dark-grey: #383838;
$default-font-color: #FFFFFF;
$light-grey: #474747;
$light-light-grey: #908E8F
$sidebar-width: 250px;
body {
color: $default-font-color;
overflow: hidden;
}
ul {
list-style: none;
}
.page {
background-color: $light-grey;
height: 100vh;
.sidebar {
background-color: $light-light-grey;
position: fixed;
height: 100%;
width: $sidebar-width;
.container-fluid {
margin-left: $sidebar-width;
padding-left: 0px;
padding-right: 0px;
.messages {
overflow-y: scroll;
}
footer {
background-color: $main-green;
bottom: 0;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
position: fixed;
width: calc(100% - #{$sidebar-width});
}
}
}
}
I've tried a bunch of different things to get this to work. I've tried a few node modules. I've tried adding event listeners both by adding ref='footer' to the footer and referring to it as this.refs.footer in when adding the event listener and by giving footer and id and using document.getElementById('footer'). The whatever I try I can't get any information about the footer's size in the footerResize. Any help on this would be appreciated. I don't even know if this is something I should be doing with sass properties or whether I need js/React to do this.

You can try out a flexbox based layout.
This for .container-fluid
display: flex;
flex-direction: column;
This for .messages
flex: 1;
Then you remove position: fixed from footer
What this does: it sets the height of .messages to fill its parent's remaining space. So when footer gets bigger, there is less remaining space and .messages will shrink.
Please note that you will need to add vendor prefixes for flexbox depending on your targeted browser support.