Questions tagged [css]

210043 questions
1

votes
2

answer
2.1k

Views

Yii2: How add a symbol before and after an input field

How can I add a symbol before and after of an input text? Just like the image attach. My code: SOLUTION I modify my code following ActiveForm documentation and it works! Code modified:
Alexandra
0

votes
1

answer
28

Views

Moving Button to the right

I have a HTML Page with a CSS. I used the form with the to make some buttons and want to align them to the right. Even though in the normal HTML pages without this CSS template, the button would move to the right, it does not work anymore. Same is the case for similar buttons on the page. Align to t...
Arun Sharma
0

votes
0

answer
28

Views

Video-streaming the content of a div

I'm developing a teaching application and I would like to be able to stream the contents of a div (the div will contain pictures, text, a white board emulator, etc used during the lesson). The teacher should be able to switch from the regular webcam to the div when necessary. Is there any way to ach...
devamat
0

votes
1

answer
17

Views

onClick event on element on Mobile device hover state is still applied

I can't seem to find anyone with this same issue online with React, unless I've been searching for the wrong thing? I have a button (anchor tag) that has an onClick event. When the onClick event is triggered it calls a loadMore() function that makes an API call and updates some state. However on a m...
mcclosa
0

votes
0

answer
18

Views

Dynamic Header works just on index.html

I'm building a website that's having a header with a function(if I scroll down it makes the header smaller). Problem is that on index.html it works properly but on my second-page in,t working. And to create the second page I just copied the first page and added some extra content. Does anyone know w...
DConstantin
2

votes
0

answer
18

Views

BigCommerce CSS files does not load

I am using BigCommerce default theme Cornerstone, and created a CSS folder inside the assets, to load my custom CSS files. I have also added two CSS files there, and call it in template/layout/base.html file. Here is my code: {{{stylesheet '/assets/css/custom.css'}}} I also tried with CDN URL: It wa...
Jaydip Nimavat
1

votes
2

answer
1.6k

Views

Native Base button missing styling

I have a native-base app and the styling works but seems to be partially missing from buttons. There are no errors and I have applied no custom styles in my app. See the screenshot below. The buttons are missing their font color, padding, and maybe some other stuff. This is true for any button type...
austinbv
1

votes
3

answer
637

Views

Remove the Image upload button in MS-bot framework

I want to remove the image upload button in MS-botframwork. I am making changes in botchat.scss file and then running npm run prepublish but nothing is happening. I don't want to make changes in the botchat.css file. Can you tell me exactly what I have to do. Thanks.
prem chopra
1

votes
1

answer
206

Views

linear-gradient not full height of body

