Category "css"

Coloring Connected Components D3 V3

I am working in D3 version 3, and I have a simple working program that can read a JSON file and convert it into an animated, linked graph. I was wondering if th

Chrome does not support the css @page?

I have css for print as simple as this: @page { @top-left { content: "TOP SECRET"; color: red } @bottom-center { content: counter(page);

Flexbox scrollable columns

I'm struggling to make the below design work. What I want is: Fixed height header fixed width sidebar Sidebar and content to always fill down to the bottom of

SVG add text along the circle arc

I'm trying to draw SVG radial pie chart as mentioned in here: colour chart. Now I'm trying to add text to each slice along with the arc. I'm trying to show Text

How to detect if the OS is in dark mode in browsers?

Similar to "How to detect if OS X is in dark mode?" only for browsers. Has anyone found if there is a way to detect if the user's system is in the new OS X Dar

Preloading Google Fonts

Light House audit is suggesting that I preload key requests, specifically the two google fonts that I'm using in my React app. A Light House member suggested us

CSS border shorthand when each border has a different width

Hi, what is the shorthand for border when borders have different width? I tried this: border:1px solid black, 2px solid black, 3px solid black, 4px solid bla

HTML: insert image at select tag

Question i want to make my select tag like google's one this is mine This is my code `<script > function format(state) { if (!s

CSS: Animation vs. Transition

So, I understand how to perform both CSS3 transitions and animations. What is not clear, and I've googled, is when to use which. For example, if I want to make

How to make list items of one UL with fixed height be displayed as columns?

For example, i have such a list: 1 2 3 4 5 6 7 8 and i want it to look like 1 5 2 6 3 7 4 8 So, how to make it work without any javascript? I have such

object-fit: get resulting dimensions

When using the new CSS feature object-fit, how can I access the resulting dimensions that the browser has chosen by JavaScript? So let's assume foo.jpg is 100x

Avoid user interaction on "disabled" table row

I've got an HTML table which has some of its rows 'disabled'. I'd like to show it clearly to the user, so I apply a blur filter to the tr, having a table like t

Adding custom CSS and JS to Shopify

I am working on getting vertical tabs for a page on Shopify, using the 'Atlantic' theme. As this theme does not have vertical tabs by default, I have used the

PrimeNG calendar clear current/today date when the user selects some other date on the calendar

I'm using p-calendar in my app to take input from the user for a particular time. The calendar works fine. However even when I click on some other date on the c

SVG element width and height set in html but appearing as 0 0 in inspector

I have an svg rect like this: <svg class="legend-square"> <defs> <pattern id="pattern1" width="3" height="3" patternunits="us

CSS for Angular .cdk-virtual-scroll-content-wrapper not applied

I want to customize a <cdk-virtual-scroll-viewport> by using the CSS class .cdk-virtual-scroll-content-wrapper so that the scroll container always shows a

HTML tbody only is only one header column width

I have a problem in HTML. I want to make a table with a fixed header and a scrollable body. The body (tbody) is composed of the rows of the table, and the head

Sticky navbar disappearing

My sticky navbar had disappeared and text is over the video which should start below it. https://github.com/shanegibney/stackoverflowStickynavbarIssue There i

Not respecting z-index on safari with position: sticky

I'm been having some problems with my site redesign, I have a section of goals in the case study that is sticky and once you pass an image that goal gets crosse

Why is my picture stretched on mobile iphone safari?

In the second picture there is android, everything works fine. But on iPhones 7 on safari the image is being stretched vertically. Why is this happening? My htm