Semantic UI css messing with min-width property. How do I fix?

Question

I am trying to use the css min-width property for a div wrapper, however, using Semantic UI seems to hide the horizontal scrollbar.

By removing the link tag in the CodePen below reveals the problem with Semantic UI.

CodePen

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css"/>
<div id="wrapper"></div>


#wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #ff0000;
  min-width: 2500px;
  min-height: 1000px;
}

Any idea on how I can fix this problem while still using Semantic UI?

It seems Semantic has the body css property overflow-x: hidden; — Rich76
– Rich76, Commented Mar 4, 2016 at 23:17

phts · Accepted Answer · 2016-03-04 23:18:36Z

1

In your concrete case semantics adds overflow-x: hidden to <body>.

Just add CSS:

body {
  overflow-x: scroll !important;
}

http://codepen.io/anon/pen/MyaQXM

answered Mar 4, 2016 at 23:18

phts

3,9251 gold badge22 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

Semantic UI css messing with min-width property. How do I fix?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related