Horizontal rule

[alcampopiano]

Hi everyone,

Is there a way to add a horizontal rule? Example:

---

I have to separate a title from a list and the horizontal line always seems to look nice for separating sections on a page. This was requested here.

I tried to simulate this by setting a label with a background color and changing its fontsize to 0, but the box is still to big to pass as a thin line.

[shaun]

You can use a custom HTML Form to make a custom component that’s a <hr>:

https://anvil.works/ide#clone:VC4LF2U6ARGTEXRD=UFOGA4CEJT7HWGITWN7HIH6W

You’ll probably want to style it to look more prominent.

[alcampopiano]

Thanks @shaun! That is a great idea.

[alcampopiano]

@shaun I’ve never used custom components before. I can’t figure out how to start using this horizontal rule component in an app I made previously. Is it supposed to show up in the tool window somewhere so I can drag/drop?

[shaun]

To use a custom component from the app it is defined in, click on the arrow next to the Form in the App Browser and click ‘use as component’. Then it will appear in the Toolbox:

Docs:

https://anvil.works/doc#-div-id-custom_components-custom-components-div-

To use a custom component from AppA in AppB, add AppA as a dependency in AppB. Use the ‘Dependencies…’ dialog in AppB for this:

You’ll get a window with an ‘Add a dependency’ dropdown that shows all your apps. Select HorizontalRule and you should see HorizontalRule in the toolbox.

https://anvil.works/doc/#-div-id-app_dependencies-app-dependencies-div-

[alcampopiano]

Thanks very much. This is fantastic.

[nmvega]

Hello Friends:

I need a Horizontal Rule as well, but looking at the helpful instructions above, I might need additional guidance because the UI has changed.

So far, I’ve added the Horizontal Rule as a standalone App, where I was notified that the teams needs to enable Python2. But what next when they do that? – Because the down-downs in the above screenshots seem unavailable to me. Perhaps it’s because my personal subscription tier does not permit that UI anymore.

I guess I need a 2022 version of the above.

Thank you in advance!

EDIT: Or perhaps I can simply use a Rich Text Box in Markdown mode, and specify three dashes (—) to render a Horizontal Rule. That may or may not be the optimal (look & feel, performance, etc), and guidance and/or alternatives is always welcome.

[campopianoa]

Currebtly an irregular Anvil user here (but enthusiastic admirer).

The following may work:

• use “—” in a rich text component
• use canvas with height=1 (credit @stefano.menci)
• use custom HTML component (this is likely described in the docs and on the forum).

[anthonys]

@alcampopiano

Is there a way to add a horizontal rule? Example:

I have to separate a title from a list and the horizontal line always seems to look nice for separating sections on a page. This was re

Here is a conversation about it

How to set border property for card component

How to set border property for card component?

TLDR;

I created a role by adding the following to my native libraries:

<style>
.anvil-role-bottom_thin_border {
  border-bottom: thin solid;
}
</style>

Then I created a role called bottom_thin_border in the theme/role section of the IDE.

If you don’t restrict the role, you can then apply it to any component using the role drop-down in the appearance section of the component properties.

or via code

self.component.role = "bottom_thin_border"

[nmvega]

@campopianoa Thank you for the options! I’ll use the first option for now. I have to look into the Canvas option (I’m unfamiliar with it), as well as the HTML custom component also unfamiliar with it. Again, thank you.

@anthonys Thank you for the pointer. I’m reading up on it now, as well.

[nmvega]

Thank you. When I get a chance (soon), I walk through your example and see if I can get to understand roles, IDE theme, and then see if I see it in component role-dropdowns (via unrestricted). Thank you for the step-by-step!

[anthonys]

of course, also addressing the original question, you might be in the BETA IDE.

To make a form a component you can click the three vertical dots next to the form name and select “use as component”.

[nmvega]

Ah, I see it now – Use as Component – after clicking a Forms Hamburger Menu. Thank you.

Now, I have learn how to add Horizontal Rule code to a new Form (or add whatever I might need, not just a Horizontal Rule).

But sticking with the Horizontal Rule for a moment to keep things simple, could these steps accomplish it:

1. Create an new Form
2. Drag in a Rich-Text-Box in Markdown mode
3. Type three dashes (—) in it’s Content attribute/field
4. Finally, select Use as Component for that Form

Perhaps it’s a naive / newbie approach (and it may not be the best design pattern - I don’t know), but would it at least work? I guess I’ll try it later (too afraid of messing up my current project. LoL).

[anthonys]

Looks like it definitely could!