CODEWITHSUNDEEP
htmlcsstooltip
Alexander H
Alexander H

Reputation: 173

Absolute div being cut off

We use tooltips, to display color names on a color picker.

You can see the result here: www.printnil.com

Unfortunately the tooltips gets cut off on the left and right side.

css from the color picker

 .swatch {
  height: 80px;
  background-color: fff;
  position: relative;
  float: left;
  white-space: nowrap;
  width: 100%;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding-top: 55px;
  top: -55px;
  margin-bottom: -55px;
}

Upvotes: 2

Views: 5639

Answers (1)

mrtig
mrtig

Reputation: 2267

Giving the swatch div a position: relative, a height large enough to fit the control and tool tip, and offsets top: -45px and margin-bottom: -45px. Like so:

.swatch {
    height: 80px;
    background-color: transparent;
    position: relative;
    width: 250px;
    overflow-x: scroll;
    vertical-align: bottom;
    padding-top: 45px;
    top: -45px;
    margin-bottom: -45px;
}

should fix it.

Upvotes: 2

Related Questions