I'm facing an issue with my HTML/CSS layout where the map element (#map) is not displayed on smaller screens, while the map settings (map-settings) are visible. Here's a simplified version of my code: <!-- index.html --> <!DOCTYPE html> <html lang="en">…
This is server.js which I am starting in cmd using node server.js: const express = require("express"); const path = require("path"); const app = express(); const port = 3000; app.use(express.static('/public')); app.get("/", (req, res)=>{ res.sendFile(path.join(__dirname, "views/index.html")); }); app.listen(port); This is a section…
I need to create a menu that works this way: when you hover over a menu item, a list appears at the bottom of menu item. When I move the mouse to another element, the list smoothly slides to that…
I'm building a tasks-to-do application using electron. As I'm new using it, I have found a lot of problems to make the tasks already uploaded persistent in the application. I'm creating the tasks through a form completed by the user.…
I have two slider bars that should output a number each. My first is outputting a number in ` however I cant get the second slider bar number to out put. Can someone see why ?` function slider_value(value) { var…
I am using a display:list-item for the div pseudo-element::before. We can style the shape of the marker either disc or square... .calendar{ display: block; position: relative; width: 100px; aspect-ratio: 1; background-color: green; } .calendar::before{ content:"Reserved"; display: list-item; position: absolute; bottom:…
Basically i want to give some transition to input by padding bottom placeholders on focus, but it's not working .formInput{ transition: padding-bottom 0.3s; } .formInput:focus::placeholder { padding-bottom: 100px !important; } I can give it a color and it will change…
When I try to load css file along with bootstrap, my css file doesn't work but bootstrap works fine. I don't know what went wrong and it annoys me the fact that something that supposed to take minutes to work…
Having a page where we require that if container width is below view size then change 5 columns into 2 columns and trying below: .list { background-color: grey; display: grid; grid-gap: 4px; grid-template-columns: repeat(5, 1fr); container-type: inline-size; } .letter {…
I'm trying to detect selection changes within a textarea element on my webpage. I attempted to use the selectionchange event, but it doesn't work: const textarea = document.getElementById('myTextarea'); textarea.addEventListener('selectionchange', (e) => { console.log(e); }); body { padding: 20px; } textarea…