Questions tagged [css]

CSS (Cascading Style Sheets) is a representation style sheet language used for describing the look and formatting of HTML (Hyper Text 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.

-3
votes
0answers
11 views

how to create an counting up number like progressive jackpot

how to create an progressive jackpot numbers, that can counting up but with slow duration and have an separator... you can see the source at www.qq288uu.com, at the progressive jackpot side (Main page)...
-3
votes
0answers
17 views

How Do I group and ungroup a bunch of HTML elements using React?

I want to implement the grouping effect one finds in various webpages on like. I will be making a component which contains a lot of similar items, and I'd like them to be stacked in groups, depending ...
-1
votes
0answers
30 views

CSS - display elements in columns

Is there a way (maybe flex, I couldn't find solution) to display for example 5 elements (A,B,C,D,E) in columns verticaly with CSS? like this: A C E B D I do not want to reorder elements in html.
1
vote
0answers
14 views

Adding fa eye icon inside input field at the right side which is responsive

I am trying to add an eye icon at the right side. In my origin code it shows at the right side but is not responsive and moves when the screen size is changed. Below is a loose implementation. I ...
0
votes
0answers
6 views

Video.JS: How do I add my own custom play and pause button in the middle of the video-container?

For an assigment I need to make a site with a dark-mode, pop up modal, an accordion with multiple videos inside of them and the video players needs 3 custom buttons. To play, pause and to "check" that ...
0
votes
0answers
11 views

Responsive navigation bar issue with logo shifting

I want the logo to shift to the middle when using devices like smartphones and hide the login and register button. I am successful in hiding the buttons but I am failing to shift the logo. Here is ...
-1
votes
3answers
17 views

TypeError: chatHeading[0].style is not a function

I can't change a style of a div I used this code : var chatHeading = $('#chatHeading'); console.log(chatHeading[0]); chatHeading[0].style('background', item.color, 'important'); But it gives me the ...
0
votes
1answer
15 views

How to change countdown time in minutes instead of seconds in ng-Idle

I am using ng-idle in my application. Here, the warning popup showing after 10 seconds. And inside popup the alert message is showing " Your session will be close in 10 seconds" . But I want in ...
0
votes
2answers
26 views

An unknown space shown in the body Bootstrap

I don't know what the problem exactly, but I tried to fix this alot, I know that I can just use overflow-x: hidden; But I want a logical solution to this issue. <style> .sidebar{ ...
0
votes
0answers
11 views

Creating Heart shaped progress loader | Reactjs

I want to make an Heart shaped progress loader for a react project. I tried using css. But, it didn't show the progress properly, like it only cover some part of the heart design. Below is the code, ...
0
votes
0answers
20 views

How to make a few divs to be in the same position dynamic

I want to had a div with an image in it, then a piece of text on the bottom and top with gradient. This is my html code <div class="row cbr-product-square"> <div class="...
-4
votes
0answers
25 views

how to change color of specific item on dropdown list when it's only active

please tell me a way to change the color of the 1st tag when it's actived on dropdown. <form action="/action_page.php"> <select name="cars"> <option id="choose" value="choose"&...
3
votes
2answers
49 views

Why does the image is not showing correctly using CSS?

I am new in learning web development especially in PHP and using CSS. The image that I have has 2560 × 1600. Is that size already enough to cover your background entirely? I only intended to put 1 ...
-1
votes
1answer
23 views

Scroll a list up/down to a div

I have an unordered list with numbers listed. After, I have a div tag with the left and right arrow in it to indicate the current number selected. I have tried the following code, but it's not working....
-1
votes
1answer
32 views

how to highlight some words in value of input tag [duplicate]

i want to hightlight some particular words which are coming dynamically in input tag's value. i want to highlight those words. <html> <head></head> <body> <input ...
-2
votes
2answers
32 views

HTML Elements not displaying accordingly. Why is this happening? [duplicate]

Why is it displaying like that? body { margin: 0 200px; } h1 { font-size: 16px; } <h1>hi</h1> <h1 style="float: left">hello</h1> <h1 style="float: right">...
0
votes
0answers
16 views

How to prevent rows adjustment after they are expanded?

I am working with antd table and antd transfer component and I am facing a small challenge with CSS. I have created a small example with codesandbox. If I try to expand a row, you will see that other ...
0
votes
0answers
15 views

Firefox not taking style props

I have an animated image which shows up on button click. I'm handing a prop 'size' to the image; size is a number and means pixels, scaling works on all browsers except Firefox. I don't see where the ...
-2
votes
0answers
32 views

Animated width:auto? (or height)

Can anybody provide or link to universal solution which I can apply on any element easily.. like putting one class on it, or one event listener.. to get animated width (or height) changes when width ...
0
votes
0answers
42 views

DIsable animation made with jquery when device smaller than 600px

Disable Jquery animation when the screen is less than 600px wide for the following statement. $(".main").tiltedpage_scroll({ sectionContainer: "> section", angle: 50, ...
0
votes
0answers
6 views

Using Arial Unicode MS BOLD in JavaFX

I want to use the font Arial Unicode MS in my JavaFX project which works fine. But i want e.g. the headlines to be bold. But I don't get the bold font working. What's the probleme here? I tried it ...
0
votes
0answers
8 views

PHP - build in picture view zoomfunction

i tried the code from https://www.w3schools.com/howto/howto_js_image_zoom.asp but it dindt work for me. could someone help me please? The purpose of the script is to access a network share. there are ...
0
votes
2answers
37 views

How do I get my bootstap to allign lables with content into 4 columns?

I am working in my Vue.js project using Bootstap 4 with css-only, and I'm trying to get my styling to be responsive to the content and yet inline. I'd like to achieve 4 columns.In that 2 columns with ...
0
votes
2answers
21 views

Is it currently possible to have full screen (autoplay) video backgrounds on Mobile?

I'm currently working on something that uses a livestream from Ustream as a fixed background. At the moment, it only works on desktop, and I personally think that it wouldn't be the best idea to do ...
0
votes
1answer
27 views

How to run mulitple keyframes on same page

I am currently working on a game and I need some help with some html and css. I have a page called "crime" and there it is 6 possible crimes you can take, on each of them I want to have a progress bar ...
0
votes
1answer
37 views

How to add Class active on Click in Navbar

I have some tabs in my page, when I click a tab it refresh the page and removes the active class. I have tried the following code. $(".nav-item").on("click", function() { $(".nav-item")....
-3
votes
0answers
25 views

How to get the UI design that's attached in my post using css [on hold]

I am a Web Developer and it's going good from past 1.6 years. Recently I got a requirement to design a webpage but I am in confusion that whether I should include an image or should do it using Css. ...
0
votes
0answers
12 views

How to fix “Uncaught TypeError: Cannot read property 'classList' of null” ( NOT caused by element Order) [duplicate]

I have following html code, when I run the following script in browers console, I get following error. (I let browser to be loaded completely, then I run the script, hence, I guess it's not affected ...
0
votes
4answers
48 views

How to create Sub tabs with HTML and CSS only

I have some tabs that are using only HTML and CSS. I would, however, like to add subtabs within those tabs. i.e. When I got to Tab one, I find another set of tabs inside. I only know how to do this ...
0
votes
1answer
22 views

how to contain fixed bar in relative div and show scrollbar perfectly

I want to contain fixed bar in relative div. But scrollbar is vanished on fixed bar area. I want to know how to show perfect scrollbar without vanished area. code below. <div class="wrapper"> ...
0
votes
0answers
7 views

styling django forms using reactjs

I learnt about django-forms, and I wanna create a form which looks nice, styling with css and bootstrap and html. but I found that out that I can't do it clean (like creating separate css sheet for ...
-1
votes
0answers
29 views

Create change color after full rotate animated

I found animated loading, but how to create the color change after full rotate I need 10 colors different example color from red -> blue -> yellow -> purple, etc this is the code https://jsfiddle.net/...
0
votes
0answers
8 views

changing xterm js web terminal background colour leads to hiding of terminal text

We are using xtermjs for terminal on browser. I need to change its background color so that it matches our color scheme. But changing its background color leads to hiding of terminal text. See image ...
0
votes
4answers
42 views

Body element has no margin but children's margin affects body's margin [duplicate]

body has margin: 0 p tags has margin-top: 100px; p tags affects body's margin-top why? I expected margin-top:100px only affects p tags. /////////////////////////////////////////////////////// I ...
0
votes
0answers
12 views

redux persist in the next js project persist:root is not creating localstorage

using the nextjs framework the redux-persist is not creating the local storage values. After login the persist:root is not showing in the local In the reactjs framework, I have tried the redux ...
-5
votes
0answers
27 views

Make cards on clicking json data and view it on the same page

enter image description hereI have provided some json data.Now I want to make cards for a particular employee and view it on the same page.On clicking the names of the employees I should be able to ...
-3
votes
0answers
11 views

I have this ( wellcome page isp ) using html and jss ? anyone generate pass and user name this page? [on hold]

[landing page wifi-id ] { code } <!doctype html> <html lang="en"><head><meta charset="utf-8"/> <link rel="shortcut icon" href="/favicon-wifi.ico"/> <meta name="...
0
votes
4answers
61 views

How to alternate by rows and 2 rows using CSS [duplicate]

I have a requirements to display the data in the UI with the ffg scenarios: Alternate colors by row if I select Capital see image below Alternate colors in every two rows if I select Country and ...
-2
votes
1answer
40 views

Why are these background colours not changing?

I set up the following styling so that I can add a nice box around some links: .btnRound { text-align:center; display:block; margin:40px auto; -moz-border-radius:8px; -webkit-border-radius:4px; ...
1
vote
3answers
88 views

How to animate a button on show?

I'm trying to animate a button to fadeInDown when it appears after scrolling 20 px down, but I can't figure out how to implement it. I have fadeInDown in my .css file, but I can't find where to call ...
0
votes
5answers
34 views

background color full page [duplicate]

My current code seems to make a pattern instead of covering the entire page. How do I make it to cover the entire page instead of a pattern like depiction? <style> body { background:...
-1
votes
3answers
41 views

Ordering of elements in flexbox

Following is my code which is working fine in terms of UI. Though the problem is my buttons are dynamic (it should be 2, 3, 4, 5, 6 etc in numbers) so It should be Button 1, Button 2, Button 3, Button ...
0
votes
0answers
22 views

IE11 - CSS wiggle animation not moving

I have a div that I am trying to make wiggle, but it does not seem to be working in IE 11. The div wiggles in Chrome, Microsoft Edge, Firefox, and Opera. Reading about the issue I thought it might be ...
0
votes
0answers
14 views

please help me integrate bpmn.io JavaScript BPMN editor into any HTML page

I'm trying to figure out how to integrate the BPMN editor by bpmn.io into any HTML page like here: https://github.com/bpmn-io/bpmn-js-examples/blob/master/modeler/app/index.html and here: https://...
0
votes
1answer
25 views

Centering dynamic image size in square aspect ratio [on hold]

I'm creating a product grid for a client and was faced with the issue of properly centering a dynamic thumbnail (sometimes square, portrait, or landscape) in a square aspect ratio and maintaining ...
0
votes
0answers
22 views

Preserving distinct row and column formats in formattable

I am trying to use the formattable package to create a fancy table in R, but I have run into a block trying to operate on both rows and columns. I want to have certain rows in italics and certain ...
0
votes
3answers
18 views

How to stack divs vertically with CSS or Vuetify independently from the divs in the side?

I want my divs to be on top of each other without following the height of the div by the side. Currently my divs are being displayed like this: I don't want that white space between the divs just ...
1
vote
0answers
22 views

Card Positioning in IE 11 is different then Firefox

I'am trying to build responsive website using Materialized framework. I am having issue where my card positioning is not correct in IE. However, It is working fine in Firefox. I am not sure where the ...
0
votes
1answer
14 views

How to solve mat-datepicker-toggle position problem?

I've imported material to my Angular 8 project successfully and I'm using bootstrap for styling. I don't plan to use all the material library, only when required. Datepicker from material is one ...
0
votes
2answers
41 views

Set different font-weights for different option values of select menu?

These questions are similar but not the same or are very outdated: HTML font weight property on OPTION of HTML SELECT How to style the option of an html "select" element? How can I change ...