The dynamic columns in the grid are showcased with a seamless transparent background

I am currently working on a dynamic grid structure in my project, using div layout. The number of columns and rows can vary as they are retrieved from the json data in AngularJS.

The grid should allow both horizontal and vertical scrolling when the columns or rows (or both) exceed the available width.

To address this, I have implemented the following CSS:

.wrapper {
  white-space: nowrap;
  overflow-x: auto;
}

However, the main issue I'm facing is that the background colors do not apply to the columns and rows that extend beyond the grid's width.

Expectation: I expect both the header (columns) and data-list (rows) to inherit their respective background colors.

Check out the Demo here!

htmlcssangularjs

Answer №1

Revamp your style with CSS

.header .display-data {
  background: lightblue;
}

.data-list .display-data {
  background: white;
}

Check out the latest DEMO

Answer №2

The issue arises from the CSS code used to determine the width of the columns on your webpage. You have employed width: calc(100%/3) for each .display-data column, despite having four such columns.

As a result, you are assigning a total width of 133% to the four columns, while the parent .header element only spans 100%. Consequently, the last 33% remains outside the .header's coverage and is not displaying in blue as intended.

A straightforward solution would be to adjust the .display-data style to width: calc(100%/4).

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

Using Bootstrap v4 to create an Inline Select with Text

Currently seeking an inline dropdown styled with Bootstrap v4 that resembles the following: https://i.sstatic.net/ZTs8b.gif I have experimented with several options, and so far the closest one is as follows: <div class="dropdown"> <button cla ...

cssdropdownbootstrap-4

The updated version of Angular from 13 to 16 has implemented a new default value for primary colors

I recently upgraded my angular (+material-ui) system from version 13 to 16, and encountered an issue with the primary color of my custom theme. It seems that the value is no longer being recognized and defaults to blue. After updating the angular version, ...

cssangularsass

Select the fourth element in a list using CSS

Is it possible to style the fourth child differently using the ">" selector like so: .thisclass > ul > li > ul > li { color: blue; } I am working with WordPress and trying to avoid creating additional CSS classes. Is there a way to apply s ...

htmlwordpresscss

Uncovering the Origins of Angular Console Errors

Note: This inquiry will be updated to remove outdated question with lower rating. Encountering AngularJS console errors like: Lexer Error: Unexpected next character at columns 0-0 [#] in expression [#]. https://i.sstatic.net/lWzxv.png The challenge now ...

angularjsconsole

What is the proper way to submit a variable?

Allow me to clarify my situation as I believe my initial explanation may not have been clear enough. I am currently developing a webpage in Visual Studio using C#, however, my question pertains to the HTML aspect of it. I have successfully implemented loc ...

htmlvar

AngularJs, simplifying logic in web pages

I'm currently working with an HTML template that has some complex conditionals in the ng-ifs and ng-shows. For example, here's how I determine if payment controls should be displayed: <div ng-show="ticket.status == 0 && ((ticket.or ...

javascriptjsonangularjsasp.net-web-api

Guide to executing a batch file using electron

I've been struggling all morning to find a solution. I've gone through several tutorials, but I still can't wrap my head around how this should work. In my Electron app, there is a button that, when clicked, should execute a batch file (hpm ...

javascripthtmlcsselectronelectron-builder

Is there a way I can insert an additional image directly behind my existing image using a pseudo element before or after? I tried it but it doesn't seem to be working. Are there any alternative methods I could try

Currently, I am attempting to include an additional image behind my current image by using a pseudo-element before, but unfortunately, it seems to not be working as expected. Are there any alternative methods to successfully add an image behind the origina ...

htmlcsscss-selectorspseudo-element

In a responsive design, rearrange a 3-column layout so that the 3rd column is shifted onto or above the

My question is concise and to the point. Despite searching online, I have not been able to find any information on this topic. Currently, my layout consists of 3 columns: ---------------------------- |left|the-main-column|right| ------------------------- ...

javascriptjqueryhtmlcssresponsive-design

Customize GridView Appearance in ASP.NET

After using the examples provided at this link, I was able to get everything working smoothly. However, the issue I'm facing now is with the style of the GridView. When the gridview first loads, it looks perfect. But when I click on the Edit button, t ...

cssasp.netgridviewstyles

Tips on triggering Angular's $asyncValidator on blur while keeping the normal validators triggered on input

Can Angular 1.3's $asyncValidators be set to only trigger on blur, without firing as the user inputs? I want the $validators to work as usual. I'm aware that using ng-model-options can update the model onBlur, but it causes all validations to oc ...

angularjsvalidation

Retrieve the specified text style calculation in Python without having to render the full HTML page

Suppose I have an HTML input html='''This is <b>Bold</b> or <strong>Also Bold</strong> or even <font style="text-weight: bold">Style Bold</font>''' My goal is to extract only the bold word ...

pythonhtml

Streamlining form submission processes with VBA automation of check box selections

Currently, I am facing a challenge with automating the process of filling out a web form using VBA. Specifically, I have hit a roadblock when it comes to selecting a checkbox in the form before proceeding. Here is the HTML code pertaining to the checkbox: ...

htmlvbaautomation

angularjs dropdown - customize selected item appearance

My dilemma involves a list of countries, each with a code and name. When the list is expanded, I aim to show "code + name" (e.g. "+44 United Kingdom"). However, once a country is selected, I only want to display the code ("+44"). Is it achievable using Ang ...

javascriptangularjshtml

Issue with Karma: encountering error "ocLazyLoad initialization failed"

While attempting to run the tests from the quickstart sb-admin-angular, I encountered an error stating unable to init ocLazyLoad. (This issue is occurring on a Windows 7 machine.) The command I am using to run the tests is: $ grunt test --force After re ...

javascriptangularjsunit-testingkarma-runneroclazyload

Tips on adjusting the size of a font icon using an inline element prior to the font being fully loaded

I'm facing an issue with embedding an icon font within text so that it wraps properly. Currently, the only way I can achieve this is by using &nbsp; between the text and the icon (i tag with font awesome). However, this causes a problem as the ico ...

htmlcssfont-awesomeicon-fonts

Issue with jquery_ujs: Font Awesome spinning icon animation functions properly in Chrome but not in Safari

I've integrated font-awesome-rails into my Rails project. When a user clicks the submit button on a form: The submit button should display an animated font-awesome spinner and change text to "Submitting...". The button must be disabled to prevent m ...

jquerycssruby-on-railsrubyfont-awesome

Browsing across pages seamlessly without the need to refresh the browser

I need help with making my admin panel built using Bootstrap and integrated with Laravel navigate through tabs without refreshing the browser. Can anyone provide guidance on how to modify the code to achieve this functionality? You can check out the admin ...

javascripthtmlcsslaravelbootstrap-4

Having trouble with the last child not appearing after in Chrome? Is there a problem with the pseudo-element usage?

Encountering a peculiar issue specific to Chrome (no problems in FF and Safari, not concerned about IE) that raises questions regarding whether it's a bug, incorrect usage of pseudo elements, or the compatibility of combining pseudo classes and pseudo ...

htmlcss

Learn how to interact with elements in Selenium ChromeDriver by clicking on them even if they have negative x and y pixel locations

I am currently dealing with a website that features pop-up tables triggered by user interaction. These pop-ups contain important data, but occasionally a technical issue arises where the top of the pop-up window is positioned off-screen, making it challeng ...

javascriptc#cssgoogle-chromeselenium