1

I created a custom tag called <bubble></bubble> and its styles can be applied using the custom type attribute.

Code:

bubble[type=normal] {
  border-radius: 10px;
  background-color: #5e9bff;
  text-align: center;
  color: white;
  padding: 6px;
  width: 50px;
}
<bubble type="normal">Hello!</bubble>

The problem comes in positioning the element when placed with the div tags. First of all, the width: 50px; gets ignored unless I use Position: Absolute; which has another problem I'll describe below. Second, It partially overlays the text when <div></div> tags are used even after applying the margins on Top and Bottom.

Code with Absolute Positioning:

bubble[type=absoluteposition] {
  position: absolute;
  border-radius: 10px;
  background-color: #5e9bff;
  text-align: center;
  color: white;
  padding: 6px;
  width: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
}
<bubble type="absoluteposition">Hello!</bubble>

The problem here is position: absolute; acts like float: left; which I don't want to use even after using margins on top and bottom. This problem also occurs with div tags.

Demo in JSFiddle.net

If you have a solution OR You think there is a problem in my code OR You think there is an Alternative way to fix this problem OR You need more details on my Question, please Reply.

henry
  • 4,244
  • 2
  • 26
  • 37
Shahroz Asif
  • 143
  • 1
  • 10
  • Add rule display: inline-block – Supersharp Oct 01 '16 at 18:04
  • Would work with code without Absolute Position but won't work with code with Absolute Positioning. – Shahroz Asif Oct 01 '16 at 18:06
  • In terms of the first problem -- *why `width: 50px` is being ignored* -- that's because *all* elements (including custom elements) have an initial setting of `display: inline` ([**details**](http://stackoverflow.com/a/36380684/3597276)). And `width` doesn't apply to `inline` elements ([**details**](http://stackoverflow.com/a/39578948/3597276)). Set `bubble` to `display: block` or `inline-block`. – Michael Benjamin Oct 01 '16 at 18:13
  • Thanks but `display: inline-block;` won't work with `position: absolute;`. – Shahroz Asif Oct 02 '16 at 09:56

1 Answers1

2

if you want to specify , height , width on above when using absolute than you may try wrap bubble tag in another div with relative position like :

<div class="some" style="
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
">
<bubble type="absoluteposition">Hello!</bubble>
</div>

Cheers !

Den Pat
  • 1,118
  • 10
  • 17