Is it possible to have a vertically scrollable div with an always visible scrollbar without the scrollbar affecting the width of the elements inside?
I attempted some CSS modifications, but the scrollbar still reduced the available width of the div. Is there a way to achieve this desired behavior?
If you want it to function specifically with the webkit pseudoclass, you must implement it in this manner
.scrollbar {
margin-left: 22px;
float: left;
height: 180px;
width: 200px;
background: #F5F5F5;
overflow-y: scroll;
margin:10px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
margin: auto;
}
#style-1::-webkit-scrollbar {
width: 20px;
}
/** STYLE A */
#style-1::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: green;
}
#style-1::-webkit-scrollbar-track {
border-radius: 10px;
background-color: red;
}<div id="wrapper">
<div class="scrollbar" id="style-1">
<div class="force-overflow"><h2>A</h2></div>
</div>
</div>
<div id="wrapper">
<div class="scrollbar" id="style-default">
<div class="force-overflow"><h2>B</h2></div>
</div>
</div>I am focusing solely on -webkit-scrollbar
Check out my website at bee-barcelona.herokuapp.com I'm facing an issue where the menu overlaps with the logo when I resize the browser or view the webpage on a tablet. I want to fix this using CSS. What changes do I need to make to ensure that the e ...
My goal is to dynamically change the column number and header of a table based on the return value of an AJAX call in conjunction with DataTables jQuery plugin. Below is the JavaScript and jQuery code I am currently using: $( document ).ready(function() { ...
Currently, I am in the process of enhancing a Classic ASP application. Within this application, there is an HTML table that is populated from a SQL database. One cell within the table contains checkboxes. Upon clicking one of these checkboxes, a popup wind ...
I have a table with 2 columns and an "add row" button. However, I want to add a new row between the rows with the classes "title" and "ongkir". Currently, the new row is being added after the "ongkir" row. Can someone please assist me in achieving this? B ...
I'm facing an issue with sending email from a form. Every time I submit the form, I receive an "error occurred" message as specified in my if else statement. This prevents the mail from being sent. Can you help me troubleshoot this problem? Below is t ...
I'm currently developing a web application that utilizes the svg and Raphael library: workflowEditor.show(); var myList = document.getElementsByTagName("rect"); for (var a = 0; a < myList.length; a++) { myList[a].addEventListener("OnClick", f ...
After utilizing CirculaProgress, I was able to achieve the following: Is there a simple method to transform it into a semicircle like shown here? ...
How can I display multiple rows returned by JSON using my JavaScript function? function getScheduleDate() { //alert("enters1"); //var usrname= getParameterByName('uname'); var postVal=$.post('http://localhost/ipack/salesvisit.ph ...
My journey with JHipster began recently when I embarked on my first project. Two entities were created, one of which resembles a blog. This particular blog entity has a content attribute that interacts with a textarea. In my blogs.html file, I allowed the ...
Let's say I have an aspx textbox with id="txtkms". In the HTML view source, it appears as ContentPlaceHolder1_Gridview1_txtkms_1. I'm curious if this control will always be rendered as ContentPlaceHolder1_Gridview1_txtkms_1 every time I run my as ...
My cat image on my website appears significantly lower than all the other images when viewed on Internet Explorer (v11). While it looks perfect in Chrome, I cannot figure out why this discrepancy exists. For the development of this website, I utilized pred ...
I've been struggling to implement a drop-down select in conjunction with a table on a page using knockout bindings. The issue arises when I try to use the mapping options in the knockout binding plugin – either the drop-down or the table behaves inc ...
Is there a way to set all font properties for H1-H6 headings in one CSS declaration? CSSLint.net is flagging multiple definitions of heading styles as an issue. I currently have specific styles for each heading level: h1 { font-size: 1.8em; margin-top: ...
I've created a JavaScript program that utilizes node.js to manage GPIO from an IO.html page to the beaglebone. I simply initiate the JavaScript with "node myscript.js". Now, I'm looking to incorporate a PHP file that will store data from the IO. ...
Issue: I have a modal form that is loaded via an ajax call. Inside the modal, there is a span element containing an email address. I am trying to capture the value of this span element using JavaScript. Currently, I have a button click event that triggers ...
As a dedicated frontend developer, I believe in creating underlines with a 2px padding instead of the default 1px. Is there an easy solution for achieving this? PS: Yes, I am aware of using a div with a black background color and 1px * Npx with position: ...
Whenever I click on a text-box, a popup window opens up. However, the value is not inserted in the text-box when I select any radio option in the popup. Can you identify where the problem lies? Here's the text-box: <tr><td> Work </td& ...
I'm struggling with breaking the navbar to have the navbar-brand in one row and the collapse menu in another. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d0601060013 ...
I have successfully integrated a Tableau dashboard/worksheet into my website using an iframe. I want to create navigation on the parent site that allows users to interact directly with the embedded dashboard by switching between different views, instead ...
Trying to incorporate a linkifying script on a website, which transforms URLs in text into clickable links. Utilizing the following solution: https://github.com/SoapBox/linkifyjs To make it operational (post-download), the following steps are required: & ...