Skip to main content

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.

css
Filter by
Sorted by
Tagged with
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 ...
Henry's user avatar
  • 167
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 = ...
Nam Hoàng Phương's user avatar
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 ...
Jubayed Hosen's user avatar
-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&...
Heaven Touch's user avatar
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 ...
Max Alexander Hanna's user avatar
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 ...
Ramitha Pathmila's user avatar
-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 ...
nOraKat147's user avatar
-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 ...
INA's user avatar
  • 1
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 ...
johann1301s's user avatar
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, ...
Kenneth ma's user avatar
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 ...
nateowen's user avatar
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://...
Ángela's user avatar
-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 ...
Alexander Ites's user avatar
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 ...
Zytonox's user avatar
  • 31
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 ...
Apryed's user avatar
  • 13
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; ...
ShadowedTotem's user avatar
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 ...
Jim Morrison's user avatar
  • 2,153
-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? ...
newuser's user avatar
  • 507
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 ...
c2-mrinal's user avatar
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', ...
user24838028's user avatar
-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 ...
Collab Werks's user avatar
-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 ...
knoxix's user avatar
  • 1
-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 ...
CtrlAltDeplete's user avatar
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 ...
Mahesh's user avatar
  • 992
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 ...
Sidharth Bajpai's user avatar
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"> ...
Nitin Avula's user avatar
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 ...
Valentine Lancin's user avatar
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/...
Richpoort123's user avatar
-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....
Block_Cipher's user avatar
-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">...
Oleg Kasaev's user avatar
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. ...
antjuh's user avatar
  • 27
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, ...
IT Champ's user avatar
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....
Abhishek Sharma's user avatar
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: ...
carl carl's user avatar
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(...
Happy Coder's user avatar
  • 4,475
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 ...
Ben Holness's user avatar
  • 2,595
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 &...
Gon Amparo's user avatar
-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 ...
Alban Personnaz's user avatar
-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 ...
Lucas Styles's user avatar
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? ...
Steve's user avatar
  • 1,240
-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 ...
daahg's user avatar
  • 1
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 ...
shnznnn's user avatar
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=...
Lúcio Benfica's user avatar
-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=&...
eren9677's user avatar
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 ...
Pongramer's user avatar
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?...
albertkao9's user avatar
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 ...
Jafes's user avatar
  • 59
-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 ...
Matteo Congiu's user avatar
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 ...
tech27's user avatar
  • 95
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....
Krunal Jethva's user avatar

1
2 3 4 5
16101