What is causing the incorrect size of <input type='range'/> in relation to content flow?

<div id='unique-div' style='background:orange; height:100%'>
  <input id='unique-input' type='range' style='height:100%; margin:0; padding: 0; border: 0'/>
</div>

<div id='another-unique-div' style='background:green; height:fit-content; fit-content'>
  <input id='another-unique-input' type='range' style='margin:0; padding: 0; border: 0'/>
</div>

In various browsers, there is consistently a slight discrepancy between the size of the div element and its nested input. This difference in dimensions persists regardless of attempted fixes, leading to frustration in achieving uniform sizing without resorting to hardcoded values.

Efforts to reset styles and adjust properties have failed to eliminate the mysterious extra spacing beneath the input, making it challenging to achieve precise alignment between the parent div and its child input.

htmlcss

Answer №1

The reason is that the input element is set to display as inline-block. By default, it aligns to the baseline and leaves space below it proportional to the text size. However, when using flex or grid, the document flow alignment changes, eliminating the extra space below.

/* div {
  font-size: 0;
}*/

#input-1 {
  vertical-align: bottom;
}
<div id='div-1' style='background:blue; height:100%'>
  <input id='input-1' type='range' style='height:100%; margin:0; padding: 0; border: 0'/>javascript
</div>

<div id='div-2' style='background:red; height:fit-content;'>
  <input id='input-2' type='range' style='margin:0; padding: 0; border: 0'/>javascript
</div>

Upon investigation, I found a way to customize the appearance in Firefox by modifying the CSS for input elements of type range.

input[type='range']::-moz-range-track {
    height: 10px;
    border-radius: 10px;
    box-shadow: 0 1px 1px #def3f8, inset 0 0.125em 0.125em #0d1112;
}

input[type='range']::-moz-range-thumb {
    -webkit-appearance: none;
    height: 10px;
    width: 10px;
    margin-top: -5px;
    background: #ffffff;
    border-radius: 50%;
    border: solid 0.125em rgba(205, 224, 230, 0.5);
    box-shadow: 0 0.125em 0.125em #3b4547;
}

input[type='range']::-moz-range-progress {
    background: linear-gradient(to right, green, white 100%, white);
    height: 10px;
    border-radius: 10px;
    border-width: 0; /* Set border-width */
}
input[type='range'] {
    background-color: transparent;
}
<input id='input-2' type='range'/>

Answer №2

To resolve the issue, make sure to utilize either display:flex or display:grid.

Upon further experimentation, I discovered that by applying display:flex or display:grid to the wrapping div, the problem ceased to exist. While I am eager to comprehend the root cause of this issue and explore alternate solutions, if no other responses are provided within a few days, I will consider marking this as the accepted solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that the footer remains at the bottom of the page regardless of the content above

I am currently developing a website using bootstrap and I am facing an issue with the footer. I want the footer to always stay at the bottom of the page, but when the screen size is smaller (around 500px), the footer moves between sections. Here is the cod ...

htmlcssfooterbootstrap-5

iOS is not receiving JSON data in the response headers

I am currently utilizing the CocoaHTTPServer for establishing my server connection. However, I encountered an issue with retrieving JSON data in the header file of my HTML page (web client). Here is the code snippet : HTML Page : endAPSession: funct ...

javascriptjqueryhtmliosjson

What is the alternative for * in CSS?

I have integrated a plugin into my project that necessitates the inclusion of the following code in its CSS file: *, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } However, t ...

csscss-selectors

How to properly use jQuery to update the text in a <span> tag

$(document).ready( $("#machType").each(function() {$(this).replace('machine1 (windows)', 'Windows Machine 1');})); "; Is the code snippet above correct for modifying the content of a span (enclosed in tags, of course)? Suppose I have t ...

javascriptjqueryhtml

Remain concealed once the lights dim

Looking for a way to fade out a logo in a preloader div after a call, but having issues with it becoming visible again once fully faded out. Ideally, I would like to keep it faded out or set it to display none using only CSS, although I can use jQuery if n ...

jquerycss

Searching and replacing query strings in a URL using JQuery according to the chosen option in an HTML dropdown menu

Is there a way to use jQuery to dynamically change a specific value in the query string by finding and replacing that value based on the selection made from a dropdown menu on the webpage? For example: Imagine we have this query string on the current page ...

