CODEWITHSUNDEEP
htmlcss
Magic due to Logic
Magic due to Logic

Reputation: 121

Card Layout not setting correct in HTML

I am trying to create a Donation card for my site with the help of this. I am Almost done with code changes but unable to set the layout, it's not showing properly. All contents are overlapping. I tried to set a margin but that is not working.

 $(function () {

  // Whitelist buttons in popovers
  var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList
  myDefaultWhiteList.button = [];

  // Customizer popover
  var $tip = $('.btn-donate').popover({
    trigger: 'manual', // We don't want popover to launch when we don't need it :)
    html: true,
    offset: '-100px, 0',
    container: 'body',
    content: function () {
      return '<p>' + $(this).data('description') + '</p><button class="btn btn-sm btn-dismiss white-text z-depth-0 pr-0">Got it</button>';
    },
    template: '<div class="popover popover-blue" role="tooltip"><div class="arrow"></div><div class="popover-body"></div></div>'
  });

  // Manually show popover
  $tip.popover('show');

  // Handle popover dismiss
  $('.btn-dismiss').on('click', function () {
    $tip.popover('hide');
  });
});
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
  background: #F0F0F0;
}

        :root {
  --yt-blue: #ea5b18; /* This is a custom color used by YouTube */
}

/* Custom card header */
.card-header {
  display: flex;
  position: relative;
  justify-content: space-between;
  padding-left: 16px !important;
  align-items: center;
  height: 48px;
  overflow: hidden;
}

.donate-icon {
  display: flex;
  align-self: stretch;
  align-items: center;
  position: relative;
  padding-right: 1.2rem;
  float: right;
  background: #ea5b18;
}

.donate-icon:before {
  content: "";
  position: absolute;
  display: block;
  width: 48px;
  height: 48px;
  transform: rotate(45deg) translate(-50%,50%);
  background: #ea5b18;
}

.donate-icon i {
  color: #187415;
  background: #fff;
  padding: 8px;
  z-index: 1;
  border-radius: 50%;
}

.avatar {
  max-width: 50px;
}

.fundraiser {
  display: flex;
  align-items: flex-start;
}

.fundraiser .name {
  font-size: 1rem;
}

.fundraiser .creator {
  font-size: 1rem;
}

.fundraiser .details {
  flex: 1;
}

/* Ugly workaroung - sorry :( */
.btn-donate, .btn-donate:hover, .btn-donate:active, .btn-donate:focus {
  background: var(--yt-blue);
  position: relative;
  color: #fff;
}

.sum {
  text-align: center;
  font-weight: 500;
}

.card-footer a {
  font-size: .785rem;
  font-weight: 500;
}

/* Popover styles */
.popover-blue {
  background: var(--yt-blue);
  border-radius: 1;
}

.popover-blue .arrow:after {
  border-bottom-color: var(--yt-blue) !important;
}

.popover-blue .popover-body {
  color: #fff;
  font-size: 1rem;
}

.btn-dismiss {
  float: right;
  box-shadow: none;
}
<div class="card mt-4 mx-auto" style="max-width: 25rem;">
  <div class="card-header p-0">
    <span class="d-inline-block card-title mb-0">Donate now</span>
    <span class="donate-icon">
      <i class="fas fa-hand-holding-heart"></i>
    </span>
  </div>
  <div class="card-body">
    <div class="fundraiser">
      <img src="https://t3.ftcdn.net/jpg/04/06/35/70/360_F_406357077_MWIAoFRKa7qmoLhr44pTraEzmF5rTFhf.jpg" class="avatar" />
      <div class="details px-2">
        <h3 class="name mb-0"><strong>Magic Logic</strong></h3>
        <span class="creator text-muted">paypal.me/MagicLogic</span>
      </div><a href="https://www.paypal.com/paypalme/MagicLogic" title="Donate">
      <button class="btn btn-md btn-donate z-depth-0" data-toggle="popover" data-placement="bottom" 
  data-description="You can buy me a cup of Coffee or something via PayPal.">Donate</button></a>
</div>

Trying to create something like this:

enter image description here

Upvotes: 1

Views: 265

Answers (1)

Tanner Dolby
Tanner Dolby

Reputation: 4421

You almost had it. Just needed to update the layout details in your Flexbox containers. This should get you going in the right direction. I will leave it up to you to figure out where you went wrong with displaying the circular hand with heart icon in the top right corner.

Secondly, you didn't provide the <script> tag to include jQuery in your project or a <link> to Bootstrap. Which the page you provided here uses to create the tooltip. After adding the jQuery <script>'s right before the closing <body> tag and including the Bootstrap <link> in the <head>, the tooltip displays correctly.

