Trying to incorporate inline input range elements in a way that aligns with the line while also aligning with the right edge of the outer div has proven to be challenging. The HTML on the site is formatted using prettify, resulting in <span> elements within a <pre> element where whitespace, especially linefeeds, plays a significant role.
The aim is to insert <input type="range"> elements enclosed by 2 divs such that they align smoothly with the content on the same line but at the right side of the outer container.
Despite attempts, no viable solution has been found yet. Initially, adjusting the font size and inserting extra content inside the .holder elements seemed to improve alignment visually, but upon increasing the font size, it became evident that the alignment was not exact.
Is there a practical way to address this issue?
Normally, one might opt for a table (separate column for sliders) or a flexbox layout, but these solutions necessitate parsing all the code to identify line breaks and then generate additional HTML, which isn't ideal.
.outer {
position: relative;
background: pink;
padding: 1em;
width: 200px;
}
.holder {
display: inline-block;
}
.holder>div {
position: absolute;
display: inline-block;
right: 0;
}
.holder input {
position: absolute;
display: inline-block;
right: 1em;
}<h1>test</h1>
<div class="outer">
<div>
<span>foo: </span>
<div class="holder">
<div>
<input type="range">
</div>
</div>
</div>
<div>
<span>bar: </span>
<div class="holder">
<div>
<input type="range">
</div>
</div>
</div>
</div>Note: The displayed code exemplifies the problem, but the real code consists of whitespace-sensitive pre and span elements, making it hard to decipher. This representation simplifies the structure.
body {
font-size: 35pt;
}
.outer {
position: relative;
background: pink;
padding: 0.2em;
width: 300px;
}
.holder {
display: inline-block;
}
.holder>div {
position: absolute;
display: inline-block;
right: 0;
}
.holder input {
position: absolute;
display: inline-block;
right: 1em;
}<pre class="outer"><span>foo: </span><div class="holder"> <div><input type="range"></div></div></div>
<span>bar: </span><div class="holder"><div><input type="range"></div></div>
</pre>After generating <pre> and <span> elements, the range inputs are introduced into the equation.
Another aspect to consider is that on the live site, if a line exceeds a certain length, the <pre> section acquires scrollbars (similar to S.O.'s code area). However, even in such cases, the intention is to keep the input areas aligned to the right boundary of the visible region (without scrolling).
body {
font-size: 35pt;
}
.outer {
position: relative;
background: pink;
padding: 0.2em;
width: 300px;
overflow: auto;
}
.holder {
display: inline-block;
}
.holder>div {
position: absolute;
display: inline-block;
right: 0;
}
.holder input {
position: absolute;
display: inline-block;
right: 1em;
}<pre class="outer"><span>longlongline: </span><div class="holder"> <div><input type="range"></div></div></div>
<span>bar: </span><div class="holder"><div><input type="range"></div></div>
</pre>A visual representation of the final outcome could provide clarity.
To prevent sliders from being pushed off screen when the window size is restricted, they are made transparent and positioned absolutely instead of relying solely on CSS (display: inline-block). This approach guarantees both readability of the code and interactiveness with the sliders.
Though the current appearance suggests alignment, resizing the window under specific conditions exposes unintended misalignments. Referencing the page provided and adjusting settings as described will highlight the existing discrepancies.
Rather than resorting to reorganizing each line into separate containers, striving to utilize appropriate CSS rules, if available, to achieve precise alignment remains preferable despite potential constraints.