CODEWITHSUNDEEP
javascripthtmlcssflexbox
mfaccord
mfaccord

Reputation: 225

How to Display Flex using inline styling?

I can't use CSS to style this particular piece. It has something to do with working within the Google Maps Api map. So I have to use inline styling to accomplish the tasks I need. I want to display the image and text side-by-side, however, I cannot successfully implement display flex. Any help would be greatly appreciated!

Attempted Inline Styling for Display: Flex

content.push('<div style={{display: flex}}><img id="legend-icon" width="25" height="25" src="' + lights + '"><p>Lights in Sky</p></div>');

Code

  var content = [];
  content.push('<h1>Icon Legend</h1>');
  content.push('<img id="legend-icon" widht="25" height="25" src="' + lights + '"><p>Lights in Sky</p>');
  content.push('<img id="legend-icon" width="25" height="25" src="' + alien + '"><p>Alien Sighting</p>');
  content.push('<img id="legend-icon" width="25" height="25" src="' + ufo + '"><p>Abduction</p>');
  content.push('<img id="legend-icon" width="25" height="25" src="' + redBlur + '"><p>Sighting within last week</p>');
  content.push('<img id="legend-icon" width="25" height="25" src="' + greenBlur + '"><p>Sighting within last month</p>');
  content.push('<img id="legend-icon" width="25" height="25" src="' + blueBlur + '"><p>Sightings over a month</p>');

Upvotes: 0

Views: 5082

Answers (2)

Tran Quoc Bao
Tran Quoc Bao

Reputation: 184

You could try creating a <div> tag (to contain all <img> child tags), with attribute style = "display: flex; flex-wrap: wrap;"

After that, you can put your content in.

You can replace style = "display: flex; flex-wrap: wrap;" with style = "display: flex; flex-wrap: nowrap;", if you want the content to display on a single line.

For example:

<div style = "display: flex; flex-wrap: wrap;">
    //push html of content[] here
</div>

Finaly, If you have more than one <img> tag for content and you want to css for all, you should use class = "legend-icon" instead of id = "legend-icon"

Upvotes: 2

Eldshe
Eldshe

Reputation: 743

you should use the regular html syntax:

content.push('<div style="display:flex"><img className="legend-icon" width="25" height="25" src="' + lights + '"><p>Lights in Sky</p></div>');

Upvotes: 1

Related Questions