Questions tagged [css]
CSS (Cascading Style Sheets) is a representation style sheet language used for describing the look and formatting of HTML (HyperText Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, fonts, and animations. It also describes how elements should be rendered on screen, on paper, in speech, or on other media.
806,225
questions
0
votes
0
answers
14
views
How to automatically change the background color on left side of an HTML range slider?
I'm making an HTML music player project and I'm trying to make the left part of the <input type="range" value="0"> slider be black.
The slider is to show how much a song has ...
-3
votes
0
answers
10
views
I'm unable to see output on screen using Tailwind css
enter image description here
after trying multiple things i'm still unable to see tailwind css components on screen.... Someone pls help. I have already done many things. I doubt there's something to ...
0
votes
0
answers
11
views
Horizontal scroll exceed parent width
I have problem with horizontal scrolling, when slide-wrap width is smaller than parent width, then is inside q-page, but when I set width i.e. to 100% it is wider than parent. How to adjust width of ...
- 144
0
votes
1
answer
13
views
How to Align Checkbox with Paragraph Text in a Flexbox List Item Without Margins Interfering?
<li class="task-list-item">
<div style="display: flex; align-items: flex-start;">
<input type="checkbox">
<div>
<p>
&...
- 164
0
votes
0
answers
8
views
React & Cypress Component Tests: How to pass an object to an imported library in the Cypress setup?
I'm setting up Cypress to run component tests on a React-based app. The app uses multiple libraries, which I cannot change in any way. Although the app runs perfectly well, I'm unable to get any ...
- 537
0
votes
1
answer
10
views
Uneven spacing between flex items when using flexbox
NavBar.js
import React from "react";
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import './NavBar.css';
function NavBar() {
const heading = 'first ...
- 21
0
votes
2
answers
49
views
Creating a title for an HTML page
I've started creating a simple page for an assignment and I'm trying to put a title at the top of the page but whenever I create a paragraph or h1 to do so it's placed next to the divs with the ...
- 5
-4
votes
0
answers
28
views
thay đổi màu ký tự bằng css trên blogspot [closed]
I want to change all the colors of the chords with the form [Am]. [Dm] [C] on all my posts from timhopam.com to red by default for easy distinction.
Please guide how to change them by Css or ...
0
votes
0
answers
11
views
sticky worked fine but after adding menu navbar it broke right now not working
I was using the CSS position: sticky on my sidebar so it moved down as the user scrolled. However when I added the mobile menu which transitioned in from the right, the sticky sidebar broke. Could not ...
0
votes
0
answers
12
views
Make font in embedded SVG the same size as in surrounding HTML [duplicate]
Is there a CSS-only way of making the font of <text> elements inside an embedded SVG conform to the font size of the surrounding HTML? <text> elements scale according to the viewBox ...
- 2,124
-1
votes
0
answers
29
views
How to add a horizontal scroll onclick with a button or arrow?
I am trying to add a simple button to scroll horizontally, not using any libraries or anything just want to keep it simple. As of now I have the cards flowing horizontally in one row and there is the ...
- 1
-3
votes
1
answer
33
views
Including navbars using Php [duplicate]
I've been working on my first ever fully fledged web project to try and learn php, and after copying and pasting my top navbar into the 15-ish pages that I have and the styling for it into the 15ish ...
0
votes
0
answers
12
views
Data resolution are not changing when try to minimize the resolution
In Firefox browser, when opened in normal form all data moves towards right, while it appears correctly in Chrome and Edge. Also when I tried to minimize the resolution in edge or chrome all data ...
- 15
0
votes
0
answers
11
views
How can i call the object parametr inside the object
I have some array with objects and i need to define condition of style showing which connected with one of the object attribute
const location = useLocation();
const userLinks = [
{
title: ...
- 1
2
votes
0
answers
31
views
Detecting CSS @scope support with JavaScript
Is there a way to detect @scope support via JavaScript?
I've tried: CSS.supports('@scope') or CSS.supports(':scope') but both of those are returning false in browsers that do support it.
I tried CSS....
- 5,573
0
votes
0
answers
24
views
Workaround for chaining ::part() selector with other selectors in chromium based browsers?
I was trying to use chain :disabled, :not([disabled]) and/or :not([aria-label='']) with ::part() but I have found that it does not work in chromium based browsers as mentioned in the answer here. It ...
-1
votes
1
answer
25
views
Password visibility is not showing in chrome and firefox
I am currently developing a C# application and aiming to ensure compatibility across all major web browsers. However, I've encountered an issue specifically with the password visibility icon. This ...
- 15
-3
votes
0
answers
22
views
Loading local host slow [closed]
So i am doing a project using Laravel Php, so actually the project has been upload on live server, and the issue i am having is i am task with modifying the webpage a little, but the issue is after ...
- 25
0
votes
0
answers
28
views
How to use event.target.closest for navbar html javascript css?
I'm making a navbar. On click of items which has subnav pages, the navigation item/expands or collapses.
Here's the HTML/JS/CSS snippet.
const navHasChilds = document.getElementsByClassName("...
0
votes
2
answers
38
views
Why is flex item not taking up the whole parent height?
My goal is to make a cart. That displays items with it's attributes, name, picture etc.
I got the layout as I desired. However the cart-product-quantity won't take up the whole height. I could set ...
- 55
0
votes
2
answers
22
views
How would I simulate an Intransitive zIndex in React Native? (A > B > C > A)
I am trying to create this effect, which can be found in the Spotify UI:
It seems that there are the following components:
A parent <View> (black)
The child <View> (pink)
The <Text&...
- 48
0
votes
0
answers
33
views
How to make curves on the sides at the bottom of a section [duplicate]
On different sections I have curves at the bottom like the ones in the picture. The picture now shows a section of the main banner. border-radius makes the rounding too steep, I need it more smoothly. ...
- 915
0
votes
1
answer
49
views
Styles not being applied in Chromium based browsers
I'm working on a project using Angular as the FE framework. I've a simple project setup as following:
In the angular.json file I'm importing these files:
"styles": [
"src/import....
- 3,342
0
votes
0
answers
24
views
How can I make part of vuetify dialog transparent?
Here is our question dialog, which was written by Vuetify v-dialog.
How can I make the red framed part become all transparent and this part still included in v-dialog, I have seen the documentation ...
- 349
0
votes
1
answer
24
views
The background div becomes pixelated when blurred
I added a white div with 50% opacity (just div, not image) to a black background. When I apply a blur effect, it becomes pixelated. I also tried using a div with a backdrop filter, but the problem ...
- 1
0
votes
0
answers
13
views
How to debug scroll event fired a lot later than the pointermove event?
With Chrome's 20x slowdown + device emulation, you can see that the first scroll event occurs 230ms after the first mousemove event:
On Android (a flagship 2023 phone), without any artificial ...
- 25.6k
0
votes
0
answers
16
views
Image as background of data labels i.e as background color in chart.js [closed]
Is there any way to add image as background color i.e different image for background of each data label. If there is please let me know.
I tried doing it by putting images in an array and equating it ...
-1
votes
0
answers
15
views
Select Multiple area on image using drag and create hotspot in angular 8/ javascript
Hi all,
I want to implement a feature where user can select multiple rectangular area on image and create hotspot.
Once user click and drag from one position to second position it will draw like ...
- 73
0
votes
0
answers
13
views
Tom-select ordering within optgroup
I am having an issue with tom-select, where the order of elements within an optgroup is not being preserved. Based on this docs, I thought that all I had to do was:
new TomSelect("#sampleSelect&...
- 412
0
votes
1
answer
77
views
Button adding event has no effect
I am studying html, css, and js.
Add click events to the arrow buttons of flickity,
I used addEventListener. However, I got the following error.
TypeError: Cannot read properties of null (reading '...
- 1,681
0
votes
1
answer
26
views
Children in flexbox not responding to order and align-self
I am trying to create a responsive island scenescape by overlaying three elements: I would like to place the palm tree on the sand island to the left, and position the text to float in the space to ...
- 1
0
votes
2
answers
41
views
Fill row with fixed max-width elements
When there is free space in the container, the browser increases the width of the elements to fill it.
I need the opposite behavior, so that the browser shrinks the width of the elements enough to ...
- 1
0
votes
0
answers
31
views
Does having elements in the DOM with `display:none` makes the browser slower?
I am not a good JS programmer and I dont know for sure how to profile this specific case. In a page I have 100 divs (all of them are visible and occupy space in the screen) and below each visible div ...
- 2,011
-2
votes
0
answers
35
views
How to refer to a CSS file using javascript? [closed]
I want to be able to access and change a css file through a javascript file. I am using tampermonkey and can't edit the css file directly.
I've looked up this problem and everyone keeps describing ...
0
votes
3
answers
34
views
text-overflow ellipsis doesnt with symbol !!! when using with webkit
i have a css as below
div.b {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
display: -webkit-box;
-webkit-box-orient: vertical;
...
- 390
0
votes
3
answers
32
views
Custom Two Column Layout
I have a problem with my display of two columns in my HTML code.
Top part of the two columns:
Space on the 1st column, the paragraph on the 2nd column was pushed down due to the image:
Here's my ...
-4
votes
0
answers
22
views
Why won't CSS hide this class? [closed]
I have a Shopify powered store and am trying to hide the class "hulk-powered-wrapper" on this page: https://www.palmettowoodshop.com/pages/contact-us
Screenshot showing text I want hidden
I ...
- 1
0
votes
0
answers
20
views
WordPress: How can I make a submenu block the content below it?
How can I set my dropdown menu so that it covers whatever content is below it and I can still click the links? I'm creating a page with several menus stacked on top of each other, but when the ...
- 13
-1
votes
0
answers
25
views
About p tag overflowing div tag [closed]
the problem is happening on chrome and edge. but mozilla works fine
look p tag is overflowing div tag
expected output:
what is limitation of my code that the problem is happening on chrome but not ...
0
votes
0
answers
19
views
Issues with an element not resizing vertically
I'm making a website layout made to look like the old Windows95 paint window, and I've come across an issue in making the canvas 'window' resizable. It works horizontally, but not vertically. The ...
- 1
0
votes
0
answers
13
views
84 I am working on selenium automation project using Python. I am getting an error .NoSuchElementException:
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.common.exceptions import ...
0
votes
0
answers
14
views
How to make two overlapping mat-sliders moveable?
I want to have two overlapping mat-sliders, but when I set it in below way,I'm able to move only second one...
<h1>EXAMPLE</h1>
<div class="sliders-wrapper">
<mat-...
- 235
0
votes
2
answers
39
views
background-image cover by grandparent width, overflow property doesn't works
Using background-image for pseudo-element, parent overflow:hidden property doesn't affects pseudo-element background-image and don't hide part of it. Where is problem? I want to hide background that ...
- 169
0
votes
2
answers
19
views
Flex container not reaching max width before wrapping children
In this snippet, the inner-left element gets a new item added to it every time the Add Item button is clicked. It has a max-width of 50% of the parent width, however the flex items are being wrapped ...
- 2,469
-3
votes
0
answers
23
views
How to make something save/automatically change 24 hours [closed]
I'm making a website and one of the components is that the text within an element automatically changes every 24 hours, and it stays that. How do I achieve this?
I am expecting it to automatically ...
0
votes
0
answers
18
views
Linked Stylesheets in Angular: Understanding Inline Inconsistencies
I ran into a problem with how Angular handles styles: With some linked stylesheets, Angular makes them inline on build, but with other linked stylesheets it doesn't. In neither case are any of these ...
0
votes
1
answer
20
views
How do I make column fill available space without table overflow?
I am trying to make a responsive table where:
Columns 1-3 and column 5 will always autosize to fit their content.
Column 4 will occupy all remaining horizontal space.
Column 4 will never wrap text (i....
- 3,124
0
votes
2
answers
48
views
How to make a receding flipped corner with CSS
This is what I am trying to build, an orange column that is sitting higher than the purple row with an inward flipped left corner:
I am probably not using the correct terminology to do my research, ...
- 475
0
votes
0
answers
36
views
Problem with CSS :valid pseudo-class and required input
I am learning front-end and PHP. I was able to come up with this little form behaving almost perfectly the way I want it.
The problem is, some inputs are not required, that being the case, they are ...
0
votes
4
answers
52
views
How to break a flex into new row for dynamic data [closed]
I am working on a video calling application using reactjs. LocalTile component contains video of local user and RemoteTiles is returning videos of all remote users. My desired layout is like for 3 ...
- 25