Newest css Questions

Q&A for professional and enthusiast programmers

Add a bounce effect at the end of css translate

I'm using requestanimationframe and a css transform: translateX to move an image across the screen on scroll. I want to add a "bounce" effect at the end of the scroll. If I were using jQuery I could ...

Angular 2 css modules

I tried use @Component({ selector: 'about', template: './about.hmtl', styles: ['.block {background-color: red} ...'] // <-- This will generate css modules }) This works fine, angular ...

Missing icons google material design

I'm would like to start using google material icons (material.io) but they are so many icons missing such as the social networks, or the globe, .... Is this library still maintained coz the last ...

angular 2 - ngFor subnavbar menu doesn't work with css

.sub-navbar { background-color: #002b31; height:57px; font-size: 13px; margin-top: 175px; } this is my css file , and this is my html file <div class="container-fluid"> <...

Reverse Javascript triggered CSS animation

This may be a stupid question but I am struggling. I want a slide in-out navigation menu for small screens, triggered by javascript. This is what I currently have: HTML <nav class="responsive">...

-ms-user-select: none bugged in IE11

-ms-user-select: none is bugged in IE11. It is possible to select the text by selecting text appearing prior to the unselectable text first and then continuing with the marking. Se gif, fiddle, image. ...

Center responsive images

My images won't center with margin: 0 auto; or padding: 0 auto; Also it doesn't work if I do text-align: center; in the <div> around it. I think this is because the images are responsive. So how ...

Why won't this work in chrome? but works perfectly fine in Firefox and other browsers? [duplicate]

No idea what im doing wrong, but it just wont work in Chrome. I've tried changing the height to different values but with no use. The problem is the height on the .many_boxes_container wont work. Its ...

Why does child selector > not work with media queries in sass?

Suppose in a situation I need child selector in css so I'd do with scss it as: #bslider { > img { display: block; } > #slide { .carousel-inner { ...

Keep parent link hovered when using sublink

I have this dropdown-menu setup where i ran into trouble. The parent link needs to be in a hovered state as long as I'm using the submenu. /* Dropdown Button */ .dropbtn { background-color: ...

unable to find bootstrap documentation on nested cols and rows as per below pic

I was trying to get this particular image using bootstrap framework but i am unable to get the same. I did get it using html and css but it is not responsive. Below is the image : can anyone help me ...

Add a row instead of scrolling right in textarea

How can I add a row in a text area instead of scrolling to the right when the text is too long? thanks EDIT I finally figure it out myself. I directly put a textarea instead of a input text and I ...

Style to keep the text aligned when wrapped

I have text that wraps on to the next line. When wrapped to the next line, I want the text to align instead of moving under a span. The image below shows the problem that I am facing. In the above ...

Limit the Output of embedded element in html

i am not so experienced in html and need some support please. i've got following code: <table style="width:100%;"> <tr height="135px" valign="top"> <td> <span>{Field1}<...

I dont want the toggle functionality when the target is the same

I'm trying to create a step by step order, and I'm using data-id="x" to tell which content to be visible when it has been selected. What I am trying to accomplish is if the data-id has the same ...

Changing the hide show toggle effect?

I have an element that works just fine with the following code. It's an object #obj1 that is hidden when loading the page, but appears when clicking on #obj2. #obj1{ position:fixed; width:...

Replace background image with a blob:url

I'm using a very funky file / image upload provider GitHub - danialfarid/ng-file-upload: Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support[^] I am ...

Undefined variables in form with google Recaptcha?

I am trying to get a form with google's Recaptcha to work. Below is the code that I have so far. What am I doing wrong?? When filling in the form and clicking the SEND button i get the notices below. ...

Angular Ui Router + Animate.css

viewanimation on state change withanimate.css` But when writing this: <div ui-view class="view-animation"></div> //(sass) .view-animation{ &.ng-enter { -webkit-animation:...

Margin and padding not working in nth-last-child

I have to display last two number 6 and 7 on the right side and it is displaying but there is no space between two number I need equal space. I tried margin and padding but not working. would you help ...

Is there a responsive vertical display: flex? (no tables / no JS)

Let's say we have two div wrappers. Note that each wrapper can change in width and/or height. There are several div's inside this wrapper. The amount of div's can change anywhere from 1 to ~. I ...

How to move position for navigation text?

I'm trying to create navigation bar but it won't align perfectly with the background in my html body. Here's what I've got so far: HTML: <div class="head-nav"> <ul class="navigasi"> ...

How to insert breakline in td

I go through with many articles but don't find exact solution that's why I come with question. I have one <td> and inside this table cell there is 5 <a> What the css code if I want to ...

How does visual composer render front-end inline custom css?

I'm using a third-part plugin that allows a user to create a grid of posts and open a post in a lightbox (the posts have VC elements inside the lightbox). When adding custom design options to an ...

Trying to run boostrap Modal inside C#

I am trying to run the bootstrap modal inside the C# Here's the code inside C# } protected void GridView1_SelectedIndexChanged(object sender, EventArgs e) { ScriptManager.RegisterStartupScript(...

How I could create a theme selector for Django (ideas, advices, …)

I'm developping and improving my Django website and I would like to get advices about graphic charts and what I can do with Django. When I'm developping my software, I adopted a graphic chart ...

CSS background-image url not getting url

image(imageurl){ return "http://web.com/"+imageurl+".jpg"; How to use this url in CSS background-image ? here is css <div style="width: 100%; height: 300px; background-image: url ('...

text input box as 'foreignObject' within an SVG - text overflow issue

I have a text input box within my svg by using the 'foreignObject' tag. This works well, however if you type in the input box longer than it's width, so that it overflows, then the text actually ...

Static nav to fixed nav, causes page to “jump”

basically i have a navbar that becomes fixed when the user starts scrolling, with some transition stuff going on, to make it look nice. My problem is, when my navbar becomes fixed, the whole page ...

After input in textarea cant scroll up

I want make that, on input my chat content scrolls down, because my textarea expanding and hide last message. But now I get one problem, that I cant scroll up after input. There's my jQuery $('.text-...

Javascript animate function returns error when called before previous one is finished

We're trying to create an animation that moves a div from one corner of our container to the next one. The div's are made when you click a button and each are given an unique ID. The positions of each ...

Angular 2 + Material 2 : Sticky Footer with a md-toolbar

I actually try to make a sticky footer within an angular2/Material2 app, from a md-toolbar component. Maybe this is just not an appropriate element, but this would be nice to make it this way since ...

bootstrap-select with JQuery slimscroll display error

I'm currently using boostrap-select 1.12.2 plugin to display some filter widgets. Thoses widgets are displayed on the left side of the page, and are dynamically added. The widget list can be quite ...

Add style to Paypal Checkout button

Is there a way to add some styles to Paypal checkout button? Or create my own button for paypal checkout?

Color TD in tables with rowspan and colspan

I'm trying to color some TDs in my table. But it doesn't work as intended, as it colors other TDs, as well. Here, I tried to color the second TD: The problem seems to be that I'm using colspans and ...

Collapsed margin in CSS

MDN explains collapsed margin here. These are the basic 3 rules it explains: Adjacent siblings The margins of adjacent siblings are collapsed (except when the later sibling needs to be ...

can you create non-symmetrical shapes in css

I'm looking to create 4 different shapes with content areas that will work responsively. Heres an example image - Is it possible to create 4 div containers like this without the use of svg? I ...

svg and inline-block display issue on Firefox

I created this small app which shows local weather: Local Weather, for icons I used inline svgs with padding-bottom hack. It's working fine on Chrome, IE and mobile(iOS and Android), not tested on ...

Hide the box part of an html label

I have a group of labels with images and I want to hide the checkbox because the entire box changes color on hover. <form> <div class="answer"> <img src=""> <div id="answer-text-...

iframe with display: none and fixed height not working on Firefox [duplicate]

I'm trying to hide an iframe with this code: <iframe id="testframe" height="580" style="width:100%; display: none;border: none;"></iframe> In Google Chrome and Internet Explorer it ...

responsive grids with background image which is responsive

I am working on this project, the url is grouporigin.com//clients/upload/WAHA_Capital1/index.html If you see the bottom section in the home page, the div boxes with the background images are ...

Fixed header wrong positioning

I have a question regarding my script. I have made a script that allows us to be able to make the header to stay in top of a users window when they scroll down on one of our pages. It does this for 5 ...

Position fixed, scrolling in the Firefox

There are roughly the following markup and styles: body { font-size: 24px; line-height: 1.3; } .sidebar { position: fixed; background-color: lightblue; padding: 3rem 1rem; } ...

Scaling elements in Mozilla not working properly

I'm trying to create an effect (color rounded blackground which fades in half a second) when pressing an icon in my application; so basically I use :active pseudo class and make the span above the ...

Set width on <td> which under <th> with colspan

I'd like to set width on the td in tbody which is underneath thead that has colspan="2". .sample { width: 100%; table-layout: fixed; } .sample td:nth-child(1), .sample th:nth-child(1) {...

Centre a hexagon shape within a bootstrap column. Text-centre and margin: 0 auto; doesn't seems to work

I want to centre the hexagon within the column. I've tried text-center and margin: 0 auto; as well. It is not getting centred. What I'm doing wrong? I'm trying to achieve this using bootstrap row and ...

How can I get a transparent Bootstrap navbar in the WordPress header.php with an image underneath?

I have a code layout question for Bootstrap and WordPress. So basically I want to accomplish this Bootstrap transparent nav look but inside the WordPress template hierarchy structure.. Header.php ...

My css files takes too much time too load slowing my web app

My CSS files take too much time to load thus js files loads after 10 to 15 seconds and the view appears after 20 seconds. <script data-main="scripts/main.js" src="//cdnjs.cloudflare.com/ajax/...

Overlapping profile picture in the middle

Currently i have the following Header(Template from Bootstrap for Responsive Purposes):- But it's not very nice to have a such big navigation pane, so now i want to place the Profile Picture in the ...

CSS & HTML Moving elements

I am currently working on a website project,but I encountered some issues while developing it.Basically,for now I am trying to create a login page.I am experiencing quite a common error in the web,...
Translating... 0%