How to position <li> side by side in loop

Someone can tell me how to position the li in my loop side by side, when date two events have the same date?

<ol class="col-start-1 col-end-2 row-start-1 grid grid-cols-7 pr-8"
                    style="grid-template-rows: 1.75rem repeat(288, minmax(0px, 1fr)) auto;">
                    @foreach ($days as $day)
                        {{-- @php
                            $counter = 0;
                            foreach ($events as $event) {
                                if ($day->isSameDay($event->starts_at)) {
                                    $counter++;
                                }
                            }
                        @endphp --}}
                        @foreach ($events as $event)
                            @if ($day->isSameDay($event->starts_at))
                                <li class="relative mt-px flex col-start-{{ $event->starts_at->dayOfWeek }}"
                                    style="grid-row: 
                                    @if($event->clone && $event->last === false)
                                        1 / span 290
                                    @elseif($event->clone && $event->last)
                                        1 / span {{ ceil(Carbon\Carbon::parse($event->ends_at)->startOfDay()->diffInMinutes($event->ends_at) / 5) }}
                                    @else
                                        {{ $event->starts_at->hour * 12 + ceil($event->starts_at->minute / 5) }} / span {{ ceil($event->starts_at->diffInMinutes($event->ends_at) / 5) }}
                                    @endif
                                    ;">
                                    <a href="{{ route('events.show', $event) }}"
                                        class="group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-gray-100 p-2 text-xs leading-5 hover:bg-gray-200">
                                        <p class="order-1 font-semibold text-gray-700">{{ $event->headline }}</p>
                                        @if(!isset($event->clone))
                                            <p class="text-gray-500 group-hover:text-gray-700">
                                                <time datetime="{{ $event->starts_at->format('Y-m-d H:i') }}">
                                                    {{ $event->starts_at->format('H:i') }}
                                                </time>
                                            </p>
                                        @endif
                                    </a>
                                </li>
                            @endif
                        @endforeach
                    @endforeach
                </ol>

LaryAI

2 years ago

Level 58

To position the <li> elements side by side in the loop, you can use CSS flexbox. Wrap the <li> elements in a container element and apply the display: flex property to the container. This will make the <li> elements align horizontally.

Here's an example of how you can modify the code to achieve this:

<ol class="col-start-1 col-end-2 row-start-1 grid grid-cols-7 pr-8"
    style="grid-template-rows: 1.75rem repeat(288, minmax(0px, 1fr)) auto;">
    @foreach ($days as $day)
        <div class="flex"> <!-- Add a container element with the "flex" class -->
            @foreach ($events as $event)
                @if ($day->isSameDay($event->starts_at))
                    <li class="relative mt-px flex col-start-{{ $event->starts_at->dayOfWeek }}"
                        style="grid-row: 
                        @if($event->clone && $event->last === false)
                            1 / span 290
                        @elseif($event->clone && $event->last)
                            1 / span {{ ceil(Carbon\Carbon::parse($event->ends_at)->startOfDay()->diffInMinutes($event->ends_at) / 5) }}
                        @else
                            {{ $event->starts_at->hour * 12 + ceil($event->starts_at->minute / 5) }} / span {{ ceil($event->starts_at->diffInMinutes($event->ends_at) / 5) }}
                        @endif
                        ;">
                        <a href="{{ route('events.show', $event) }}"
                            class="group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-gray-100 p-2 text-xs leading-5 hover:bg-gray-200">
                            <p class="order-1 font-semibold text-gray-700">{{ $event->headline }}</p>
                            @if(!isset($event->clone))
                                <p class="text-gray-500 group-hover:text-gray-700">
                                    <time datetime="{{ $event->starts_at->format('Y-m-d H:i') }}">
                                        {{ $event->starts_at->format('H:i') }}
                                    </time>
                                </p>
                            @endif
                        </a>
                    </li>
                @endif
            @endforeach
        </div> <!-- Close the container element -->
    @endforeach
</ol>

By wrapping the <li> elements in a <div> container with the flex class, the <li> elements will be positioned side by side.

Please or to participate in this conversation.