How to ignore/overwrite overflow:hidden of parent div without access to its css

Question

I'm having a issue.

I'm working on a widget to display some elements on someone's page. I have created a fiddle, please see:

.wrapper {
  width: 300px;
  display: block;
  position: relative;
  overflow: hidden;
  background-color: gray;
}
.widget {
  width: 300px;
  height: 300px;
  display: block;
  position: relative;
  background-color: green;
}
.box {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 250px;
  top: 50px;
  background-color: red;
  visibility: visible;
}

<div class="wrapper">
  <p>Some text and descriptions</p>
  <div class="widget">
    <div class="box"></div>
  </div>
  <p>Some more text and description and some more offcourse and a bit more, and just a tiny bit more</p>
</div>

We have absolute positioning on some elements inside of the widget but the outer parents on the users pages has overflow:hidden; on it so some elements get partly hidden.

Is there anyway to make this work? Without messing up the parents element text. So on the fiddle you see the red box, we want that one to be fully displayed.

But we can't change any of the wrapper properties! Fun little game ;)

Fixed position on the box is not usefull since it causes problems.

https://jsfiddle.net/9484wtna/7/

Similar question here: [http://stackoverflow.com/questions/10584020/overriding-overflow-hidden](http://stackoverflow.com/questions/10584020/overriding-overflow-hidden) — ANVerona, Jul 24 '15 at 08:41
@Pete 17 No, we want our elements to be shown but we can not touch any property of the parent element (the wrapper).. you have to see it as a widget embed function. — Adriaan, Jul 25 '15 at 03:14
Could you run some JavaScript to update the overflow property of `.wrapper`? — Jamie Barker, Jul 27 '15 at 08:13
No, because we never know what will be the class of that wrapper.. since it will be embedded into someones website. — Adriaan, Jul 28 '15 at 03:39

score 0 · Answer 1 · answered Jul 24 '15 at 09:29

0

Using jQuery, you could create the element outside of the widgets container.

$(".widget").parent().after('<div class="box"></div>');

...but the position will then need to be adjusted to align properly.

See fiddle https://jsfiddle.net/c01gat3/p050togb/

answered Jul 24 '15 at 09:29

c01gat3

597
3
18

I have though about that but we can't do that because we never know how many parent elements the site has who embeds the widget. – Adriaan Jul 25 '15 at 03:13

maioman · Answer 2 · 2015-07-24T08:33:31.140

-1

adding position: fixed on a box-wrapper element should work

fiddle

.wrapper {
    width:300px;
    display:block;
    position:relative;
    overflow:hidden;
    background-color:gray;
}
.widget {
    width:300px;
    height:300px;
    display:block;
    //position: relative;
    background-color:green;
}
.box-wrap{
    display:block;
    position: fixed;
}
.box {
    width:100px;
    height:100px;
    position:absolute;
    left:250px;
    top:50px;
    background-color:red;
    visibility:visible;
}

edited Jul 24 '15 at 08:33

answered Jul 24 '15 at 08:27

maioman

18,154
4
36
42

@JamieBarker not true. the absolutely positioned child `.box` gets positioned according to it's property's; `fixed` is working just as a wrapper to take it out of flow – maioman Jul 24 '15 at 09:26
Exactly, we can't use fixed position because it takes it out of the flow. – Adriaan Jul 25 '15 at 03:16

How to ignore/overwrite overflow:hidden of parent div without access to its css

2 Answers2