css – Page 23 – Tarik Billa

Modify style of ‘Pay with Card’ Stripe button

December 20, 2023 by Tarik

None of those worked for me. I ended up hiding the button in javascript and making a new one. <form action=”/your-server-side-code” method=”POST”> <script src=”https://checkout.stripe.com/checkout.js” class=”stripe-button” data-key=”xxx” data-amount=”999″ data-name=”zzz” data-locale=”auto”> </script> <script> // Hide default stripe button, be careful there if you // have more than 1 button of that class document.getElementsByClassName(“stripe-button-el”)[0].style.display = ‘none’; </script> <button … Read more

using nth-child in tables tr td

December 20, 2023 by Tarik

table tr td:nth-child(2) { background: #ccc; } Working example: http://jsfiddle.net/gqr3J/

Why does height 100% work when DOCTYPE is removed?

December 20, 2023 by Tarik

CSS height property, percentage values & DOCTYPE The first part of your question asking how to apply a 100% height to your div has been answered several times by others. Essentially, declare a height on the root element: html { height: 100%; } A complete explanation can be found here: Working with the CSS height … Read more

CSS – center two images in css side by side

December 19, 2023 by Tarik

Try changing #fblogo { display: block; margin-left: auto; margin-right: auto; height: 30px; } to .fblogo { display: inline-block; margin-left: auto; margin-right: auto; height: 30px; } #images{ text-align:center; } HTML <div id=”images”> <a href=”https://stackoverflow.com/questions/11819417/mailto:[email protected]”> <img class=”fblogo” border=”0″ alt=”Mail” src=”http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg”/></a> <a href=”https://www.facebook.com/OlympiaHaacht” target=”_blank”> <img class=”fblogo” border=”0″ alt=”Facebook” src=”http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg”/></a> </div> DEMO.

font-variant:small-caps; vs text-transform:capitalize;

December 19, 2023 by Tarik

if you use text-transform: capitalize the word “stack overflow” will become “Stack Overflow”, only the 1st letter of each word gets CAPS. but if you use font-variant: small-caps the word “stack overflow” becomes “STACK OVERFLOW” but the height of the type-face will match the height of the lowercase letters before the CSS style was applied. … Read more

Bootstrap carousel resizing image

December 19, 2023 by Tarik

The reason why your image is resizing which is because it is fluid. You have two ways to do it: Either give a fixed dimension to your image using CSS like: .carousel-inner > .item > img { width:640px; height:360px; } A second way to can do this: .carousel { width:640px; height:360px; } You could also … Read more

Make narrow characters with CSS

December 19, 2023 by Tarik

You can’t reduce character width, but you can reduce letter-spacing. span { letter-spacing: 0px; }

How to change color property of mat-slide-toggle/ overwrite CSS of component?

December 19, 2023 by Tarik

You can change the primary colour of the mat-slide-toggle with the below css in your component styles. /deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar { background-color: #49c5b6; } /deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { background-color: #49c5b6; } The above code is tested on angular 5+ version and which is working. Component styles normally apply only to the HTML in the component’s … Read more

Material UI v1 – set table column widths

December 19, 2023 by Tarik

Try using colgroup, worked for me in Material-UI V1 <Table> <colgroup> <col style={{width:’10%’}}/> <col style={{width:’20%’}}/> <col style={{width:’70%’}}/> </colgroup> <TableHead> <TableRow> <TableCell>Head1</TableCell> <TableCell>Head2</TableCell> <TableCell>Head3</TableCell> </TableRow> </TableHead> <TableBody> <TableRow> <TableCell>Data1</TableCell> <TableCell>Data2</TableCell> <TableCell>Data3</TableCell> </TableRow> </TableBody> </Table>

CSS Scroll Snapping, vertical not working

December 19, 2023 by Tarik

The major problem in the code snippet is that the displayed scrollbar belongs to the body, where no scroll-snap properties have been defined. This is why you do not have any snapping behaviour when scrolling. To achieve your expected result, you need to Be sure that the displayed scrollbar belongs to the parent div Define … Read more