Category "css"

Position DT search box to center of table

I am having a hard time figuring out the code to position the search box from a DT table in a Shiny app to the middle. I'm using a DT extension package, called

Inverting the mask property behind an SVG with css [closed]

I have an SVG and using a mask with a background color to show the SVG, Is there any property that i can use to invert the mask? eg. Normally

Pass CSS value with ngStyle

I've got a service sending a value, which I need it to be passed to the CSS file so I can control how much a meter gauge moves. The value is between 0 and 0.5,

Can my symbol be exactly at the middle of mu button?

I have my "+" that is a little bellow the center in my button. How can he be right in the center? Here is my code: Code

CSS - How to have children divs occupying the same vertical space as the text inside of the parent div

I am a beginner to web development and to CSS. I am creating a div that has text content inside of it. I want some of the text, the one that begins with "@", to

Responsive page: simplest method to transform a row into two or three [closed]

I recreate my first Google-homepage and I struggle to allow my footer responsive in two or three rows when the page size change. Currently whe

How to show alert on browser back button click event using jquery

I want to show alert while clicking on the back button in the browser. it only works before clicking on the back button, when you click to somewhere else on the

Button with transparent background and rotating gradient border

What I'm trying to achieve is a button like Once it's done I need to animate on hover. The closest example I could find is this codepen https://codepen.io/Ches

HTML Javascript image slider - adding slide animation/

I made an image slider that work, but now I'm trying to add an animation effect to it, and I believe JavaScript may be the answer for that. I'm trying to add th

How to center h6 tag inside flex box [duplicate]

I can't center horizontally a h6 (or any) tag inside a flex div. I think I've tried all the CSS approaches align, justify, etc, but nothing wo

A different version of the Japanese flag (the rising sun) using canvas

There are lots of hints on how to create the flag of Japan using only CSS/HTML. It is possible, with canvas to recreate the Rising Sun. It isn't an exact replic

React heroicons icons are always black

I'm using @heroicons/react: ^1.0.5 and I'm trying to style the icons by applying another color. I'm using tailwindcss to manage my CSS. When I declare the follo

How can I change the background color based on a value?

I'm learning React and this question came up. Can I change the background color depending on the variable value that came as a prop? thanks import React from 'r

How do I get smooth scroll and scroll snap to work together in React while also persisting user scroll position on refresh?

I have a custom hook that persists the user's scroll position on page refresh. I also want to implement smooth scrolling for my navigation links (site is a sing

Have a navigation bar on right in order [closed]

I've an issue with the order in a navigation bar to recreate the Google page with a proper order. I tried flex-direction: row-reverse; but i

CSS Animation Keyframes not working on Iphone/Ipad

I have made a keyframe animation with words shifting in the end of the sentence. It works in Chrome, but doesn't work in Safari. What am I doing wrong? This is

How to wrap 2nd div to collapse top first?

I want to wrap the Column 2 to be at the top as it will contain a cover image. I have an example HTML below * { box-sizing: border-box; } /* Container for

FlowType.js and flexbox doesn't work together

so Iam using FlowType.JS it works and the text become I mean the the text become responsive. but if I wrote display: flex; or width: fit-content; the FlowType.J

Dynamically set background color based on value from DB

The db stores hex values which will then be used to set the background color of the div. How can I pass the value which is coming through from the DB to the css

How to prevent paragraph from expanding bootstrap's col-auto parent width?

I'm using bootstrap's row with two col-auto. Inside the second, I have a form with <input>'s and a paragraph <p>. This second column should have a m