Category "css"

How to create a zig zag pattern using CSS

On a repeated background, the edges of the repeated tiles don't align exactly on certain zoom levels. This leads to unwanted edges as the color of the backgroun

Star and Half Star Rating in Laravel

I want to display average product ratings in star. The values are displaying good but I want to show half star if the value is in float. My blade view: <div

How to convert these inline style in html into react?

Hi Inside the html people use these kind of styles to animate. I am actually following the pen from alphadex Link. I never see this kind of writing in HTML befo

Angular 12 css fallback

Angular 12's css are generating a fallback for css's variables. How can I prevent that?

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