Display the background color on the entire width of the child element within a horizontally scrolling container

When I scroll horizontally in a div, the background-color of .filesColumn:focus does not fully display across the width.

If I add overflow-x:auto to .fileColumn, it displays the full width.

How can I ensure that the background-color of the child element is fully visible when I scroll horizontally in the containing div.contentModel?

Please refer to the code snippet here: jsfiddle

html,
body {
  height: 100%;
}

body {
  padding: 10px;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  border-radius: 7px;
  background-color: rgba(16, 40, 136, 1);
}

.contentModal {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

.filesColumn {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(16, 40, 136, 1);
}

.filesColumn:hover {
  background-color: rgba(48, 88, 184, 1);
}

.filesColumn:active,
.filesColumn:focus {
  background-color: rgba(79, 134, 235, 1);
}
<div class="container">
    <div class="contentModal">
        <a href="#" class="filesColumn">ABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
        <a href="#" class="filesColumn">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
        <a href="#" class="filesColumn">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
    </div>
</div>

htmlcss

Answer №1

Make sure to set the .filesColumn class to have a display property of inline-block, and do not include the width: 100% property.

html,
body {
  height: 100%;
}

body {
  padding: 10px;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  border-radius: 7px;
  background-color: rgba(16, 40, 136, 1);
}

.contentModal {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

.filesColumn {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(16, 40, 136, 1);
}

.filesColumn:hover {
  background-color: rgba(48, 88, 184, 1);
}

.filesColumn:active,
.filesColumn:focus {
  background-color: rgba(79, 134, 235, 1);
}
<div class="container">
    <div class="contentModal">
        <a href="#" class="filesColumn">ABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
        <a href="#" class="filesColumn">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
        <a href="#" class="filesColumn">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
    </div>
</div>

Answer №2

It appears that there is a bug with JSfiddle causing issues. I suggest checking out this working example on codepen instead. http://codepen.io/anon/pen/EZebBB


html,
body {
  height: 100%;
}

body {
  padding: 10px;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  border-radius: 7px;
  background-color: rgba(16, 40, 136, 1);
}

.contentModal {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

.filesColumn {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(16, 40, 136, 1);
}

.filesColumn:hover {
  background-color: rgba(48, 88, 184, 1);
}

.filesColumn:active,
.filesColumn:focus {
  background-color: rgba(79, 134, 235, 1);
}

Answer №3

Hopefully, this resolves your issue :-) 

html,
body {
  height: 100%;
}

body {
  padding: 10px;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  border-radius: 7px;
  background-color: rgba(16, 40, 136, 1);
}

.contentModal {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

.filesColumn {
  display: inline;
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(16, 40, 136, 1);
}

.filesColumn:hover {
  background-color: rgba(48, 88, 184, 1);
}

.filesColumn:active,
.filesColumn:focus {
  background-color: rgba(79, 134, 235, 1);
}
<div class="container">
    <div class="contentModal">
        <a class="filesColumn">ABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
        <a class="filesColumn"></a>
        <a class="filesColumn">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWX</a>
    </div>
</div>

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

Having trouble with the basic function of jQuery radio buttons, unable to make them work properly

Struggling with my first attempt at incorporating jQuery into my project. I have set up 2 radio buttons on a form, and I want the selected option to update the value of an input text box within the same form. However, despite my best efforts, I just can&ap ...

jqueryhtmlradio-button

When a response is not being sent, what will be the value of ajax.responseText?

I have created a JavaScript function to validate the availability of a username in a database using AJAX. If the username is not available, the AJAX sends a text response back that changes some CSS properties and adds an error message. However, when the ...

phpjavascripthtmlajaxresponsetext

Dealing with a problem when using ng-repeat in Angular to generate a dynamic

I am using ng-repeat to populate all the necessary rows, but I am encountering an issue with differentiating between each row in terms of user input. Currently, when a checkbox is selected in one row, it gets selected in all others as well. I feel like I ...

javascripthtmlangularjshtml-table

When using a custom selection color to highlight underlined text, the underline becomes invisible

I am currently working on a website where I want to customize the text selection color. ::selection { background-color:#00ffff; } However, there seems to be an issue in this specific situation: p::after { content:"Try selecting the above elemen ...

htmlcssselection

Switching the display of a Bootstrap navigation dropdown

After building a Bootstrap menu with a lightbox effect that overlays the page content when expanded, I encountered some issues. I attempted to use JavaScript functions to hide and display the lightbox_container element when toggling the nav. However, addi ...

javascriptjqueryhtmlcssbootstrap-4

I'm feeling pretty lost when it comes to understanding how line-height and margins work together

When creating a webpage layout, my goal is to maintain balance by ensuring there is an equal amount of spacing between sections and elements. However, when dealing with varying font sizes and line heights, achieving this can be challenging. To provide fur ...

htmlcss

locomotory mesh decentralized sorting

I am attempting to implement in-browser sorting for my flexigrid. Currently, the grid is displaying data from a static XML file exactly how I want it, but the table itself does not sort because it is working off of local data. While researching solutions, ...

javascriptjqueryhtmlflexigrid

Creating interactive button elements in daily views with FullCalendar and Vue3

For the screen design, I have opted to go with Vuejs and specifically using the FullCalendar library https://i.sstatic.net/pn4ic.png The FullCalendar component has been successfully added. I am facing difficulties in rendering a button with DaycellConte ...

javascripthtmlvue.jsfullcalendar

Enhance Website Functionality with Dynamic Tables and Spreadsheet Features

Currently, I need to incorporate spreadsheet-like functions into a table on my website. Initially, I explored KendoUI but realized it might not be within my budget constraints. Is there a more affordable alternative available? Key features I require inclu ...

javascriptphphtmlcodeignitertabular

My CSS file is not matching up with my SCSS file

Just getting started with SASS and feeling a bit confused. I'm using PyCharm for my development, and it seems like the best practice is to do all my CSS work in the SCSS file and then link to the generated CSS file in my HTML. My question is, what ha ...

pythoncsssasspycharm

Dragging an image within a div using JQueryUI

Something strange is happening with my code. I am utilizing JQueryUI to enable dragging of div elements that contain an image tag. The issue arises when I start dragging the div - the image, which was perfectly centered within the div while stationary, now ...

jqueryhtmlcssjquery-ui

Working with multi-line HTML content within Javascript

I am currently using JavaScript to define the behavior of a button on a website. I want the button to add new HTML content to a specific part of the page, and I would like to use the MVC extension method Html.EditorFor to create this new HTML. Here is wha ...

javascriptjqueryhtmlasp.net-mvc

Attempting to enhance my show/hide DIV code to efficiently target multiple divs

Currently, I am faced with a challenge involving a lengthy case study that includes numerous images. The loading time for the page is exceptionally long due to the high number of images. To address this issue, I have implemented a method using show and hid ...

htmljquerycss

What is the best way to remove the default outline in the <img> tag?

<img class="image_cover" src = "" /> .image_cover { width:25px; height:25px; border-style:none; border: 0; box-shadow:none; } Showing an example in a live demo on jsfiddle Encountering an issue in Chrome Version 33.0.1750.152, ...

htmlcss

display a div positioned relatively next to another div

I'm having trouble displaying a textbox next to another div on my webpage. Instead of appearing next to the div, it is showing up below it. The textbox needs to have an absolute position. You can see the issue in action by checking out this demo. Than ...

javascriptjqueryhtmlcss

Enter a number into a text box and increase the value in several text boxes created with jQuery in PHP

I need to dynamically populate textboxes with student information from a database after inputting a value, for example 100, and clicking on the 'Add' button. The challenge is to incrementally assign values to each textbox based on the initial num ...

phpjqueryhtmlajax

Retrieving the CSS property value from a website with Selenium

Hello there! For the purpose of verifying the font size of a CSS element on getbootstrap.com using Selenium in the Firefox browser, I rely on this particular script: #!/usr/bin/env perl use strict; use warnings; use Test::More; use Selenium::Firefox; my ...

cssseleniumperl

Tips for effectively passing a parameter in @url.Action

I stumbled upon this piece of code: <button type="button" class="btn btn-inverse btn-danger" onclick="@("window.location.href='" + @Url.Action("ActionName", "ControllerName") +"'");"> Link </button> for redirecting- it works gre ...

jqueryhtmlasp.net-mvcrazor

By setting the overflow-x property to hidden on my container, I have inadvertently disabled the sticky positioning

How can I make an element sticky when scrolling and hide horizontal scroll on mobile? I'm having trouble with horizontal scrolling on iPhone. Can you help me troubleshoot this issue? Thank you. .sticky-sidebar { position: -webkit-sticky; posit ...

htmlcssbootstrap-5

When using $dialogs.create on my website, a popup form appears with specific formatting limitations dictated by the defining code

When a user clicks a button on my website, a function in the controller is triggered. Here is the function that runs when the button is pressed: $scope.launch = function(idOfSpotOfInterest, schedOfSpotOfInterest){ var dlg = null; dlg = $dialogs. ...

javascriptjqueryhtmlangularjstwitter-bootstrap