xls form html formatting underline and underline color

489
10
Jump to solution
12-06-2021 02:01 PM
JenMcRuer
New Contributor III

Hello, 

I have been searching, high and low, for a means to create an underline under a font, whereby both are different colours (and text has additional formatting).

I have found references to <u> tags, <bottom border>... but have tried it all, and am lost in trying to figure this out.

I want the text "Intorduction" to be: <div style="text-align:center; font-size:large; font-weight:bold;">

With a thick solid underline to be color:#e01a2a; (different from the text color).

Any help is much appreciated. 

 Thank you

 

 

 

 

0 Kudos
1 Solution

Accepted Solutions
JohannesLindner
MVP Regular Contributor

OK, really last idea.

<div style="text-align: center; font-size: large; font-weight: bold;">
  Introduction
</div>
<div style="background:#e01a2a; width:100%; height:5px;"></div>

 

Other than that, I'm out of ideas about how to do this with HTML. All of these should work and do work in a simple html file. All of them, except the hr one, also work in a WebApp info widget. But the ArcGIS widgets and HTML often don't work together, so it can get frustrating.

Really ugly ideas:

  • Use "-" or "_" to make a "line" and use the text editor to make that red.
  • Create an image of the line and put that underneath the heading.

Have a great day!
Johannes

View solution in original post

10 Replies
JohannesLindner
MVP Regular Contributor

 

<div style="text-align: center; font-size: large; font-weight: bold;">
  <span style="border-bottom: 5px solid #e01a2a;">Introduction</span>
</div>

 


Have a great day!
Johannes
0 Kudos
JenMcRuer
New Contributor III

Thanks Johannes.

This unfortunately doesn't do the trick.

Nothing changes in my survey form view.

Any other thoughts/ideas? 

 

Screen Shot 2021-12-07 at 8.20.12 AM.png

0 Kudos
JohannesLindner
MVP Regular Contributor

Hmm, seems to be another case of ArcGIS widgets blocking certain HTML...

JohannesLindner_1-1638951862101.png

Other possibilities I can think of:

use a div instead of the span

<div style="text-align: center; font-size: large; font-weight: bold;">
  <div style="display: inline; border-bottom: 5px solid #e01a2a;">Introduction</div>
</div>

use the u tag (can't control thickness)

<div style="text-align: center; font-size: large; font-weight: bold;">
  <u style="text-decoration-color: #e01a2a;">Introduction</u>
</div>

underline the whole width

<div style="text-align: center; font-size: large; font-weight: bold; border-bottom: 5px solid #e01a2a;">
  Introduction
</div>

 


Have a great day!
Johannes
0 Kudos
JenMcRuer
New Contributor III

Thanks again, Johannes. 

Of your three options offered, only the <u> tag works, but ONLY in underlining, NOT in colour of the line. 

Do you have any last, lingering guesses on how to make this work, or perhaps there is another person versed in html and ArcGIS that can add additional cents?

Have a great day.

0 Kudos
JohannesLindner
MVP Regular Contributor

Last try, using hr, which has a color attribute. Maybe that gets through where the style color couldn't...

<div style="text-align: center; font-size: large; font-weight: bold;">
  Introduction
  <hr color="#e01a2a" width="50%" size="5">
</div>
<!-- if that doesn't work, try placing the hr outside of the div -->
<hr color="#e01a2a" size="5">

Have a great day!
Johannes
0 Kudos
JenMcRuer
New Contributor III

Thanks again, Johannes, but not go on either option, regardless of hr placement....

This is a STUMPER!?

0 Kudos
JohannesLindner
MVP Regular Contributor

OK, really last idea.

<div style="text-align: center; font-size: large; font-weight: bold;">
  Introduction
</div>
<div style="background:#e01a2a; width:100%; height:5px;"></div>

 

Other than that, I'm out of ideas about how to do this with HTML. All of these should work and do work in a simple html file. All of them, except the hr one, also work in a WebApp info widget. But the ArcGIS widgets and HTML often don't work together, so it can get frustrating.

Really ugly ideas:

  • Use "-" or "_" to make a "line" and use the text editor to make that red.
  • Create an image of the line and put that underneath the heading.

Have a great day!
Johannes
JenMcRuer
New Contributor III

Now THAT produced a line at least! I'll play with the thickness. 

Many thanks, again, Johannes. I hope this brings as much relief to you as it does to me! 😃

Have a great rest of your day. 

Jen

 

0 Kudos
JenMcRuer
New Contributor III

Just a follow up, I need up going for the "Really ugly ideas":

  • Use "-" or "_" to make a "line" and use the text editor to make that red.
  • Create an image of the line and put that underneath the heading.

....to make it look pleasing to the eye. What a workaround! Surprising to me, given the capabilities of ArcGIS...

0 Kudos