Absolute element breaking parent div layout
Question
I have a problem with my template, my range slider shows the value on top of the slide thumb, with a function I did to change the left of the bubble when the range slider value changes, but this is causing it to break my layout because there is a padding in the parent div
A vertical scroll appears because of the size break:
How I wanted it to look:
// Range Slider var cash = document.getElementById("cashRange"); var output = document.getElementById("output"); var bubble = document.getElementById("bubble"); cash.addEventListener("input", function() { setBubble(this, bubble); }); function setBubble(range, bubble) { const val = range.value; const min = range.min? range.min: 0; const max = range.max? range.max: 100; const newVal = Number(((val - min) * 95.5) / (max - min)); bubble.innerHTML = val; bubble.style.left = `calc(${newVal}% + (${9 - newVal * 0.15}px))`; }
.moneyStyle { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 0px 28px; margin-top: 20px; } div#moneyTitle { width: 100%; display: flex; justify-content: space-between; align-items: center; flex-direction: row; font-size: 15px; color: #252729; font-family: 'Roboto Regular'; } div#moneyContent { position: relative; width: 100%; max-width: 400px; max-height: 300px; overflow: auto; margin-top: 10px; transition: .3s; } #rangeSlider { width: 100%; margin-top: 35px; }.range-wrap { position: relative; width: 100%; /* to view extent of wrap */ outline: 1px solid dodgerblue; } #bubble { background: transparent; color: black; padding: 4px 12px; position: absolute; left: calc(0% + 9px); bottom: 20px; transform: translateX(-48%); } #bubble::after { content: ""; position: absolute; width: 5px; height: 5px; background: red; bottom: 0; left: 50%; }
<body style="padding:60px"> <div class="moneyStyle"> <div id="moneyTitle"> <span>Down Payment</span> </div> <div id="moneyContent"> <div id="rangeSlider"> <div class="range-wrap"> <input type="range" min="0" max="10000" value="0" step="50" class="cash range" id="cashRange"> <output id="bubble">0</output> </div> </div> </div> </div> </body>
1 answers
solution1
0 ACCPTED 2021-01-08 22:24:09
You can use overflow-x: hidden; CSS attribute to hide the scrollbar
Here is your code fixed
<style>.moneyStyle { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 0px 28px; margin-top: 20px; } div#moneyTitle { width: 100%; display: flex; justify-content: space-between; align-items: center; flex-direction: row; font-size: 15px; color: #252729; font-family: 'Roboto Regular'; } div#moneyContent { position: relative; width: 100%; max-width: 400px; max-height: 300px; overflow: auto; margin-top: 10px; overflow-x: hidden; transition: .3s; } #rangeSlider { width: 100%; margin-top: 35px; }.range-wrap { position: relative; width: 100%; /* to view extent of wrap */ outline: 1px solid dodgerblue; } #bubble { background: transparent; color: black; padding: 4px 12px; position: absolute; left: calc(0% + 9px); bottom: 20px; transform: translateX(-48%); } #bubble::after { content: ""; position: absolute; width: 5px; height: 5px; background: red; bottom: 0; left: 50%; }</style> <body style="padding:60px"> <div class="moneyStyle"> <div id="moneyTitle"> <span>Down Payment</span> </div> <div id="moneyContent"> <div id="rangeSlider"> <div class="range-wrap"> <input type="range" min="0" max="10000" value="0" step="50" class="cash range" id="cashRange" style="width: 100%"> <output id="bubble">0</output> </div> </div> </div> </div> </body> <script> // Range Slider var cash = document.getElementById("cashRange"); var output = document.getElementById("output"); var bubble = document.getElementById("bubble"); cash.addEventListener("input", function() { setBubble(this, bubble); }); function setBubble(range, bubble) { const val = range.value; const min = range.min? range.min: 0; const max = range.max? range.max: 100; const newVal = Number(((val - min) * 95.5) / (max - min)); bubble.innerHTML = val; bubble.style.left = `calc(${newVal}% + (${9 - newVal * 0.15}px))`; } </script>
Consider trying this code (It's different from yours):
const range = document.getElementById('range'), rangeV = document.getElementById('rangeV'), setValue = ()=>{ const newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ), newPosition = 10 - (newValue * 0.2); rangeV.innerHTML = `<span>${range.value}</span>`; rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`; }; document.addEventListener("DOMContentLoaded", setValue); range.addEventListener('input', setValue);
body{ min-height: 100vh; padding: 0 10vh; margin: 0; position: relative; display: flex; align-items: center; justify-content: center; } input[type=range] { -webkit-appearance: none; margin: 20px 0; width: 100%; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; animate: 0.2s; background: #03a9f4; border-radius: 25px; } input[type=range]::-webkit-slider-thumb { height: 20px; width: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px 0 rgba(0,0,0, 1); cursor: pointer; -webkit-appearance: none; margin-top: -8px; } input[type=range]:focus::-webkit-slider-runnable-track { background: #03a9f4; }.range-wrap{ width: 500px; position: relative; }.range-value{ position: absolute; top: -50%; }.range-value span{ width: 30px; height: 24px; line-height: 24px; text-align: center; background: #03a9f4; color: #fff; font-size: 12px; display: block; position: absolute; left: 50%; transform: translate(-50%, 0); border-radius: 6px; }.range-value span:before{ content: ""; position: absolute; width: 0; height: 0; border-top: 10px solid #03a9f4; border-left: 5px solid transparent; border-right: 5px solid transparent; top: 100%; left: 50%; margin-left: -5px; margin-top: -1px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Input Range with Dynamic Label</title> </head> <body> <div class="range-wrap"> <div class="range-value" id="rangeV"></div> <input id="range" type="range" min="0" max="3000" value="0" step="1"> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Layout issue with absolute positioned div
Add div to parent with absolute position
Position absolute div with reference to its parent parent
change css in absolute div with parent div id
Center an absolute element below a div?
absolute element scrolls as the div is scrolled
Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery
Getting the parent div of element
Insert a div element as parent
Scroll Div inside Absolute positioned parent
Related Tags