How to remove a value when you click outside of a button?
When I click a button I select the ratings value but when i click outside of the buttons I want to remove that value from the variable.
I tried if .hasFocus() and .activeElement is false (probably did it wrong too) then change the variable to undefined but it didn't work for now.
https://stackblitz.com/edit/web-platform-gffhc4?file=script.js...
<system-colors>
Hey everyone, my site I'm working on has a light/dark mode theme and I just finished implementing (making minor tweaks) for users of Windows Low/High Contrast Theme accessibility feature
Codepen Issue
hey just wondering why I cant use the tab button to finish my code in codepen like the way I'm using it before. like I'm typing .container + tab it will make a div class of container for me but now its not working.
How to set dynamically 100vh on a section minus the nav above ?
Hey guys,
so here is the codepen link https://codepen.io/noobcoder137/pen/VwBozdY;
I have a <nav>, <main> and a <section> below other and I want to make my <main> 100vh but minus the <nav> so that I immediately see the next section when I scroll a little bit down. I thought setting the height of <main> to 100dvh but it does not work. The only solution I came up with so far is putting the <nav> inside the <main>, but I don’t want it to be nested....
flex-basis or width for item size in a flex container?
Can somebody tell me which one should I use and why ?
Full width mobile version
For this page: https://chrisbarin.com/membership-account/membership-checkout/?level=1 I'm trying to make "what's included" full width, the same as the box above. I'm editing a plugin with lots of inline CSS so it's far from optimal.
I am not familiar with flex-basis, shrink, grow. I've tried various things but I'm not sure what I need here....
Not able to display data in local storage to form
I was creating a way to save form data even when navigating to another component. The data gets saved to local storage but I'm not able to pre-fill the form using the data stored in local storage. It was working yesterday but today it is'nt working. Can anyone show me what I'm doing wrong. Here is the code for it.
```
ngOnInit() {
this.createRegForm();
...
Spanning columns using CSS Grid
I don't think what I am attempting to do is possible. Based on the hours of reading I've done (CSSTricks, StackOverflow, etc), whenever we are spanning columns with CSS Grid, the grid-column-start MUST be specified. In my case, I would like a particular cell to span to the the last line, regardless which line/column it falls into. Here is some styling:
```CSS
.Grid-Container {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));...
preventDefault() not preventing page refresh on form submit in React
I am currently building a form and somehow the page refreshes when the form is submitted, even though I call
preventDefault() in onSubmit.
Here is a minified version of my React form component:
```tsx
import { FormEvent } from 'react';...how to make my site cool when zoom in and out like other websites
hey everyone i am having trouble when i zoom my site everything get random
media query based on an attribute or media query within an a selector
Hey everyone, I have light/dark mode setup on my website. I'm also trying to handle
prefers-color-contrast: less and prefers-color-contrast: more everything is working as expected but one thing!
if I go to my site when my OS system theme is light, I get my website in light theme and vice versa if I go there when my OS is set to dark, I get my website in dark mode... however, if I click the theme changer on my website it doesn't change my prefers-color-scheme because that's set by my OS settings....Pseudo element only appears on one list item, I thought it would appear on all list items.
I want six green bars I'm only getting one. Why?
If I delete all the other code other than "content" I can fill it with a letter or something and it will work as I intended.
But I can't seem to make it work this way. ...
Footer won't stay at bottom
I am trying to figure out how to get the footer of this page, https://testmage.cluster.helpmefence.com/store/resources-1.html, to stay at the bottom. I cannot recreate this in codepen because many files go into making our pages. Any help would be appreciated. TIA!
Best practice mark up and CSS
Just a couple of question for how to best structure code.
1. I saw in one of Kevins videos that there is an HTML element called
<blockquote>. Should I use that instead of <article> in this mark up?
2. For the large quote signs in red I'm going to use ::before and ::after. Should they be put on the container element (either <article> or <blockquote>), or the first and last <p>
...Calender
Im trying to create a calendar using Python/Django.
So far I got this: https://i.imgur.com/FfnXiUG.png
This is with the calendar library from Python.
This generates a bunch of html:...
Type 'ConnectionState' is not assignable to type 'boolean'
I am getting this error when I use a function to monitor whether the internet is there or not. Can anyone help me to resolve this error? Here is the app,component.ts file
```
import { Component } from '@angular/core';
import { ConnectionService, ConnectionState } from 'ng-connection-service';
...
force Cards to same height
https://codepen.io/ahad4387/pen/wvxLOev?editors=1000
I'm trying to achieve horizontal scrollbar with all cards of same height.
I'm using fixed width right now, but is it possible to make adjust the width to match height of largest card?
i've tried
align-self:normal, i'm not understanding why it's not working...Possible to provide autofill options to the browser?
Pretty much just the above - I'd like to make a form textarea mandatory, but also make the process easy by providing a couple of templates/options to those who still can't be bother to fill it out. Would be nice if I could provide the browser with a few options to populate its autofill.
Help with height responsiveness!
Project link: https://benevolent-seahorse-6c9816.netlify.app/
I drawing a blank in figuring out how to make my mid section follow changes in height.
So if you go into responsive mode, and start stretching screen vertically or diagonally it should do the same, instead of being glued to the top. 😦...