CODEWITHSUNDEEP
css
Edgar Navasardyan
Edgar Navasardyan

Reputation: 4511

Popup inside a table column

I have a table row with restricted table column width. And inside one of the columns, I have a popup that should take as much space as needed to render the entire content inside it. I tried various combinations with display flex, and content no-wrap, but none of them succeeded. Any ideas?

$(".ui-popup-wrapper").find('.ui.button').popup({
  on: 'click',
  position: 'bottom left'
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Some title
      </td>
      <td>
        <div class="ui-popup-wrapper" style="position: relative">
          <div class="ui button">Show flowing popup</div>
          <div class="ui fluid popup bottom left transition hidden">
            <div class="ui three column divided center aligned grid">
              <div class="column">
                <h4 class="ui header">Basic Plan</h4>
                <p><b>2</b> projects, $10 a month</p>
                <div class="ui button">Choose</div>
              </div>
              <div class="column">
                <h4 class="ui header">Business Plan</h4>
                <p><b>5</b> projects, $20 a month</p>
                <div class="ui button">Choose</div>
              </div>
              <div class="column">
                <h4 class="ui header">Premium Plan</h4>
                <p><b>8</b> projects, $25 a month</p>
                <div class="ui button">Choose</div>
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tbody>
</table>

Upvotes: 1

Views: 518

Answers (1)

Udhay Titus
Udhay Titus

Reputation: 5869

For .popup use width:max-content. It will work.

$(".ui-popup-wrapper").find('.ui.button').popup({
  on: 'click',
  position: 'bottom left'
})
.popup{
width:max-content !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Some title
      </td>
      <td>
        <div class="ui-popup-wrapper" style="position: relative">
          <div class="ui button">Show flowing popup</div>
          <div class="ui fluid popup bottom left transition hidden">
            <div class="ui three column divided center aligned grid">
              <div class="column">
                <h4 class="ui header">Basic Plan</h4>
                <p><b>2</b> projects, $10 a month</p>
                <div class="ui button">Choose</div>
              </div>
              <div class="column">
                <h4 class="ui header">Business Plan</h4>
                <p><b>5</b> projects, $20 a month</p>
                <div class="ui button">Choose</div>
              </div>
              <div class="column">
                <h4 class="ui header">Premium Plan</h4>
                <p><b>8</b> projects, $25 a month</p>
                <div class="ui button">Choose</div>
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tbody>
</table>

Upvotes: 1

Related Questions