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.
805,017
questions
0
votes
0
answers
14
views
Next Page when data is full in A4 size using html Javascript
I have a problem which I can't move data from next page if it is already exceed in the a4 size currently it will auto expand the container div and it did not create new page if data is full or exceed ...
0
votes
0
answers
5
views
Repeater ACF WORDPRESS is not wordking
<?php
// Check rows exists.
if( have_rows('accordion') ):
// Loop through rows.
while( have_rows('accordion') ) : the_row();
// Load sub field value.
$sub_value1 = ...
0
votes
0
answers
8
views
Webflow Tab Data Change
Dropdown Change with it's Data
All Data and Image will be changed.Here we have three item.When any user change data for comperision. it only change one row data.Also It's change it's image also when ...
-2
votes
3
answers
21
views
Having trouble adjusting the height of my card in bootstrap
<div class="card border-dark bg-white text-dark" style="width: 400px; height: auto; margin :10px auto ">
<div class="card-header">
<h3&...
0
votes
0
answers
9
views
Prevent clickable div from being searched in Android WebView
Theres a google search drawer that appears if you repeatedly touch on a div, I guess it is to help you search for whatever is in the div's content.
How can i prevent it from opening? (Especially when ...
0
votes
0
answers
27
views
How to align items vertically in css?
I tried a lot of codes but I couldn't find any exact solution for that. Finally I almost fount a solution but I also want to float items to right. I tried 'float:right' but it isn't working with the ...
-4
votes
0
answers
16
views
Can you recommend a good LAMP working environment ( i.e. Frameworks, Libraries)? [closed]
I am getting back into programming again after a long hiatus.
I am working on a personal website that will sell music.
Previously I was making websites from scratch using LAMP stack and maybe ...
-1
votes
2
answers
29
views
Want to add tag at the top left of a product card
I want to make a tag for a card on my website for a new product. My idea is to have something like this
in the top left corner of the card.
I am writing about this, because I need help making the css ...
0
votes
0
answers
15
views
Create CSS grid that collapses columns if text in containers are to long to fit
Problem:
I want to create a CSS grid that contains 2 columns, but collapses into 1 column if the text/content inside any of the containers are to long to fit. The grid width should be 100% of its ...
0
votes
1
answer
11
views
How to make a Flexbox that spaces items evenly while also allowing partial filling of rows? A mix of space-evenly & flex-start
* flex box stuff */
display: flex;
/* this makes it fill from left to right, leaving empty space on the right */
/* justify-content: flex-start; */
/* this makes it all fill evenly, ...
0
votes
0
answers
13
views
Update background style and Postgres table using onValueChange with Next.js and shadcn
I have the following code and I am trying to update the background color of my TableRow element while also updating "State" column in my "Devices" table in my Postgres serverless ...
0
votes
0
answers
7
views
Problem with my table head alineation caused by DataTables jquery plugin
enter image description hereI am not sure if I am repeating the question if yes guide to the right place :)
I am using Data table and trying to implement Horizontal Scrolling from this link
https://...
-2
votes
1
answer
23
views
How to position a div (caption) relative to an image centered inside a container div?
I have a div container centered both horizontally and vertically and an image inside it which is also centered horizontally and vertically to use the container space as much as possible. Image can be ...
2
votes
1
answer
21
views
What is a top margin that has clearance?
According to the WC3 specification:
The bottom margin of an in-flow block box with a 'height' of 'auto' collapses with its last in-flow block-level child's bottom margin, if:
the box has no bottom ...
1
vote
1
answer
25
views
Combine Dropdown Div with a ToolTip
Can't seem to make it happen for some reason. Either .ToolTip just appears ( instead of a gentle dropdown ), or .ToolTipText won't appear and .ToolTip have a weird transition ( Like opening/closing ...
1
vote
1
answer
11
views
Why doesn't the dropdown for "Kontakti" work?
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#navbar {
background-color: #f2f2f2;
...
0
votes
0
answers
13
views
Can I target a css grid-auto-flow: dense element by position? [duplicate]
When you lay a number of dynamic elements out with display: grid it's often desirable to let the browser shuffle the elements a little to fill the gaps in the grid using grid-auto-flow: dense.
Once ...
-1
votes
1
answer
26
views
How to zoom on specific parts of the image when scrolling
I want to develop a website somewhat similar to https://www.nytimes.com/interactive/2021/04/02/arts/design/shah-jahan-chitarman.html
how can I zoom on specific parts of the image when scrolling?
...
0
votes
1
answer
10
views
Tooltip Blinking Issue on Hover over Skill Bubble (React & d3)
I'm encountering an issue with tooltips on my website where they keep blinking when hovering over skill bubbles. I've implemented the tooltips at a fixed location, but whenever there's a bubble on ...
0
votes
0
answers
16
views
How to have separate CSS files for separate JavaScript files using Webpack?
I am trying to use two separate css files for two seperate HTMl page files using Webpack.
This is my webpack config file:
const path = require('path');
module.exports = {
mode: 'development',
...
-1
votes
0
answers
10
views
Bootstrap 20px padding or margin [duplicate]
In bootstrap, we have 16px and 24px spacer we use for padding or margin. How can we achieve 20px spacer in bootstrap? I am thinking to update the SCSS variables. But, how can we add a spacer between 3 ...
-5
votes
0
answers
22
views
I can't create a CSS file in VS Code [closed]
I'm trying to create a CSS file, but it seems that it's not supported or something else is wrong. Does anyone have any idea what it could be? I'm new to VS Code and web development. When I create a ...
-1
votes
0
answers
23
views
CSS transition doesn't work if same property is animated [closed]
I have an element with id of lightning and class of either active or inactive. The active class has an animation that changes the opacity, while the inactive class has a set opacity. The lightning id ...
0
votes
0
answers
8
views
Page level scroll bar while using flex shrink
I am trying to develop a a page that has column layout with three elements such as sub header, content and footer. I want to keep header, sub header and footer to stick but content should have ...
0
votes
1
answer
18
views
Any opposite of [&:not(.<class-name>)] in Tailwind / Plain CSS / SCSS? (Add class only if another specified class is attached to the element)
I have class="hover:[&:not(.ng-invalid)]:border-gray-500", which adds gray color to input border only when .ng-invalid class is not attached to that input while hovering over it.
Is ...
0
votes
0
answers
12
views
Prime ng: Programatically size the p-accordion which is present inside a p-splitter
Please see my component code below:
I have a p-splitter which is split into 3 sections.
I have a p-accordion in each section, which in-turn has a p-table.
<div class="card w-full">
...
0
votes
2
answers
32
views
Popup HTML: The content is not showing when the button is clicked
The popup content isn't showing on click.
I will only put the shortened version of the code.
When the button is clicked, the content should be showed.
The html button will trigger the js code to set ...
1
vote
1
answer
22
views
Web Site SideBar Content
When I click on one of the options in the SideBar, I want the content related to it to open on the right side.
I wrote the code below, but even though I reach the "http://127.0.0.1:5000/...
-1
votes
0
answers
17
views
issue related to document when i download the certificate.pdf in my pc it is not working?
Actually i'm working a web project so i have make a certificate page for my web site so it is not working pls help me figure out
Here is my code actually it is working all right only the certificate....
-4
votes
0
answers
30
views
Which is better (inline style or classes) and why? [closed]
I need to change the visibility of div. Is it acceptable to write inline style in div in a small project? Here's an example:
FIRST:
<div class="test" style="display: none">...
0
votes
3
answers
40
views
How do I add a CSS class to an element if selected using React?
below I have a series of React code that has several circles displayed on a page, each with a different color. When a color is clicked, the nav displays that change by reading off the selected color.
...
0
votes
1
answer
38
views
CSS Styles not being applied to html page in chrome
I have applied styles by using internal css code, however the styles don't seem to be applied to the html web page in the browser. I have troubleshooted everywhere yet I still cant fix it. Weirdly, ...
0
votes
0
answers
17
views
How can I create an interactive image carousel where clicking a button on an image displays the next image in the carousel?
I have created one react.js component to create carousel. And second component that show button (Hotspot) on image.
But I did not manage to combine both.
I created first component called ImageCarousel....
0
votes
0
answers
27
views
Animation looks broken on Webkit based Browsers
I have this animation which works perfect fine on browsers like Chrome, but the moment I try it on Safari it looks broken and doesn't do what it is supposed to do.
.progressIndicator {
stroke: ...
1
vote
0
answers
13
views
How to smoothly hide table header information and adjust height of table header on scroll with jQuery?
I am working on a web page that includes a table with a sticky header, specifically the section as shown below:
const $tableContainer = $('.matrix-container');
const $table = $tableContainer.find(...
0
votes
0
answers
12
views
Is it possible to set easing for scroll-behavior: smooth in CSS?
I have a div with overflow-y:auto; set. Some javascript scrolls that div to specific positions based on user input.
In the CSS for the div, I have scroll-behavior: smooth;.
I would like to be able to ...
0
votes
0
answers
17
views
CSS transition applied through JavaScript problem
My button transition to the second one is good and working but I want the background to be included in the transition, for example, In the first page I have blue background, A description box, and a &...
-2
votes
0
answers
8
views
flexbox problem (flex-col -> basis) with Tailwind
I don't understand why my image change the height of my div, I'm in flex-col so basis change the height and not the width (in flex-row). So I have an height defined by my basis-28 but with my image ...
-4
votes
0
answers
26
views
How do I connect an php based project to a different website [closed]
How am I supposed to connect this php based password manager to a website i created
I tried to open the php website but wasn't able to open it and also i tried href link in html but that doesn't work ...
0
votes
1
answer
28
views
How to position image side-by-side with text input using Bootstrap 5
I'm trying to position a magnifying glass image to the left side of a text input. It is being rendered above the text input. What is the right way to keep them side-by-side with Bootstrap 5?
...
-7
votes
1
answer
32
views
trying to understand a source code: purpose of div wih no content but class [closed]
This question is not a coding problem, I am trying to understand a piece of code of a website, as this is something I have noticed in other website source codes as well. Basically, I want to ...
0
votes
0
answers
11
views
Adapt the titles of my navbar so that each title is placed in each allocated position in an image which will be the background of the navbar in CSS
I want to make sure to adapt the titles of my navbar so that each title is placed perfectly in each allocated position in an image which will be the background of the navbar in CSS.
I would also like ...
0
votes
3
answers
27
views
How do I display a window with information when hovering over an image?"
My code:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=...
-3
votes
0
answers
42
views
img tag Can't find src [closed]
I can't put product photo inside tag. here is that part of the code :
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce"
class=&...
0
votes
0
answers
12
views
Css module hides cookiebot banner in Nuxtjs
I'm implementing Cookiebot by adding the code to the head element tag using useHead in Nuxt.js. The issue is that the Cookiebot loads initially, but after a couple of seconds, it disappears. I tried ...
0
votes
0
answers
5
views
Replace @ngbracket/ngx-layout MediaObserver with Angular Material CDK Layout BreakpointObserver or even only CSS
An Angular project uses '@ngbracket/ngx-layout' MediaObserver.
Is it possible to replace it with only CSS?
If not, is it possible to replace it with Angular Material CDK Layout BreakpointObserver?
How?...
0
votes
0
answers
35
views
CSS transition for background picture does not work
I have an "a" element which works like a button, it has a background picture. I need the background picture to become slightly bigger on :hover with 0.3 second transition. The background ...
-2
votes
0
answers
21
views
Substitution of HTML body in Oracle APEX
I have to convert a Figma project (HTML and CSS) into an Oracle APEX application. Starting with the layout, I'm trying to pass the body of the html to the body of the template of the main page in APEX ...
1
vote
0
answers
30
views
Infinite horizontal scroll animation
I am trying to make an infinite scrolling animation without "blinking" and empty spaces. The problem is when I'm using max-width of 1300px and my text inside list element is short, I still ...
0
votes
0
answers
24
views
Browser Mobile emulation functionality in my site without using inspect tool
I'm working on a functionality where users can configure a screen and specify the resolution at which the configured screen will be displayed. I've implemented this using a fit layout and grid systems....