CODEWITHSUNDEEP
cssreactjsantd
Sahan Randika
Sahan Randika

Reputation: 47

cannot scroll to the end of left edge in horizontal scroll - css

I added a horizontal scroll in React, using the css, I want to display list of cards horizontally, But I can't scroll to the left edge completely. I have attached a SS below in that I have marked the problem in red.The marked card is the first card of the list, but it isn't display properly.I used ant design to create the cards.

enter image description here

Here is my js code and the css code for that part.

<div className={styles.subjectArea}>
 <Card
    hoverable
    style={{ width: '219px', height: '248px', margin: 10, borderRadius: '10px', textAlign: 'center', fontWeight: 'bold' }}
    cover={<img alt="example" src="https://i.pinimg.com/originals/bc/4f/e5/bc4fe5e81c387c9c1c0144caf0299ba9.jpg" style={{ objectFit: 'cover', height: '180px', borderRadius: '10px 10px 0px 0px' }} />}
    >
     <Meta title="Science" style={{ fontWeight: '900', margin: '-10px 0px -100px 0px' }} />
    </Card>
    //There are many cards, but i have removed in here for simplicity
</div>
.subjectArea {
    padding: 20px;
    min-width: 100%;
    min-height:  300px;
    background: #FFFFFF;
    border: 1px solid rgba(133, 77, 206, 0.25);
    box-sizing: border-box;
    border-radius: 8px;   
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: auto;
    overflow-y: hidden;     
    margin-top: 20px;
}

Is there any proper way to show this first card completely when scrolled to left?

Upvotes: 0

Views: 1407

Answers (1)

Bhavik
Bhavik

Reputation: 228

Try this code i hope it will work for you

 <div class="subjectArea ">
  <div class="box-contain">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

.subjectArea {
    padding: 20px;
    max-width: 700px;
    width : 100%;
    display : flex;
    min-height:  300px;
    background: #FFFFFF;
    border: 1px solid rgba(133, 77, 206, 0.25);
    box-sizing: border-box;
    border-radius: 8px; 
    align-items: center; 
    margin-top: 20px;
    overflow-x : scroll;
}

.box{
  width : 200px ;
  height : 280px;
  margin : 0px 20px;
  background : #000;
}
.box-contain{
  display : flex;
}

Upvotes: 3

Related Questions