0
234
Views<strong> tags make space disappear/collapse?
Bit of an odd one:
I'm making an input element that displays suggested results, and highlights the input value as a substring of each result.
So for example if I typed 'cat' it would suggest and highlight category
I'm just adding a strong tag to the result: content.innerHTML = ${arr[x].substr(0, index)}<strong>${arr[x].substr(index, match.length)}</strong>${arr[x].substr(index+match.length)};
Stripped down codepen example here
My problem - which I can't seem to replicate in the codepen above despite it being the same innerHTML code - is that if the match is next to a space, that space disappears. Eg: 'tes' => 'This is atest'.
The space is in the html (below), and the string outputs correctly to the console, so I feel like this has to be down to the strong tag?
No doubt I'll kick myself when someone points out my mistake, but I just can't see it
1 answers
Answer question0
In the screenshot of the dev tools I can see that the containing div is a flexbox, where the codepen it is not. It is the flexbox that is causing this.
See snippet below
const content = document.querySelectorAll(".content");
const arr = ["Red square", "Blue circle", "Green rectangle"];
const match = "rec";
content.forEach((element) => {
for (let x = 0; x < arr.length; x++) {
if (arr[x].toUpperCase().indexOf(match.toUpperCase()) !== -1) {
const index = arr[x].toUpperCase().indexOf(match.toUpperCase());
element.innerHTML = `${arr[x].substr(0, index)}<strong>${arr[x].substr(
index,
match.length
)}</strong>${arr[x].substr(index + match.length)}`;
}
}
});.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: lightgrey;
}
.content {
height: 10rem;
width: 20rem;
font-size: 1.7rem;
background-color: white;
margin-bottom: 1rem;
}
.withFlex {
display: flex;
}<div class="wrapper">
<div>No Flexbox</div>
<div class="content"></div>
<div>With Flexbox</div>
<div class="content withFlex"></div>
</div>