javascriptjqueryhtmlsharepoint

Unable to display image on React page using relative file path from JSON data

Greetings, this is my initial post so please forgive me if I have missed any important information. I'm currently in the process of creating a webpage using react. My goal is to display content on the page by iterating over a relatively straightforwa ...

javascripthtmlreactjsjson

Customize Selectpicker Background Color in Bootstrap 5

In our environment, we follow the standard of setting every input field to have a background color of lightgoldenyellow. I am encountering an issue with setting the background-color of the selectpicker in Bootstrap 5. Below is the code I am using: Additi ...

cssbootstrap-5bootstrap-selectpicker

How to position multiple CSS background images effectively?

Greetings all! I'm seeking advice on how to add a background image to the right of the description and left of the first post column. Any tips on proper placement? Appreciate any help :) ...

cssimagebackgroundtumblr

Chrome not displaying Bootstrap dropdowns correctly

Lately, I've been exploring Bootstrap and experimenting with its dropdown menus. Typically, I use Chrome for my work but encountered a strange issue with how Chrome is handling my dropdown menus. This forced me to temporarily switch to Edge. Here&apos ...

jqueryhtmlbootstrap-4

AngularJS tip: monitor the size of a filter in ng-repeat loop

Take this example of a repeated list: <ul> <li class="suggestion-item" ng-repeat="item in suggestionList.items | filter: {id: 2} track by track(item)">{{item.text}}</li> <ul> Is there a way to check if the filter results are n ...

javascripthtmlangularjs

Setting specific variables in an array with corresponding key-value pairs

I need help with extracting specific columns from a table that has 5 columns. The columns in question are: column1, user_id, column3, column4, and user_exp. Let's say I have the following select query: $mat_sql = mysql_query( "SELECT * FROM users ...

phphtml

Creating a custom Vue.js component for specific table cells within a table row - here's how!

My challenge is having related and neighboring table columns grouped within the same component in Vue.js. However, I'm facing a limitation with the template system where only one tag can be directly placed inside <template>. Typically, this wrap ...

htmltemplatesvue.jshtml-table

Creating a table with a mix of fixed and variable width columns

Is it possible to design a table using CSS that has the first three columns with a fixed width in pixels and the rest with a width in percentage like the example shown here: I am familiar with creating columns with variable or fixed widths, but unsure how ...

csswidthcss-tables

Methods to disregard class prefix in css document

When I inspect elements in the Chrome console, I notice styles applied to certain divs/buttons like this: /* Sample Chrome browser styles */ .ItemClass1-0-3-171.ItemClass2-0-3-173: { background-color: "red" } I'm wondering how I can def ...

csssass

Designing an interactive HTML table that adapts to various screen

Currently utilizing Bootstrap to create a responsive HTML table on smaller devices like the iPad, but seeking a more polished and professional alternative. Searching for a JQuery/JavaScript or CSS solution without relying on plugins. Would appreciate any ...

javascriptjqueryhtmlcss

What is the best way to synchronize loading dynamic data with static content while loading an HTML document?

When I visit a web page that contains both static and dynamic text (using AngularJS), I notice that the static data loads first, followed by the dynamic data after a few seconds. This causes a noticeable change in the alignment of the text. Code Sample: ...

htmlangularjsdynamic

Innovative CSS trick for styling checkboxes alongside non-related content

The CSS checkbox hack demonstrated below assumes that the content is a sibling of the checkbox. By clicking on the label, the content will toggle. Check out the DEMO here <input id="checkbox" type="checkbox" /> <label for="checkbox"> Toggle ...

htmlcsscheckboxcss-selectors

Can you help me figure out what's not quite right with my form validation function

I'm struggling with a form that is supposed to validate user input for Name, Email, Phone Number, Age, and Income. The validateForm function should check for errors and display red textboxes and error messages if any errors are found. However, the fun ...

javascriptjqueryhtmlforms

Is there a way to align text without any vertical spacing between lines?

Is there a way to remove the space between these two text boxes? https://i.sstatic.net/MFkuQ.png I attempted using a container with display:flex; in it, but that caused the text to be off-center. body { background-color: lightblue; } h2 { color: ...

htmlcss