How to put scroll bar only for modal-body?

 https://stackoverflow.com/questions/25874001/how-to-put-scroll-bar-only-for-modal-body

If you're only supporting IE 9 or higher, you can use this CSS that will smoothly scale to the size of the window. You may need to tweak the "200px" though, depending on the height of your header or footer.

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Left & right align modal footer buttons in Bootstrap 4

 https://stackoverflow.com/questions/43042262/left-right-align-modal-footer-buttons-in-bootstrap-4

Now that the modal-footer is "display:flex" in Bootstrap 4, it would be easiest to use the auto-margins. Use mr-auto on the left button.

<div class="modal-footer">
     <button type="button" class="btn btn-primary mr-auto">Save changes</button>
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>

Demo

Also see: Left align and right align within div in Bootstrap

---

Follow-up to comment "What if I need the button on the right to occupy all the space left?" - Use the btn-block class:

<div class="modal-footer">
     <button type="button" class="btn btn-primary text-nowrap">Save changes</button>
     <button type="button" class="btn btn-secondary btn-block ml-1" data-dismiss="modal">Close</button>
</div>

label for name or id

 https://www.w3.org/TR/WCAG20-TECHS/H44.html#:~:text=A%20label%20is%20attached%20to,unique%20in%20the%20Web%20page.

A label is attached to a specific form control through the use of the for attribute. The value of the for attribute must be the same as the value of the id attribute of the form control. The id attribute may have the same value as the name attribute, but both must be provided, and the id must be unique in the Web page.

DOMContentLoaded, load, beforeunload, unload

Source: https://javascript.info/onload-ondomcontentloaded

The lifecycle of an HTML page has three important events:

• DOMContentLoaded – the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures <img>and stylesheets may be not yet loaded.
• load – the browser loaded all resources (images, styles etc).
• beforeunload/unload – when the user is leaving the page.

Each event may be useful:

• DOMContentLoaded event – DOM is ready, so the handler can lookup DOM nodes, initialize the interface.
• load event – additional resources are loaded, we can get image sizes (if not specified in HTML/CSS) etc.
• beforeunload event – the user is leaving: we can check if the user saved the changes and ask them whether they really want to leave.
• unload – the user almost left, but we still can initiate some operations, such as sending out statistics.

Does height and width not apply to span?

Source: https://stackoverflow.com/questions/2491068/does-height-and-width-not-apply-to-span

Span is an inline element. It has no width or height.

You could turn it into a block-level element, then it will accept your dimension directives.

span.product__specfield_8_arrow
{
    display: block; /* or inline-block */
}