Revamp and Enhance Your Layout Using Bootstrap Cards

Question

Revamp and Enhance Your Layout Using Bootstrap Cards

I am working with a bootstrap card and trying to control the visibility of the .task__content part using CSS transforms. Specifically, I want to hide it with transform: scaleY(0) and reveal it on hover over the .task element. However, I am encountering a strange issue where there is an empty vertical space between borders. Can anyone help me understand why this is happening and how to fix it? Why does the empty space persist even when .task__content is hidden using transform scale?

https://i.sstatic.net/JBP9I.png

https://i.sstatic.net/pVAUx.png

You can view a live codepen example here

html css twitter-bootstrap bootstrap-4 css-transforms

Answer 1

Answer №1

Based on your explanation regarding the border, it comes from the class

.card{ border: 1px solid rgba(0,0,0,.125);}

. You have the option to override it by using .card{ border: none !important}... As for the height, it is influenced by the inline style d-flex. By removing it, you can adjust it using height:0% and increase it to height:100% on hover.

Answer 2

Based on your explanation regarding the border, it comes from the class

.card{ border: 1px solid rgba(0,0,0,.125);}

. You have the option to override it by using .card{ border: none !important}... As for the height, it is influenced by the inline style d-flex. By removing it, you can adjust it using height:0% and increase it to height:100% on hover.

Answer 3

Answer №2

It appears that the issue lies in the fact that using transform: scaleY(0) does not impact the size of the element's parent or the flow of HTML elements on the page, unlike other transform scales. This results in extra empty space even when an element is hidden through scaling.

To achieve the desired effect, the following code needs to be implemented:

 @keyframes transformScale {
  0% {
    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
  }
}

.task {
  border: none;
}

.task__content {
  display: none;
  transform: scaleY(0);
  transform-origin: top center;
  border: 1px solid rgba(0, 0, 0, 0.125);
  opacity: 0;
  visibility: hidden;
}

.task:hover .task__content {
  display: flex;
  animation: transformScale 0.2s linear 0.2s forwards 1;
}

By manipulating the display property, the unnecessary spacing when .task__content is hidden can be minimized. Utilizing transform, keyframes, and animation allows for a smooth reveal effect upon hovering.

Answer 4

It appears that the issue lies in the fact that using transform: scaleY(0) does not impact the size of the element's parent or the flow of HTML elements on the page, unlike other transform scales. This results in extra empty space even when an element is hidden through scaling.

To achieve the desired effect, the following code needs to be implemented:

 @keyframes transformScale {
  0% {
    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
  }
}

.task {
  border: none;
}

.task__content {
  display: none;
  transform: scaleY(0);
  transform-origin: top center;
  border: 1px solid rgba(0, 0, 0, 0.125);
  opacity: 0;
  visibility: hidden;
}

.task:hover .task__content {
  display: flex;
  animation: transformScale 0.2s linear 0.2s forwards 1;
}

By manipulating the display property, the unnecessary spacing when .task__content is hidden can be minimized. Utilizing transform, keyframes, and animation allows for a smooth reveal effect upon hovering.

Answer 5

Answer №3

.task__content {
  transition: transform 0.2s linear 0s;

  transform: scaleY(0);
  transform-origin: top center;
}

.task:hover .task__content {
  transform: scaleY(1);
}
.card-body{
  padding: 0 1.25rem !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="task card" data-is-complete="incomplete">
  <div class="task__toolbar card-header d-flex align-items-center py-2">
    <!--task checklist-->
    <form class="task__form mr-3">
      <div class="task__form-block form-check"><input class="task__checkbox" type="checkbox" /></div>
    </form>
    <!--task title-->
    <div class="task__title">
      <p>Test Title</p>
    </div>
    <!--task btn bar-->
    <div class="task__btn-bar d-flex ml-auto">
      <!--expand button (optional - appears only if there is a task description)--><button class="task__descr-expand btn btn--iconed btn-sm" type="button"><span class="btn__icon--lg material-icons">expand</span></button>
      <!--edit task btn--><button class="task__edit btn btn--iconed btn-sm" type="button"><span class="btn__icon material-icons">edit</span></button>
      <!--delete task btn--><button class="task__del btn btn--iconed btn-sm" type="button"><span class="btn__icon material-icons">close</span></button></div>
  </div>
  <div class="task__content card-body d-flex align-items-center">
    <!--task description-->
    <div class="task__descr">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et</p>
    </div>
  </div>
</div>

There is bootstrap card make card-body padding all side

.card-body{ padding: 1.25rem; }

Modifying padding for both right and left sides only

.card-body{ padding: 0 1.25rem; }

Answer 6

.task__content {
  transition: transform 0.2s linear 0s;

  transform: scaleY(0);
  transform-origin: top center;
}

.task:hover .task__content {
  transform: scaleY(1);
}
.card-body{
  padding: 0 1.25rem !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="task card" data-is-complete="incomplete">
  <div class="task__toolbar card-header d-flex align-items-center py-2">
    <!--task checklist-->
    <form class="task__form mr-3">
      <div class="task__form-block form-check"><input class="task__checkbox" type="checkbox" /></div>
    </form>
    <!--task title-->
    <div class="task__title">
      <p>Test Title</p>
    </div>
    <!--task btn bar-->
    <div class="task__btn-bar d-flex ml-auto">
      <!--expand button (optional - appears only if there is a task description)--><button class="task__descr-expand btn btn--iconed btn-sm" type="button"><span class="btn__icon--lg material-icons">expand</span></button>
      <!--edit task btn--><button class="task__edit btn btn--iconed btn-sm" type="button"><span class="btn__icon material-icons">edit</span></button>
      <!--delete task btn--><button class="task__del btn btn--iconed btn-sm" type="button"><span class="btn__icon material-icons">close</span></button></div>
  </div>
  <div class="task__content card-body d-flex align-items-center">
    <!--task description-->
    <div class="task__descr">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et</p>
    </div>
  </div>
</div>

There is bootstrap card make card-body padding all side

.card-body{ padding: 1.25rem; }

Modifying padding for both right and left sides only

.card-body{ padding: 0 1.25rem; }

Revamp and Enhance Your Layout Using Bootstrap Cards

Answer №1

Answer №2

Answer №3

Similar questions

Gap created between two td or tr elements

Adding a line break in a Buefy tooltip

What is the reason for font names appearing yellow rather than blue in the "font-family" property?

Verify user credentials during login in a React application

Bootstrap 4, with nested rows and columns set to full height

Guide on creating a menu that remains open continuously through mouse hovering until the user chooses an option from the menu

Drop-down menu for every individual cell within the tabular data

Exploring the possibilities of updating carousel items in Angular using Bootstrap

Overlapping Divs and Colliding Elements

Struggling to make the text color change when hovering

Obtaining Text within <span>Tag</span> with Selenium in C#

Creating grids and dividing them using a combination of CSS, JavaScript, and PHP

Incorporating video responses into an HTML player using Node.js with the req.pipe(res) method

What is the best way to send user input text to a Vue method using v-on:change?

Get a Blob as a PNG File

Showing text beside an image within a division

Progress to the following pages after each page remains inactive for 3 seconds

Tips for adjusting the default selection in a second dropdown menu

Looking to create an anchor tag that navigates to a specific ID on the page while accommodating a fixed header placement

arrangeable database table