I’m working on a navigation component and want the nav element to be visible, using display: block when it has :focus-within for keyboard navigation. This state seems to be applying when I click the nav button, but remains visible when I hover sibling elements. I would like the focus-within state to be hidden when a… Read More Hiding element visible with :focus-within when sibling has :hover state
I’m attempting to only allow 5 radio buttons to view instead of all, and if you want to see more you should be able to scroll to the right. Image 1 css code has width: 300px; Image 2 css code has width: 160px; (cutting it at 5 items) As you can see when I make… Read More Radio buttons change size instead of cutting off and showing overflow-x scroll bar
I am trying to create a range-input with a maximum and minimum input. I habe achived this so far: HTML <div class="zimmer__price"> <input type="range" min="200" max="500" step="50" value="50" id="lower"> <input type="range" min="200" max="500" step="50" value="500" id="upper"> </div> JS: upperSlider.oninput = () => { lowerVal = parseInt(lowerSlider.value, 10); upperVal = parseInt(upperSlider.value, 10); currentPriceRange[1] = upperVal; currentPriceRange[0]… Read More Range-input with two Inputs can be dragged over each other
I wrote to terminal: npx create-react-app my-app –template redux-typescript then i wrote npm install -g sass and i see in therminal changed 17 packages in 2s 2 packages are looking for funding run `npm fund` for details PS D:\WEB\portfolio\pizza> but in my package,json i don’t see it "dependencies": { "@reduxjs/toolkit": "^1.9.2", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0",… Read More Module Error (from ./node_modules/sass-loader/dist/cjs.js): Cannot find module 'sass'
I am learning HTML/ CSS and JS. I am making my first website and I have a problem. How can I change the background in the container under the pictures, to my color. On the internet I only find bg-secondary etc and I need for example #82b5cf. I also have a question, I want to… Read More How to make a background in a container and put the text in the middle of the photo? HTML/ CSS
I have a form with various input controls set up like this: <div class="form-group mb-3"> <div class="input-group"> <input asp-for="Email" class="form-control" /> <div class="input-group-append"> <div class="input-group-text"> <span class="fas fa-envelope"></span> </div> </div> </div> <small> <span asp-validation-for="Email" class="text-danger"></span> </small> </div> And I have a SCSS file that changes the border width on active and focus: .form-control:focus, .form-control:focus:active {… Read More How to set border of another element when an input control has focus?
.class-action:hover, .class-action.activeOne { color: black; font-weight: bold; } .class-action.activeOne { margin: 3px 0px; border-bottom: 2px solid black; } is there a way to stack these css code? I dont want to repeat same class again. I want all four style for ".class-action.activeOne" and only above 2 style when ".class-action:hover" other option is below, but it… Read More How to make css not repeat same class?
I’m trying to color a div element in two colours. I want, that the color of the header is another than the color of the body. The body has the color class blue or green (depends on use case – angular html code). My problem: If I define background-color: x for class header, then there… Read More Two colors in a div element
In the folder app, I created a folder styles > custom > loader.scss. Then, in the styles.scss file, I add this import: @import "styles/custom/loader.scss"; The problem is that I have an error message: ./src/styles.scss – Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): @import "styles/custom/loader.scss"; I don’t know how can I solve this problem, please. Files structure:… Read More Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js)
Here is what I want to get. The black part is the container div. width 100% The blue part is the main header text div, And the pink one is the button that should be placed at the right of the container div. Question: How to center header text, so it will be the center… Read More How to center text, if there is item at the right of line