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; } } }

identify template and formating

jaykapalczynski

Is there a way to create some separation between label and value in a template?
I can put "...." in there but it does not look very pleasing to the eye.

For instance my label character lengths vary....so some sort of indent to get all the rows to line up?

What I would like is ... but without the multiple underscores...

Label         Value
Label         Value there is more there
__________continuing on the next line
Label         some more values

 var templateWarbler = new InfoTemplate();           templateWarbler.setTitle("${Species}");           templateWarbler.setContent               ("<b>Species</b>...... ${Species}<br/>" +               "<b>Year</b>......... ${Year}<br/>" +       "<b>Date</b>......... ${Date}<br/>" +       "<b>Observer</b>... ${Observer}<br/>" +       "<b>Count</b>....... ${Count_}<br/>" +       "<b>Bio Info</b>..... ${Bio_info}<br/>" +       "<b>Habitat</b>........ ${Habitat}<br/>" +       "<b>Elev ft</b>........ ${Elev_ft}<br/>" +       "<b>Location</b>..... ${LocDescrip}<br/>" +       "<b>DataSource</b>. ${DataSource}<br/>" +       "<b>Coord</b>.......... ${Lat}<br/>"  );

Find more posts tagged with

Accepted answers

JonathanUihlein

Classless Example:

 map.infoWindow.setContent( "<table style='width:100%'><tr><td style='width:50%'><b>test1</b></td><td style='width:50%' >test2</td></tr><tr><td width=50%><b>test1</b></td><td width=50% >test2</td></tr></table>");

Notice from this short snippet that you can define the widths of the cells in two different manners.

I also need to ask... if you were using double-quotes to define the class of your cells, were you escaping the inner double-quotes?

If so, I assume you know the difference between single-quote (') and double quote (") in regards to string declaration? This is probably why you were having issues.

All comments

jaykapalczynski

Jon
Ugggggg....I completely missed that....single-quote (') vs double quote (")....chalk that up to stupidity and not checking my debugger. I thank you for the extra set of eyes, your patience, and thoughts...
Cheers

JonathanUihlein

Classless Example:

 map.infoWindow.setContent( "<table style='width:100%'><tr><td style='width:50%'><b>test1</b></td><td style='width:50%' >test2</td></tr><tr><td width=50%><b>test1</b></td><td width=50% >test2</td></tr></table>");

jaykapalczynski

I was able to do the below but not finding a way to specify the width of TD
This looks better as it does create two columns but I am after each column being the same width to clean it up a bit more

I tried in a Class="" in CSS..... I tried Style="Width=50px;" right on the TD......
Id does not like when I try and define an ID or Class on the TD
Cant seem to find a solution to this in the link you posted above.

Thoughts?

var templateWarbler = new InfoTemplate();
     templateWarbler.setTitle("Warblers");
     templateWarbler.setContent(
     "<table><tr><td><b>Species</b></td><td>${Species}</td></tr></table>" +
     "<table><tr><td><b>Location</b></td><td>${LocDescrip}</td></tr></table> <br/>" +
     "<table><tr><td><b>Year</b></td><td>${Year}</td></tr></table> <br/>" +
     "<table><tr><td><b>Date</b></td><td>${Date}</td></tr></table> <br/>"
);

jaykapalczynski

I scoured that section....looking for any example that tried to format columns and found nothing...I am going to go back and try again....I was trying something like this but it did not work

td{    
  width:150px; 
  height:20px;
  max-width:150px;
  min-width:150px; 
  max-height:20px; 
  min-height:20px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

 
      var templateWarbler = new InfoTemplate();
          templateWarbler.setTitle("${Species}");
          templateWarbler.setContent("<b>Species</b> <tr><td>${Species}</td><td>two</td></tr> <br/>" +
              "<b>Year</b>......... ${Year}<br/>"
 );

JonathanUihlein

I would use CSS classes for organizing the layout of your content elements with the actual CSS in an external stylesheet.

Check out the 'Popups and Infowindows' section in the Concepts area of the documentation.
There's probably an hour's worth of reading material for you to catch up on that talks about exactly what you are asking.

https://developers.arcgis.com/javascript/jshelp/intro_infowindow.html

Remember, the documentation is a programmer's best friend!

jaykapalczynski

sure it is but not sure how to modify what I have and then control with CSS

JonathanUihlein

Is CSS not an option?

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.