Repeat region on ul missing element

Wappler General
1

Howdy everyone,

I’m applying a repeat region to a ul element and finding out that a graphic element goes missing.
This is my placeholder before applying the repeating behavior:
single
This is what I get with the repeat applied:
repeat
This is the code itself, with the missing element highlighted:

code
code973×137 21.2 KB

Applying an FA icon, which does something very similar, works fine. Any clue of what may be happening?

Thanks!

2

Hi @Nathaniel
are you probably using some script which adds the data-feather attribute there?

3

Hi Teodor,

it’s a simple css attribute.

4

data-attributes are used with some script.
Seems to me you are using the Feather icons - which use js code to replace the data-feateher attribute with the real data on page load.

So you probably have something like:

<script>
  feather.replace()
</script>

on your page?

5

You’re probably onto something @Teodor as I am using Feather icons, but they work fine without the repeat element, and adding the code you suggested doesn’t help.
Would a repeat region interfere on the client side?

6

@Nathaniel
The code i meantion is used to render your icon on the clientside. I took it from the Feather icons docs.

Yes, as the script i mentioned loads on page load, before the repeat region is actually rendered, so the script runs before the elements with data-attributes load.

Is it possible to send a link to your page, where i can check this?

7

I understand @Teodor, thanks for your guidance. Unless you are free and willing for a screen share, I’m afraid I’m developing on a local host and I don’t have a public link.
I’ll look on the client side interaction, but whilst I have you here, would you have any suggestion on adding padding around an FA icon? This is the only case where I’ll have this issue and I’m fine with using the built-in Wappler FA icon functionality, but they are so close to the text, they make it unreadable.

8

Yes, you can either use the Bootstrap 4 classes for that or add it in your css.

Option 1:
add px-3 to your icon -> <i class="fas fa-bus px-3"></i> this will add padding left/right to the icon. Experiment with numbers from 1 to 5.

Option 2:
add mr-3 to your icon -> <i class="fas fa-bus mr-3"></i> this will add margin right to the icon. Experiment with numbers from 1 to 5.

Option 3:
add the following to your css:

.nav-sub-link i {
    padding-left: 15px;
    padding-right: 15px;
}
9

Option 1 did exactly what I needed, thanks so much @Teodor.
If I may, I’ll ask a final question. How would you go with adding a repeated <div class="dropdown-divider"></div> after each of the repeated element, but the last?
I’m moving from the old Dreamweaver repeated behavior where you could just play with the php tags, I don’t have all of the client/server logic and references acquired yet.

10

So where should be the divider be placed in? In the <li> after <a> or after each <li> ?

11

Probably the later:

divider
divider1271×139 26.2 KB

12

Can you please paste this code here (the one from the screenshot), wrapped in 3 backticks: ``` so i can make the adjustments and return it to you?

13

Sure @Teodor, i appreciate it:

<ul class="navbar-menu-sub">
	<li class="nav-sub-item" dmx-repeat:repeat_queues="serverconnect_queues.data.query_queues_dropdown">
		<a href="queue.php?user_id=" class="nav-sub-link" dmx-bind:href="queue.php?user_id={{ID_users}}"><i class="fa fa-user-o px-2"></i>{{u_first_name}}</a>
	</li>
	<div class="dropdown-divider"></div>
</ul>
1 Like
14

I’d suggest to go with a repeat-children applied to the <ul>. This way you will repeat the <li> and <div>.
In your current code, the <li> will repeat itself and not the divider.
So your code:

<ul class="navbar-menu-sub" is="dmx-repeat" id="repeat1" dmx-bind:repeat="serverconnect_queues.data.query_queues_dropdown">
	<li class="nav-sub-item">
		<a href="#" class="nav-sub-link" dmx-bind:href="queue.php?user_id={{ID_users}}"><i class="fa fa-user-o px-2"></i>{{u_first_name}}</a>
	</li>
	<div class="dropdown-divider"></div>
</ul>

Then the easiest way is to hide the divider with CSS:

ul.navbar-menu-sub .dropdown-divider:last-child {
    display:none;
}

you can do this with an expression on the page as well, bu this is easier in my opinion.

1 Like
15

That works like a charm. Thanks for the great support, @Teodor!

1 Like