Clientwidth scrollwidth and offsetwidth all are showing same value for a DIV with horizontal scrollbar

Question

0.00/5 (No votes)

See more:

Hi All,

I got a div named as "ExpenseRecordedList" and it got few columns. Just below the div, there are 2 buttons and I am trying to maintain a padding bottom of 12px for the div.

So, when the div has no horizontal scrollbar there is padding bottom of 0 and still a gap is there between the div and the buttons but when the scrollbar appears, the gap is being occupied by the scrollbar and so padding-bottom is needed to maintain the gap between the div and the buttons.

What I have tried:

I tried the following javascript function, which is trying to find the difference between clientWidth and the scrollWidth and on that basis the padding-bottom is being set to 12px or 0.

window.addEventListener("load", function () {
	if (document.getElementById('ExpenseRecordedList'))
		setPaddingBottom(document.getElementById('ExpenseRecordedList'));
})

function setPaddingBottom(recordedList)
{
	if (recordedList.clientWidth < recordedList.scrollWidth)
	{
		recordedList.style.paddingBottom = '12px';
	}
	else
	{
		recordedList.style.paddingBottom = '0';
	}
}

I have set overflow-x as scroll for the div, in the .css file.

Note:
While debugging I found that the clientWidth and scrollWidth are showing the same value and so the above function is not working.

Posted 1-Aug-24 8:55am

Member 11072126

Add a Solution

Comments

Graeme_Grant 3-Aug-24 10:02am

We can't see you code unless you post it here. Create a simple page and css to demonstrate the issue. Then use the Improve question link to update the question.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andre Oosthuizen · Answer 1 · 2024-08-04T03:37:00

Without your actual code in CSS, HTML it is difficult to understand exactly what you are asking, from the little above you can however achieve the same result with just using CSS and HTML -

CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buttons with Spacing and a Horizontal Scrollbar</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            min-width: 500px; /* Force horizontal scrollbar, you will see the result in the fiddle below when you resize your browser screen... */
        }

        .wrapper {
            padding: 20px;
        }

        .container {
            width: 100%;
            height: 200px;
            border: 1px solid #000;
            margin-bottom: 12px;
        }

        .button-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px; /* Space for horizontal scrollbar */
        }

        button {
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <p>Content goes here...</p>
        </div>
        <div class="button-container">
            <button>Button 1</button>
            <button>Button 2</button>
        </div>
    </div>
</body>
</html>

I made a fiddle that seems to work fine - Space a DIV, Buttons with and without Horizontal Scrollbar [^]

The code should be self explanatory.