Category "css"

React Pagination Styling

I am using react-js-pagination npm package, but styling doesn't work for me. import Pagination from "react-js-pagination"; import "bootstrap/less/bootstrap.les

How to update individual values of the box-shadow property?

I'd like to override the distance on box-shadow without having to set the color again. Use case here is I have a .button class with this: .button { color: w

Ordering <h:outputStyleSheet> and <link rel="stylesheet"> swapped

In my JSF 2.2 Facelet I have the following code: <html ... > <f:view> <h:head> <h:outputStylesheet name="bootstrap-lib/css

bootstrap container-fluid - remove margins the right way (overflow)

How can I remove all margins from boostrap container-fluid class and its rows? .container-fluid { padding: 0;} This does basically what I want, but it adds 2

Remove scrollbar from iframe

Using this code <iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=m

CSS- Changing the width of a search box

I'd been trying to change the width of the search box in name="size" of my HTML template but can't do it even when I tried width:. html: <form class="form"

Best way to include CSS? Why use @import?

Basically I am wondering what is the advantage / purpose of using @import to import stylesheets into an existing stylesheet versus just adding another ... <

Dealing with Safari and .webp images in 2022

I've been waiting to use .webp images for a very long time. It's 2022, so, given: the image format has existed for a decade Chrome started supporting .webp in J

Bootstrap button text color

I am using the bootstrap 3 custom buttons but cant for some reason change the brand text colour nor the dropdown triangles. i've tried a couple of things, but s

Width of Chosen dropdowns near zero when starting in collapsed Bootstrap accordion

When a Chosen dropdown is inside a Bootstrap 3 accordion that's initially hidden, then the width of the dropdown is near zero. After expanding it looks like thi

Why visual studio 2022 complains about unknown CSS class property bootstrap?

I have created a razor page web app template project in visual studio 2022. I am adding some bootstrap CSS class. here is my html: <form method="get">

Disable Ripple effect on MUI Button and add custom

I wanted to remove the ripple effect on the button and implement my custom effect in MUI Button. I have removed ripple using disableRipple. I have tried to appl

<%= stylesheet_link_tag "application", :media => "all" %> <----- This piece of code is not allowing my ROR application to load locally

After installing Twitter bootstrap, I ran 'Rails server' and now the application will not load. This is the error cannot load such file -- less (in C:/Sites/c

Page break inside avoid in flex not working as expected

I have a container which contains several divs which 2 column layout. I want the divs to printed in the new page when I convert to pdf. I have gone through few

How to prevent scaling of a web page

I am designing a web page that occupies only 80% of the horizontal space. On restoring the browser, the web page scales down automatically which makes it look v

Why do child divs extend beyond their parent div?

I feel stupid asking this but this is a very simple problem that don't understand how to solve. In the code below, why are the container, main, and secondary d

Wingdings font in FF and Chrome

I would like to use font Wingdings in my app, it is working well in IE, but in FF and Chrome instead of chars I see a latter. How to use this font in FF in co

CSS Media query not showing/hiding scrollbar

@media is giving me some problems... I can' seem to figure out how to get it to work. I would like to show the scrollbars if the height/width matches the query.

ol list counter reset based on start property using jquery

I need to make a jquery script that can take the OL start properly and transform it into a css based counter. So for a html like this: <ol > <li>F

How to change the cursor pointer on fullcalendar?

I'm using fullCalendar plugin for my project. I noticed that when I set the "editable: " into false, the cursor hover on the events becomes default instead of s