Grid Columns data overlapping in semantic-ui-react?

Question

example.js

I wasn't expecting column1 data to start overlapping into column2's instead of going down as it is now exceeding the grid column width.

What is the solution for this?

flppv · Accepted Answer · 2019-03-18 06:35:39Z

2

Columns are not overlapping. It's your <p> element takes more space than columns.

Add this style to it:

word-break: break-word;

Before word-break:

After word-break:

answered Mar 18, 2019 at 6:35

flppv

4,2995 gold badges40 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shad Over a year ago

But if I had used simple css grids. This wouldn't be happening, right?!

flppv Over a year ago

@Shad that would happen in any scenario. You used long word, if you don’t want it to go over it’s parent break the word or use overflow: hidden. As you saw on my screenshots your grid was always good

Collectives™ on Stack Overflow

Grid Columns data overlapping in semantic-ui-react?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related