My linear-gradient only goes to the bottom of the div. Question How to make sure the body linear-gradient goes to full height of the page? CODEPEN DEMO CSS body { top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to bottom right, #0087e0 50%, #004165 50%, #004165); background-size...
Mr. ED
1

votes
3

answer
629

Views

How would I fix indentation on an font awesome icon? [duplicate]

This question already has an answer here: Text indent after the first line in a paragraph 4 answers How do I fix the indentation whilst using this font awesome icon as list to display advantages? This is my HTML: No upfront payment is required to access the solution. A Nominee and Supervisory fee...
Adam
1

votes
3

answer
1.8k

Views

force last div on a new line with flexbox [duplicate]

This question already has an answer here: Force flex item to span full row width 2 answers I have this HTML plus this CSS .wrap { display: flex; align-items: center; } .one { flex: 0 1 200px; } .two { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; } .three { display: f...
Happy Andrei
1

votes
1

answer
737

Views

How to set a specific flexbox gap in CSS

I'm trying to achieve a flexbox layout with just one flex-grow element and a variable number of smaller elements around it. I need a gap between the elements that's a fixed width - exactly one pixel. Here's a diagram of what I want: The blue element grows to fill the space, but has a 1px gap in betw...
Jae Kwak
1

votes
1

answer
3.3k

Views

Bootstrap 4 Carousel columns instead of carousel-item

Does Bootstrap support displaying grid columns or rows in Carousel instead of carousel-item -s? The idea is to have a complex grid column structures that interchange with each other just like carousel-items. For example if we have the following grid: I would like to be able to represent row1, row2 a...
astralmaster
1

votes
2

answer
101

Views

Aligning div to baseline of the first line of another div?

I've got two divs and would like to align their baselines. However, one of the divs has more than one line of text and some embedded content, and while I'd like to align them to the top baselines, the browser seems to align to the bottom one. I've built a JSFiddle here to illustrate, with the follo...
Jason Cooper
1

votes
2

answer
43

Views

Tiny space only on mobile versus desktop (stacking divs with pos absolute / css)

My goal was to stack two forms over each other so the outside borders aligned perfectly. I got it to work and look exactly how I want it to on the desktop site but viewing it on my mobile phone I noticed the 'red box' isn't exactly on top of the other one and is slightly higher. (Like no more than 1...
SCodeSK71
1

votes
1

answer
198

Views

Inverting colors with CSS Variables

I want to create a local inverted theme (modern browsers). Color shades are set using CSS Vars (CSS custom properties). Some elements have more contrast, others are low contrast. Now the inverted container has a black background. Everything within there, should be reversed. Dark grey should be light...
Frank Lämmer
1

votes
2

answer
2.6k

Views

How to change only the background image opacity? [duplicate]

This question already has an answer here: How do I give text or an image a transparent background using CSS? 28 answers Can I set an opacity only to the background image of a div? 8 answers Set opacity of background image without affecting child elements 14 answers I am trying to change the opaci...
MA19112001
1

votes
1

answer
1.5k

Views

Expected RBRACE and Unexpected token '}'

I am trying to edit a post's CSS in Wordpress theme editor, however, I get two errors. Here is the code: #post-6303 { .post-content { padding: 0 10% 0 10%; } } The second line gets unexpected RBRACE and the last line gets unexpected '}' Any ideas?
JoeEdward
1

votes
2

answer
144

Views

Removed space between spaces buttons in a bootstrap dialog

I'm developing a web app with Bootstrap 3.3.7 and Bootstrap Confirmation 2.4.1. The confirmation works well, but when I press the button (Delete) that contains the Confirmation, it removes some space between the Delete and the Close button as you can see in the following images: View without confirm...
1

votes
2

answer
2.1k

Views

align-content: center not working in Chrome

I am trying to vertically align divs with flexbox, by using the align-content: center. It works fine in Firefox and IE, but it does not vertically align in Chrome. In Chrome the divs stays on top. Title Text. Title Text. Title Text. And CSS: .products-wrapper { width: 100%; min-height: 100vh; /* FLE...
Nifel
1

votes
1

answer
766

Views

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element while trying to click Next button with selenium

So Im trying to I click the next button using selenium, I've tried with the code below, but it ends in error. The element My code driver.find_element_by_name('submitNext').click() But then it outputs these errors Traceback (most recent call last): File 'C:/Users/thomas/PycharmProjects/test/mainapp/m...
Thomas
0

votes
3

answer
21

Views

How can i push notification on my web app

i wanted to add a push notification system on my web app. Example : - one user is clicking on button of one website. - a second user is notified about the click like a push notification I tried a lot of things : Notification push with services workers but I am stuck when it is necessary to use his o...
Be Weria
0

votes
0

answer
21

Views

make focused button look like non-focussed button

Within a specific div, I want to make focused buttons to look exactly like non-focused buttons. Is there a way I can express that in sass/scss? Something similar to this: .myDiv { > button { &:focus { @extend &:not(&:focus) } } } Alternatively, can I disable all rules that are applied only because o...
Ferenjito
0

votes
2

answer
31

Views

Fail to load resource error : the server responded with a status of 404(not found)

I'm creating a website to present a project, and I have to do a slideshow with several objects that can be seen at the same time. In order to do that I've planned to use this: https://kenwheeler.github.io/slick/ I've followed the tutorial and just tried to do a simple example to see how it works, th...
Léonard FONTAINE
0

votes
0

answer
13

Views

Is there an way to get responsive background image on my html div

I have an issue and can't solve it properly. There is a header with registration form, but I can't do background image responsive. I've read a lot of manulas but it doesn't work. Header phrase Register  SMS is here some text SMS will come after 60 sec. My css look like this: .background-img { backg...
NashGC
0

votes
0

answer
13

Views

shiny html full page bootstrap carousel

I am begining in styling shiny apps. I want to create a create a full screen slider into a tabpanel of my application for my landing page. According to this snippet https://codepen.io/nikhil/pen/RPOXya , here's my application. The carousel is empty. How can I solve this issues (perhaps the in...
Wilcar
2

votes
0

answer
15

Views

set z-index to the auto suggestion angular mention list

I am working with Angular 7. I am facing a problem in setting the z-index to the list of the user that are coming with auto-suggestion. I am using a text box in which if I type @ then it will give suggestion for all the available users. for this functionality, I am using Angular mention directives b...
Jayesh Vyas
1

votes
2

answer
1k

Views

CSS print - stretch table for the entire page (height = 100%)

Basically, what I am trying to is to spread a table to fill the rest of the page in print mode. I've surfed the internet, examined this post, and yet after two hours can't figure out what I am doing wrong. The idea is that the table should take up the rest of the page document.querySelector('#print'...
1

votes
1

answer
551

Views

Custom Boootstrap 4.1 Toggler Animation

I'm trying to add a custom menu toggle to Bootstrap 4.0's Navbar menu. The code I am using is from Codeply HERE. I am trying to apply the X toggle style to my website's bootstrap navbar. Here is what I currently have now. Title Link Link .navbar-collapse InfoInformation Section ServicesServices Sec...
Haxz4Lyfe
1

votes
2

answer
347

Views

CSP - How to solve style-src unsafe-inline -when having dynamically positioned page elements

In our app code we allow some objects to drag and drop around the page. Also we have things like popups that need to be positioned below buttons and dialogs that we position in the page ect. To do so we need to allow the following inline css properties z-index top, bottom, left, right height, width...
Tim
1

votes
2

answer
189

Views

::before and ::after position absolute acting like position fixed

So I am trying to position my pseudo element with position absolute, but instead, it is acting like its parent is something else. p::after { content: ' - Remember this'; position: absolute; top: 0; } My name is Donald I live in Ducksburg Note: For this selector to work in IE8, a DOCTYPE must be dec...
Jason C.
1

votes
2

answer
804

Views

Javascript collapsible panel open by default

I am following this code example found here to create a collapsible panel using css/html/javascript: function toggleCollapsibleSectionWithAnimation() { this.classList.toggle('collapsible-active'); var buttonId = this.id; var sectionId = buttonId.replace('button','section'); var content = documen...
dahui
1

votes
2

answer
54

Views

How to animate stroke-dashoffset with SVG animate?

To animate stroke-dashoffset I am aware of using CSS @keyframes to move the stroke-dashoffset of a SVG path. However, because I want to size the SVG with background-size: cover, I am unable to target the individual elements inside the SVG since it's being referenced as a background-image in CSS. Is...
jchi2241
1

votes
2

answer
1.3k

Views

Font Awesome not showing - Avada theme (Wordpress) - adding fa class

I migrated my wordpress site from a shared host to Digitalocean and everything went well except for the Font Awesome icons. They are showing as blank squares on the live site. I found the issue to be the required 'fa' class for the icons is not showing up. I am using the Avada theme and am brand ne...
shaiden
1

votes
3

answer
37

Views

How can I align one flexbox item to the right and two stacked on the left?

I have an image ('repairPic') I would like to align to the right which is no problem, and two elements ('repairTitle & repairBtn') I would like to stack on top of each other on the left side. I would like to use flexbox because I think it's a great way to set up a site. I'm pretty new to html and c...
Matt
1

votes
1

answer
391

Views

MaterializeCSS Icon after Input Field

From MaterializeCSS' Text Input page there is a section to prefix an input field with an icon. account_circle First Name Is there a way to have the icon come after the input field? I tried a suffix css class and it did not exist. Also moving the account_circle section after the input/label moves the...
Bijan
1

votes
2

answer
209

Views

Second bootstrap navbar overlapping a dropdown-menu from the first navbar?

I have two fixed-top navbars, the dropdown-menu from the first one gets overlapped by the second navbar. Tried messing around with z-index, positioning and overflow.. Also found a couple somewhat related questions but nothing seems to be helping. Any ideas what could be causing this? Link to FIDDLE...
Jonathan Laliberte
1

votes
2

answer
284

Views

Change color and spacing in Woocommerce review stars

Does anyone know what CSS code I could use to change the colour of my review stars and also space them further apart? I have the code below, but it only changes the outline colour .product .star-rating span:before, .product .star-rating:before { color: #FF0000; } What code would I add to do the wh...
Michelle
1

votes
2

answer
111

Views

Why does order of transforms matter? SVG rotate/scale doesn't give the same result as scale/rotate

After combing through the SVG specification, and guides such as this and this, I am still struggling to understand exactly how chaining transforms work. Selected Relevant Quotes When you apply the transform attribute to an SVG element, that element gets a 'copy' of the current user coordinate system...
Magnus
1

votes
1

answer
58

Views

How to make all elements in a node list disappear except target element?

https://codepen.io/m4rsibar/pen/zyPBoz?editors=0110 I've made a codepen example of the effect I'm going for (I've included the code that creates the effect at the very top of the css section), except I want to do it in javascript. (unless there's a way to fix the issues I'm having with the css versi...

View additional questions