CODEWITHSUNDEEP
javascriptreact-native
kalculated
kalculated

Reputation: 319

How to implement sticky footer?

I want to replace this comment bar with a footer comment bar:

enter image description here

With something like this:

enter image description here

The problem with the above implementations, is when the text input is clicked on by a user, the keyboard covers the input since the positioning was absolute. Here is how I implemented the above footer comment bar:

 <View>
        <FlatList
            data={this.state.commentsArray}
            renderItem={renderItem}
            keyExtractor={item => item.key}
            ListHeaderComponent={this.renderListHeader}
            contentContainerStyle={{ paddingBottom: 80 }}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
            onRefresh={this._refresh}
            refreshing={this.state.isLoading}
            // ListFooterComponent={this.renderCommentComponent}
        />
        
        <View style={styles.commentFooter}> <--------------------- Footer View
            <CommentComponent postID = {this.state.postID}/> <---- Comment Component
        </View>
    </View>

With this styling:

commentFooter: {
    position: 'absolute', 
    left: 0, 
    right: 0, 
    bottom: 0,
    backgroundColor:'#FFFFFF',
    height:80,
    alignItems:'center',
    padding: 10
},

but like I said, the position is absolute so the keyboard that pops up covers the input.

Here is what I want it to look like, when the text input in the footer is clicked:

enter image description here

I suppose this can be called a "sticky" footer. How can I implement such functionality in my app?

Upvotes: 0

Views: 456

Answers (1)

GBra 4.669
GBra 4.669

Reputation: 1679

Are you sure you are looking for a sticky footer?

A sticky footer is when the footer of your page "sticks" to the bottom of the viewport (of the screen) in cases where the content is shorter than the viewport height. If you have enough content, the footer will be not visible until you scroll to the bottom.

If that is the behavior you want, There are multiple to achieve this.

This is a great example of a good layout: https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html (it's even recommended in the sticky footer guide in MDN)

The technique is: set the wrapper (or the body) with a min-height of 100% (or 100vh), use display grid and set an explicit grid as follows:

.wrapper {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

If instead, you want a footer that is always shown on the bottom of the page, you might want to have a fixed footer.

Fixed Footer Example:

A simple example:

.footer {
  width: 100%;
  color: #fff;
  background-color: #000;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 20px;
  font-weight: bold;
}
<div class="footer">
  I am a fixed footer - always shown!
</div>

If you set your layout in the correct way, you shouldn't have problems with the keyboard of mobiles.

Upvotes: 1

Related Questions