CODEWITHSUNDEEP
cssreactjsstyled-components
Shuib Abdillahi
Shuib Abdillahi

Reputation: 95

Making span element move to new line in CSS, styled component

I have got these spans that are only rendered if theres 6 of them. I have a button that renders the rest but it exceeds the div. I want it to show the remaining on a new line, how would I do this?

enter image description here

const Flvs = styled.div`

position: relative;
bottom: 4rem;

span{
  white-space: nowrap;
  display: inline-block;
     cursor:pointer; 
   margin: 3px; 
   padding: 5px;
    font-size: 12px;
     border-radius: 5px;
     position: relative;
     left: 0.2rem;
   
    }
span:not(.active){background-color: silver;}
span.active{background-color: green;}

`
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 1

Views: 1370

Answers (2)

HijenHEK
HijenHEK

Reputation: 1296

same as the first answer , but what its missing is a width , a min width or a basis value for the span ,

try and add min-width and flex-wrap : wrap

exapmle :

container {

  display :flex
  flex-wrap: wrap;
}

span{
  min-width : 200px ;
    

...

Upvotes: 1

Shreyas Kaundinya
Shreyas Kaundinya

Reputation: 51

Just added a display flex with a wrap. Could you try this? Maybe you could insert an image of how it looks.. might help clearing up your question.

const Flvs = styled.div`

position: relative;
bottom: 4rem;
display: flex;
flex-wrap: wrap;

span{
  white-space: nowrap;
  display: inline-block;
     cursor:pointer; 
   margin: 3px; 
   padding: 5px;
    font-size: 12px;
     border-radius: 5px;
     position: relative;
     left: 0.2rem;
   
    }
span:not(.active){background-color: silver;}
span.active{background-color: green;}

`
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 0

Related Questions