
I am automating an web application and I need to type in a value in an input text box.
My plan is to develop an friendly function, where in if I pass the label associated with the text , I should be able to enter the value. In this scenario, I am not dependant on xpaths or anything else, only the...

I want to build a non-scrolling web page (a "dashboard"), for use on desktop monitors or large tablets. It will have two sections: an area for images that have been scaled to fit the available space, and a list of descriptions of recent updates. Each description will be short and will be able to ...

I am working with react-virtualized and have a custom header along with a long list. I was able to fix (freeze) the first and last columns in the header while scrolling horizontally, but I am unable to do the same for the first and last columns in the virtualized list where rows are rendered.
I h...

Very similar to this SO question, I would like to move the previous/next arrow buttons. I want to move them so that they inline with dots, and the result should look like this:
Default placement for the arrows in slickR are to the sides of the carousel (code to produce is below):
According to t...

i'm trying to make it so when you click on image 1, image 2 appears. Right now image 2 is always visible and if you click on image 1, image 2 disappears. also image 2 wont let me change it's position but image 1 will??.
var barImage = document.querySelector('#bartender img');
barImage.onclick...

I work with emails semi-regularly, so I am familiar with a lot of the common issues, such as Outlook in general and some Gmail stuff. However I am having trouble getting some text to align properly in the Gmail app. On Android 13, it is rendered correctly:
Anything before 13 looks like this (thi...

I'm using Konva.js to draw interactive shapes on top of an existing HTML element on the page, like this:
<div id="mainContainer">
<div id="otherStuff"></div>
<div id="konvaContainer"></div>
</div>
where both inner divs are set to position: absolute; so they fill the container and overlap...

How can I make an SVG in HTML fit into a single screen without scrolling?
I have a bottle shape that I designed in Figma and exported as an SVG tag element, which I want to display on a webpage such that it's centered and fills the screen as much as possible (preserving aspect ratio) but does not...

When working with React and the endless VSCode libraries we got used to tracking files and components with cmd+click (at least I did).
However, when working with Laravel (in a new VSCode profile) I couldn't activate this tracking functionality.
attempts:
✅ Intelephense PHP extension
✅ Add an alia...

I am trying to make a header that stays fixed when I scroll down, but it only goes until the end of the header, which is set to 100vh. Does anyone have any idea how I can solve this without stopping using min-height?
I tried using JS to replace the class with fixed so that it only fixes after scr...

I tried using a Bootstrap cover page that is created in .html but, when attempting to include it inside a .cshtml file, I could not get the desired result.
The moment I attempted to translate the HTML code to the Razor format, the design and layout of the page were not what was expected.
The cont...

Upon creating my session after logging into my page i am trying to get my page to display the username you are currently logged in with, upon completing login and getting the success message my session is being created and 'Session is active' is being displayed, as checked with:
if (session_statu...

I'm not even sure what the term for this is, so I'm going to use an example. If I write 1st or 2nd then often the st and nd are small and at the top of the line, not at the bottom of the line.
How do I code this?
Specifically looking for how to code it in sigil, which doesn't seem to recognise sp...

Need assistance with Blockchain.com? Call Blockchain.com Support Number +1 801-801-9940 for expert help. Resolve issues and optimize your accounting. A blockchain contact number is a dedicated phone number +1 801 801 9940 that can be used to seek assistance or information related to blockchain te...
math.SE
math.SE

I am on my first JavaScript project and I am building a weather app.
I was able to extract the 3 hourly forecast Data but It is only showing the first data. Like only 21:00 data in my html but the rest is not reflecting. It should have shown all the able for cast data. While writing my html I wro...

I am in the situation that I have a website and want to implement a dropdown menu there.
I chose a dropdown because the space for the button is limited and there is no space to display a full menu bar.
There are a lot of subitems and subgroups in this menu. It should be possible to click on the g...
math.SE
math.SE

I am trying to get Preline UI to work with a prefix. I found this issue here:
PrelineUI plugin not working, causing a few components which uses JavaScript to not work
which solves the problem for an offcanvas. I tried to use it to generalize to other things such as selects or dropdowns, but with ...
math.SE

I've been trying to create an advanced pricing calculator showcase for my client's website.
Here is what i actually need;
I'will have 3 different price and value changer;
Employee
Office Number
Benefits
As you can see on the image, those 3 price/value changers will do change 4 different values ...

How can I create the effect shown in this image, where the part of the image under the mouse pointer appears to bend or warp as the cursor moves over it? I am new to web development and don't have any experience with implementing such interactive effects. Could you please explain if this effect ...

I have a two column table, which I would like the first column sized to fit max-content and the second column to take the remaining space. Neither column has a defined absolute or percentage width. I also need the table to be fixed width and not expand past the parent element.
The second column w...

I'm using Vaadin 23.3.2 and the Grid component. I'm not using Spring-Boot.
I need to apply a CSS style to the cells, while not applying to the header-cells.
I have a number of columns that are dynamic (I can have as few as 5, but can be up to 15 as well).
I tried using CSS selectors (but I'm unfa...
math.SE

Form.tsx
'use client';
import { FC, useEffect, useState } from "react";
import styles from '@/styles/Discuss/Form.module.css';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowDown } from "@fortawesome/free-solid-svg-icons";
import { useTranslations } from "next-...

While exploring CSS, I came across a website where the button borders had a glowing effect, as if light was wrapping around them. This inspired me to design my own buttons with a similar effect, but with text moving around them instead. Is it possible to achieve this? If so, how should I proceed?...

So I've been using :has() quite a while now because according to CanIUse this has been broadly supported. Now I'm using Lambda Test to review my site across browsers and devices. I noticed that :has() doesn't seem to be working on all browsers on android devices lower than version 13.0 (not brows...

I am trying to set records per page value whenever my webpage loads. This value is a dropdown, but I want to set it to static value of 50.
I have written a java script to achieve this but i am getting how to set the value always to 50.
Below is my Jscript
$(document).ready(function(){
if ...

I’m using Gulp v5.0 to compile, minify, and clean the CSS for my application. I've migrated from CommonJS to ES Modules (ESM) in my Gulp setup.
There’s a custom component (maintained by another team) that I’m integrating into my project. I don’t have permissions to modify this component, so I nee...

CSS relative color is a game changer, especially when coupled with CSS variables as overriding few variables can generate a whole new theme.
That's great but when you work from a page sample and you don't have a graphic designer at hand that's tedious. Do you know an online tool (or a browser ext...

CSS relative color is a game changer, especially when coupled with CSS variables as overriding few variables can generate a whole new theme.
I'm looking for a pure CSS way to turn a color from a variable into:
a dark one if it's light
a light one if it's dark
I believe that if there is a soluti...

I work on a project in vue js. I want to create a website with several pages (routers). Therefor I created a breadcrumb trail component to show the current pathway. I am new to vue js but I think I am on the right track.
But have some minor bugs which I cannot fix. I don't want the ">" seperator...

A series of multiple-choice survey questions (say total 20q) are shown on a PHP site, one question per page.
User keeps selecting answer option for each q (shown 1 question per page).
Responses are locally stored (like in a PHP text string), and are recorded in a db once they finally hit submit ...

I have an <img> element and at the moment I am specifying explicit values for its width and height in the CSS with no such attributes in the (X)HTML. The PowerMapper tool complains about this, saying that the page layout will ”jump about“, which I take to mean that the page will be repainted with...
« first day (2358 days earlier) ← previous day last day (1 day later) »