Generating div elements with (for:) macro

Authoring Twine
1

Hi, I’m using Harlowe 3.1.0. I am working on a story where the main character can create new characters by interacting with the environment. I was working on a character generation passage, but I am having difficulty figuring out how to get Twine’s tw-hook passage to stop interfering with my stylesheet. Here’s what I’m trying to do:

{<div class="grid-container">
  <div class="grid-menu-box">
  Back to Map
  
  Info
  
  Etc.
  </div>
  
  <div class="grid-char-box">
  	<div class="char-container">
		(for: each _char, ...$chars)[
			<div class="char-cell">
				<button class="char-button">
				(print: _char's 2nd) <br>
				(print: _char's 1st)
				</button>
			</div>]
	</div>
  <div>
</div>
}

And here is the stylesheet information:

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}

.grid-menu-box {
  background: limegreen;
}

.grid-char-box {
  background: magenta;
}

.char-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 1vw;
  grid-auto-flow: row;
  box-sizing: border-box;
}

.char-cell {
  background: white;
  width: 15vw;
  border: 3px solid black;
  border-radius: 7px;
  color: black;
  margin-left: 1vw;
  margin-top: 1vw;
  margin-bottom: 1vw;
}

.char-button {
  display: inline-block;
}

The code works well to populate a grid with character data from an array that is made in another passage. However, when I run it, the grid only populates a single column. I’ve tried the grid out with

elements by hand, and it works well, but the macro used to generate it dynamically is styled with a tw-hook element that seems to generate AFTER the rest of the CSS. Since the cells are generated with the (for:) loop in the passage, is there a way to stop this from happening?

I know that wrapping the tw-hook with a

that has display: inline-box can fix this, but I think that will prevent the cells from generating correctly.
2

By using the Inspect feature of the web-browser’s Web Developer Tools we can see the HTML structure that is generated from your Passage content…

<tw-collapsed>
	<div class="grid-container" data-raw="">
		<div class="grid-menu-box" data-raw="">Back to Map Info Etc. </div>
		<div class="grid-char-box" data-raw="">
			<div class="char-container" data-raw="">
				<tw-expression type="macro" name="for"></tw-expression>
				<tw-hook>
					<div class="char-cell" data-raw="">
						<button class="char-button" data-raw="">
							<tw-expression type="macro" name="print">c1 e2</tw-expression>
							<br data-raw="">
							<tw-expression type="macro" name="print">c1 e1</tw-expression>
						</button>
					</div>
					<div class="char-cell" data-raw="">
						<button class="char-button" data-raw="">
							<tw-expression type="macro" name="print">c2 e2</tw-expression>
							<br data-raw="">
							<tw-expression type="macro" name="print">c2 e1</tw-expression>
						</button>
					</div>
				</tw-hook>
			</div>
			<div data-raw=""></div>
		</div>
	</div>
</tw-collapsed>

…and this lets us determine that the <tw-hook> element is the actual parent of the char-cell classed <div> elements, and not the char-container classed <div> element your CSS is targeting.

If we take the above into account then simply changing the char-container CSS selector should resolve the issue.

.char-container tw-hook {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 1vw;
  grid-auto-flow: row;
  box-sizing: border-box;
}

warning: Harlowe’s Passage Transition process’s visual effect excludes block based elements.
So if you want an un-styled block based element (like a <div> or a <p>) to be included in that visual effect then you need to change its display property to something other than block.
The following CSS is one way to do this.

div, p {
	display: inline-block;
	width: 100%;
}
3

Thanks for the advice there. I actually did something similar that worked, which was change the .tw-hook to be the cell while keeping the .char-container as the grid. I wasn’t sure if changing the tw-hook would affect anything else for any reason in the long-run, but it should only pertain to this situation with the way I have it targeted.

Thanks for the info about the inline-block. I had actually read another old post you made that talked about it, which had helped me resolve a similar problem I had the other day with concatenating an array into an element.

I’m glad I figured this out…it’s really cool to be able to create the html structure elements like this with the Twinescript instead of having to use JS, and it will help me build an interesting passage.