Custom HTML - Component doesn't drop into drop-slot

Anvil Q&A
1

Hello,

I am coming back again with a newbie question but I am scratching my head for hours trying to solve this and reading the docs. Basically, for learning purposes, I am trying to build a simple component with two drop zones for labels, here is the html code:

<center style="font-style:italic; color:#888; margin: 3em;">
  <div class="my_card">
    <div class="weekday">
      <div anvil-drop-here></div>
      <div anvil-slot></div>
    </div>
    <div class="my_card_info">
      <div class="my_card_title">
        <div anvil-drop-here></div>
        <div anvil-slot></div>
      </div>
    </div>
  </div>
</center>

Problem is that when I drag and drop a label onto it, it gets added after and does not get dropped into the drop slots I created. If I change the code
<div anvil-slot></div> to <div anvil-slot="default"></div>
then every dropped component gets added to the changed div.

It’s probably a silly question but how would you do what I am trying to achieve?

1 Like
2

I don’t know the answer to your question, not yet having monkeyed with HTML templating myself. All I can offer you is my knowledge of the broader Anvil documentation:

4 Likes
3

Thanks a lot for the pointers. I will try to make it work and post the code here if I can do what I would like to.

4

Well, that was quick, I got it working using this tutorial for hand-drawn web apps that @hugetim linked in his reply. Basically, I made use of the anvil-if-slot-empty element coupled with anvil-drop-slot and now it works as intended. Here is the working code:

<div class="my_card">
  <div class="weekday">
    <div anvil-if-slot-empty="weekday" anvil-drop-slot="weekday">
      Drop a label here
    </div>
    <div anvil-slot="weekday"></div>
  </div>
  <div class="my_card_info">
    <div class="my_card_title">
      <div anvil-if-slot-empty="card_title" anvil-drop-slot="card_title">
        Drop a header here
      </div>
      <div anvil-slot="card_title"></div>
    </div>
  </div>
</div>
3 Likes