nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Align Hyperlink Note Item to Right Edge of Page

JacobWBrown

I'm working on a Survey123 form to intake public requests for service for the small community I work for. I am trying to include a short PDF tutorial within the form. I've created a hyperlink that leads to my tutorial document and it seems to work fine.

The problem arises when I try to apply styling to this note field. I'm attempting to align the hyperlink text to right-side of the form so that it can site in the top right corner. I've tried using the style attribute within the <a> element as well as the <span> method outline in this document: Survey123 Tricks of the Trade: Quick guide to modernize HTML formatting tags in your survey (esri.com). Neither of these have worked.

Does anybody know of a simple way to style a note field with a hyperlink so that it aligns to the right side of the page?

Find more posts tagged with

Accepted answers

CodyPatterson

Hey @JacobWBrown

That is very strange that it reverts it to nothing, if all else fails, we could try setting the div to a specific size, and then using margin-left to push the entire div to the right side:

<div style="width: 150px; margin-left: auto;"><a href="linktosomething">Link</a></div>

Hoping that this will at least show up in the console!

Cody

All comments

JacobWBrown

Unfortunately, wrapping everything in a <div> did not prove any more fruitful. After inspecting the page in my browser I noticed that the div reverts from <div style="text-align:right;"> to simply <div style> once it is published.

I suppose I'll chalk this up to limitations in the way S123 deals with HTML tags and call it a day.

JacobWBrown

Unfortunately, placing a div around the <a> element and styling the <div> did not work either.

abureaux

My super high-quality graphic here will help explain why <div> is the tag for the job.

If you "center" align a <span>, technically it will work, but you are only centering your text onto itself (so, not really any use).

Whereas, if you center your text in a <div> tag, you are doing so relative to the page.

The text-align style accepts: left, right, center, justify.

S123 "modern HTML formatting" is, at its core, just HTML formatting. w3schools has a lot of helpful documents. Just keep in mind that S123 doesn't accept all HTML formatting.

CodyPatterson

Hey @JacobWBrown

What abureaux said is correct, <a> and <span> elements are not for alignment, but they can be influenced by alignment, the <div> tag as they stated would be correct for this case, I would surround what you have with the div they outline!

Cody

abureaux

<a> and <span> elements aren't for alignment. Use <div>

<div style="text-align:center">Title</div>

JacobWBrown

Sure thing. At the moment the code is as follows:

<a target="_blank" style="align-text:right;" href="LINK_HERE"> Click Here to View the How-To Guide </a>

The target and href attributes seem to be working fine, it's just the style attribute that is not.

CodyPatterson

Hey @JacobWBrown

I was curious if I could see a snippet of what the HTML code currently looks like to provide a better insight on what to do? It could be anything from a colon or semi-colon in the wrong place to an unclosed tag.

Cody

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.