-2

I'm beginner in codeigniter 4. So I made a card for event, and the description of the event is long. When I try to put the event data from database to the card, the card is like this (the long of the card depends on the long of the description text):

card for event

So I want to minimize it so the card will still in a default shape although it has very long description. So, when user want to know a full-description, they should go to button details. Thank you so much for your response. Sorry for my lack of explaining it, I hope you understand what I mean.

I've search many tutorials, and it seems I can't explain it better to search engine, so it doesn't know what I mean. It just showing how to minimize spacing between cards, how to align a text or image, or different types of card, etc. And I still doesn't find the answer.

uul
  • 9
  • 5
  • Not sure if this is what you're asking, but you could use CodeIgniter's `word_limiter` function to limit the description to a fixed number of words when echo'ing it to the page, see: https://www.codeigniter.com/user_guide/helpers/text_helper.html#word_limiter – Marleen Aug 29 '23 at 18:13

1 Answers1

-1

Create a card structure in your view file

HTML Code:

<div class="event-card">
<h2><?= $event->title ?></h2>
<p class="event-description"><?= substr($event->description, 0, 100) ?>...</p>
<button class="details-button">Details</button>
<div class="full-description">
    <p><?= $event->description ?></p>
</div>

CSS Code:

Initially, you can hide the full description and style the card as needed.

.event-card {
   border: 1px solid #ccc;
   padding: 10px;
   margin: 10px;
   max-width: 300px; /* Set a max width for the card */
 }

.event-description {
    overflow: hidden;
    max-height: 60px; /* Limit the height of the description */
}

.full-description {
    display: none; /* Initially hide the full description */
    margin-top: 10px;
}

Script:

jQuery to toggle the visibility of the full description when the "Details" button is clicked.

<script>
   $(document).ready(function() {
      $(".details-button").click(function() {
        $(this).siblings(".full-description").toggle();
      });
   });
</script>

i hope to use full this answer and clarify this code :)

M Surya
  • 54
  • 6