CODEWITHSUNDEEP
htmlcss
mp3por
mp3por

Reputation: 1852

Custom widget to display value and information

I am trying to implement a widget that does looks like this: widget

The idea is that I have a value and it has some additional information. The problem is that this widget has to autosize to the width of the value, but not the width of the additional information. Additional information part is allowed to fill as much space as it wants downwards and wrap the content.

So far I have this however the problem with this one is that the additional info part does not count to the widget's height thus if it is longer it overflows on top of the thing underneath it or does not expand the containing div.

Please help

Upvotes: 3

Views: 194

Answers (3)

Gurtej Singh
Gurtej Singh

Reputation: 3234

After considerable searching, I think the problem is with the position:absolute, and so far the recommendations I've read is to handle it via JS. I am not sure if that's acceptable to you, but I've been able to solve it here:

https://jsfiddle.net/anut12tp/5/

Basically, I've set the inner span as absolute, but on load I call the JS to set it's max width equal to it's parent and then change it's display to inline-block and position to relative.

Please have a look and let me know if this works for you. Thanks.

Upvotes: 1

skm
skm

Reputation: 1212

Here is a modified version of what you shared in your post.

You may try this:

.container {
  display: block;
  position: relative;
  background: aliceblue;
  width: 200px;
}
.maxim {
   position: relative;
   width: 100%;
   max-width: 100%;
   background-color: lime;
}
<div class="container">
    <header>
        <strong>12345620</strong>
        <span>description</span>   
    </header>
    <span class="maxim">
        Lorem ipsum  Lorem ipsum
    </span>    
</div>    

<div class="container">
    <header>
        <strong>1234567890</strong>
        <span>more text is here</span>   
    </header>
    <span class="maxim">
        Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  oposum
        Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  oposum
        Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  oposum
    </span>    
</div>

Upvotes: 0

Theodore K.
Theodore K.

Reputation: 5176

Do you mean like this? display: inline-block; and position:absolute; on the parent and position:absolute; on the info element seems to do the trick.

#wrapper{  
  display: inline-block;
  height:100%;
  position:relative;
}
#header, #info{
  border:black 2px solid;
}
#info{
  position:absolute;
}
<div id="wrapper">
  <div id="header">Value xyz</div>
  <div id="info">Info Info Info Info Info</div>
 </div>

Upvotes: 1

Related Questions