asked on

Bootstrap 4, stuck within card

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="card journeyCard" data-id="ace6791c-6748-11e9-86aa-0a002c2a7a8a" style="animation-delay: 0.15000000000000002s;">
<div class="card-image">
<a href="j" class="img-fluid"><img src="" onerror="this.onerror = '';this.src='/client-area/images/noimage.png';" class="img-fluid"></a>
<span class="badge badge-light">Draft</span><br>
</div>
<div class="card-content">
<h4 class="text-truncate">
<a href=".php?id="><b>Campaign One</b></a>
</h4>
<div>Vanity URl: <strong>www.etgttgtg.com</strong></div>
<div>Created By: <strong>Admin</strong></div>
<div>Updated: <strong>2 hours ago</strong></div>
</div>
<div class="card-actions">
<div class="btn-group dropright show">
    <button type="button" class="btn btn-main dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <i class="fa fa-ellipsis-v"></i>
    </button>
  <div class="dropdown-menu show" x-placement="right-start" style="position: absolute;transform: translate3d(40px, -10px, 0px);top: 0px;left: 0px;will-change: transform;/* overflow: visible !important; */">
        <a class="dropdown-item" target="_blank" onclick="editJourney('ace6791c-6748-11e9-86aa-0a002c2a7a8a')"><i class="fa fa-edit"></i> Edit</a>
        <a class="dropdown-item" target="_blank" onclick="archiveJourney('ace6791c-6748-11e9-86aa-0a002c2a7a8a')"><i class="fa fa-archive"></i> Archive</a>
        <a class="dropdown-item" target="_blank" onclick="duplicateJourney('ace6791c-6748-11e9-86aa-0a002c2a7a8a')"><i class="fa fa-clone"></i> Duplicate</a>
        <a class="dropdown-item text-danger" target="_blank" onclick="deleteJourney('ace6791c-6748-11e9-86aa-0a002c2a7a8a')"><i class="fa fa-trash"></i> Delete</a>
  </div>
</div>
</div>
</div>
</div>

Open in new window

im using bootstrap 4, can anyone tell me why the dropdown is within the card ?

lenamtl

Hi,

I'm not sure what you are trying to do but you have place the dropdown inside de card-action div

card-action and card-content are a custom code not a part of Bootstrap syntax

here is an example of card syntax

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Open in new window

Check the documentation page
https://getbootstrap.com/docs/4.0/components/card/

You can create a JS fiddle with your custom code and CSS...

Julian Hansen

im using bootstrap 4, can anyone tell me why the dropdown is within the card ?

Is or isn't

What is the effect you want?

The dropdown list is outside the card because it is too long to fit in. Unless you want it positioned at the bottom of the card?

You can make the menu drop up by adding the dropup class to the btn-group - see here for more info https://getbootstrap.com/docs/4.3/components/dropdowns/#dropup

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.