Category "css"

Number of sibling elements in a calculation in SCSS

I'd like to customize an animation in SCSS based on how many sibling elements the animated element has. The full SCSS code is here for reference, however the re

Make custom checkbox switch Label element a11y tab / keyboard accessible

So I'm trying to make custom slider that's cross browser (IE11, Chrome, Firefox, Edge) that's also a11y accessible and I'm having trouble getting the label elem

How to test CSS properties defined inside a class with react testing library

I am trying to test CSS properties that i have defined inside a class in css, wing the react testing library. However I am unable to do so. Adding the simplifie

@media query not working with 2 display: none; tags

I created a website and I used 2 divs, 1 has all the code for the desktop layout and one has all the code for mobile, I did this and would like to keep it this

Why are the "date" and "time" entries not displayed correctly in Google Chrome Mobile?

I have a small scheduling system that I developed (Look here). The "date" and "time" entries are showing normally in most desktop and mobile browsers: But for

.cdk-drag-preview not applying styles

I am using the cdk Drag and Drop from angular material, but the drag preview is not working as intended.. I want the preview to look exactly like the element be

Scroll to next or previous elements

I have a scroller that contains max 3 elements and has down arrow to go down to next elements and up arrow to go back to previous elements but i'm having troubl

How does a background photo crystallize when the mouse hovers over the title hover in my custom elementor element?

I want to write a special css for an element in the elementor plugin How does a background photo crystallize when the mouse hovers over the title hover? I wrote

How Can I make onclick event on a li with pseudo-element ::before

I have created a Timeline using and elements. The result looks like that: I need to click on the second circle and automatically the line that is between f

How to change color of a select on keypress

I am trying to create a form. I am using a <datalist> tag as well as an <input> tag, so that a user can also type an option or just select an option

how to make event title appear in multiple lines full calendar version 5 (resource timeline view)

this is my initial view of calendar initialView: 'resourceTimelineFiveDays', Here is my code . I have added white space to be normal, even then its not workin

Image modals on multi-tab page

I want to create a multi-tabs page with an image modal on each tab. I used code from w3school.com. The modal only shows on the first page but not in the others.

How to align right in BootStrap 5.0 for the components?

I am actually trying to do this online course and in that the instructor uses Bootstrap 4, but I decided I could do BootStrap 5.1. I am trying to make my naviga

Using CSS hover property in Angular directive?

Here is the directive, the default one. import { Directive, Input, Renderer2, ElementRef } from '@angular/core'; @Directive({ selector: '[newBox]' }) export

Override PrimeNG component CSS

I am using PrimeNG OverlayPanel to be displayed in dropdown click but I have a problem to move default left arrow to right position. I tried everything that was

Bootstrap 4 - Make a Table Header Sticky

I have a simple Bootstrap 4 Table and would now like to make the header fixed/sticky so that it doesn't scroll as it contains a lot of rows. I've found several

Chrome's subpixel rendering affecting fixed/absolute positioned elements

I have a electron based application that provides a CAD like experience for mining engineers. This software includes a crosshair cursor: wide cursor that is st

How to make a marquee animation which never leave the view blank ? With images

I am trying to make a marquee animation, but i can't manage to make it perfect. As you can see when a logo goes out of the page it do not get back from the othe

elements over video in native full screen mode - SAFARI

This bug is appearing only in Safari on Mac OS and only with the current set up in our application. Initially I though it was a z-index issue, since some elemen

can't get image and text to align with CSS/flexbox under the navbar

I've been trying to align text to the right of an image but no matter what I do -- when the text line gets to be too long -- it keeps showing up right underneat