Bottom border on a repeating row

[daveap07]

I have created a repeating row that contains Bootstrap column. This is for displaying dynamic data from a query. This part is working fine.

I would like to have a narrow bottom border separating each row. This just to separate the items in one record from the next.

I have tried applying bottom border to the row but this only put a border at the very bottom (after the last row is displayed). I have also tried various suggestions from the AI but have had no success.

Any suggestions please ?

[Teodor]

Can you post your repeater code please?

[daveap07]

Here is the code:-

{{dateinwords}}

{{venue}}

[brad]

How to format code in your posts

Code Formatting When pasting code in your posts, please use the following formatting options, in order to be sure your code is readable and well formatted for the rest of the users. Inline code formatting Surround a section of code with backticks (`) inline code formatting. Typing: `var x = 10;` Results in: var x = 10; This can also be done as var x = 10; inline. Multi-Line Blocks of Code Surrounding code with three backticks ``` will allow for code to span multiple lines Typing: ``` f…

[daveap07]

<dmx-serverconnect id="sc_events" url="dmxConnect/api/select_all_events.php"></dmx-serverconnect>
   <div class="container mt-3 row-border">
       <div class="row row-border" is="dmx-repeat" id="repeat_events" dmx-bind:repeat="sc_events.data.query">
           <div class="col-2">
               <h6>{{dateinwords}}</h6>
               <p>{{venue}}</p>
           </div>

[brad]

row-border class is not a native bootstrap class. You need to add a style to it. Add this code to your page.

<style>
    .row-border {
        border-bottom: 1px solid #ccc; /* Example border style */
        padding-bottom: 10px; /* Optional: Adds space between content and border */
        margin-bottom: 10px; /* Optional: Adds space below the border */
    }
</style>

[daveap07]

I started off with the native bootstrap classes but the result was the same. I have reverted the code and done a screen shot. The border bottom is 3px so it is easier to see.

The row-border custom class was suggested by the AI. This gave the same result.

    <div class="container mt-3">
        <div class="row border-bottom border-dark border-3" is="dmx-repeat" id="repeat_events" dmx-bind:repeat="sc_events.data.query">
            <div class="col-2">
                <h6>{{dateinwords}}</h6>
                <p>{{venue}}</p>
            </div>
            <div class="col-2"> 

[daveap07]

[Teodor]

Simply move the repeat code to the container, so that the row is repeated and not the columns.

 <div class="container mt-3" is="dmx-repeat" id="repeat_events" dmx-bind:repeat="sc_events.data.query">
        <div class="row border-bottom border-dark border-3">
            <div class="col-2">
                <h6>{{dateinwords}}</h6>
                <p>{{venue}}</p>
            </div>
            <div class="col-2">