Select to view content in your preferred language

Align Hyperlink Note Item to Right Edge of Page

2406
11
Jump to solution
01-24-2024 06:55 AM
JacobWBrown
Emerging Contributor

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.co.... 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?

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
CodyPatterson
MVP Regular Contributor

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

View solution in original post

0 Kudos
11 Replies
CodyPatterson
MVP Regular Contributor

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

0 Kudos
JacobWBrown
Emerging Contributor

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.

0 Kudos
CodyPatterson
MVP Regular Contributor

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

0 Kudos
JacobWBrown
Emerging Contributor

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.

 

0 Kudos
CodyPatterson
MVP Regular Contributor

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

0 Kudos
JacobWBrown
Emerging Contributor

Hi @CodyPatterson 

I appreciate the suggestion, it worked like a charm! I had to adjust the <div> width a little to ensure my link text was all on one line. But the margin-left: auto; seems to have do the trick!

Thank you for your help! And thank you as well @abureaux, I appreciated your suggestions.

0 Kudos
CodyPatterson
MVP Regular Contributor

Hey @JacobWBrown 

Great to hear! Glad that did the trick, thankfully with the margin-left auto, it's responsive to different screen sizes, so it'll look great on any size screen!

Cody

0 Kudos
abureaux
MVP Frequent Contributor

I'm curious what your set-up is, as text-align should work on its own.

Here is what I have in Connect:
abureaux_0-1706125690497.png

And here is the result on the web:
abureaux_1-1706125703046.png

Adding a link <a> or any other content within the div tag should not change this functionality.

It is also oddly resistant to malformed tags as can be seen with two broken end tags:
abureaux_2-1706125958712.png

Still resulting in right-aligned text:abureaux_3-1706125997717.png

 

Are you using Connect, and is it up to date? Which browser are you using, and is it up to date?

0 Kudos
abureaux
MVP Frequent Contributor

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

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

0 Kudos