$(function () {

  // Whitelist buttons in popovers
  var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList
  myDefaultWhiteList.button = [];

  // Customizer popover
  var $tip = $('.btn-donate').popover({
    trigger: 'manual', // We don't want popover to launch when we don't need it :)
    html: true,
    offset: '-100px, 0',
    container: 'body',
    content: function () {
      return '<p>' + $(this).data('description') + '<button class="btn btn-sm btn-dismiss white-text z-depth-0 pr-0">Got it</button></p>';
    },
    template: '<div class="popover popover-blue" role="tooltip"><div class="arrow"></div><div class="popover-body"></div></div>'
  });

  // Manually show popover
  $tip.popover('show');

  // Handle popover dismiss
  $('.btn-dismiss').on('click', function () {
    $tip.popover('hide');
  });
});
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
  background: #F0F0F0;
}

:root {
  --yt-blue: #ea5b18; /* This is a custom color used by YouTube */
}

/* Custom card header */
.card-header {
  display: flex;
  position: relative;
  justify-content: space-between;
  padding-left: 16px !important;
  align-items: center;
  height: 48px;
  overflow: hidden;
  background: rgb(249, 249, 249);
  border: .1rem solid lightgray;
}

.card-title {
  padding: .25rem .6rem;
}

.donate-icon {
  display: flex;
  align-self: stretch;
  align-items: center;
  position: relative;
  padding-right: 1.2rem;
  float: right;
  background: #ea5b18;
}

.donate-icon:before {
  content: "";
  position: absolute;
  display: block;
  width: 48px;
  height: 48px;
  transform: rotate(45deg) translate(-50%,50%);
  background: #ea5b18;
}

.donate-icon i {
  color: #187415;
  background: #fff;
  padding: 8px;
  z-index: 1;
  border-radius: 50%;
}

.avatar {
  max-width: 50px;
}

.fundraiser {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: .1rem;
}

.fundraiser .details.px-2 {
  margin: 0 1rem 0 .5rem;
}

.fundraiser .name {
  font-size: 1rem;
  margin: .15rem 0;
}

.fundraiser .creator {
  font-size: 1rem;
  color: #555;
}

.fundraiser .details {
  flex: 1;
}

.btn-donate {
  margin-top: .1rem;
  padding: .75rem 1.25rem;
  border: none;
  text-transform: uppercase;
  font-size: .8rem !important;
  border-radius: .1rem;
  background: #ea5b18 !important;
  color: #fff !important;
}

.btn-donate, .btn-donate:hover, .btn-donate:active, .btn-donate:focus {
  position: relative;
  color: #fff;
  cursor: pointer;
}

.sum {
  text-align: center;
  font-weight: 500;
}

.card-footer a {
  font-size: .785rem;
  font-weight: 500;
}

/* Popover styles */
.popover-blue {
  border-radius: 1;
}

.popover-blue .arrow:after {
  border-bottom-color: var(--yt-blue) !important;
}

.popover-blue .popover-body {
  color: #fff;
  background-color: #ea5b18;
  font-size: 1rem;
  height: 6rem;
}

.btn-dismiss {
  margin-top: 1.5rem;
  color: #fff !important;
  float: right;
  box-shadow: none;
}

.bs-popover-top > .arrow::after {
  border-top-color: #ea5b18 !important;
}
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="card mt-4 mx-auto" style="max-width: 25rem;">
  <div class="card-header p-0">
    <span class="d-inline-block card-title mb-0">Donate now</span>
    <span class="donate-icon">
      <i class="fas fa-hand-holding-heart"></i>
    </span>
  </div>
  <div class="card-body">
    <div class="fundraiser">
      <img src="https://t3.ftcdn.net/jpg/04/06/35/70/360_F_406357077_MWIAoFRKa7qmoLhr44pTraEzmF5rTFhf.jpg" class="avatar" />
      <div class="details px-2">
        <h3 class="name mb-0"><strong>Magic Logic</strong></h3>
        <span class="creator text-muted">paypal.me/MagicLogic</span>
      </div><a href="https://www.paypal.com/paypalme/MagicLogic" title="Donate">
      <button class="btn btn-md btn-donate z-depth-0" data-toggle="popover" data-placement="bottom" 
  data-description="You can buy me a cup of Coffee or something via PayPal.">Donate</button></a>
</div>
    <!-- You must include the jQuery and Bootstrap scripts  -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

Upvotes: 1

Related Questions