Is it possible to suppress the 'i' symbol in an information toast in tostr?
Hide the background image with your CSS
body #toast-container>.toast-info {
background-image: none;
}
Related
I'm using the Modal-component from react-bootstrap.
I have two different Modals in my application and I want one of them to have an orange background color.
I can achieve the orange background color by doing:
.modal-content {
background: #FF8C0A;
}
However, this will make both of the modals in my application orange. I can't find a way to label the modal-content with an unique ID to edit just one of them. Can the "dialogClassName" prop maybe be used in some way?
Note: I've already tried giving the head and body IDs and making their background color orange. This works on desktop, however, on mobile devices there is a transparent line between the header and body in which doesn't look good.
Thank you!
Screenshot of the implementation of the Modal
You can use CSS nesting to target children of the components, For eg, In your case,
You named your modal using dialogClassName prop to info-modal, you can use this in ur CSS
info-modal .modal-content {
background: #FF8C0A;
}
Similarly for other modals, you can pass different name using dialogClassName prop
other-modal-1 .modal-content {
background: red;
}
other-modal-2 .modal-content {
background: green;
}
You can use "CSS modules" package for achieving this.
There are useful links for learning and implementing CSS modules..
https://www.javascriptstuff.com/css-modules-by-example/
https://css-modules.github.io/webpack-demo/
set backdropClassName="red" in your modal
and in CSS
.red {
background: none !important;
}
I have been having some trouble centering some items on my website.
The items in question are in the passphrase generator (images and text elements in the dark box). I have tried the usual margin:auto, all the different display properties, text-align, align-self, align-content and align-items. None worked.
I was also wondering if anyone knew how we could get the text element under our images isntead of to the right, this is the code used for the generator.
All help is appreciated
A p tag is a block element, so the default width is 100%. This is why you have one element per line
#passphraseBilder {
text-align: center;
display: block;
}
#passphraseBilder p {
display: inline-block;
}
Turn the p tag into inline or inline-block, and it will work ;-)
Have a look to the difference between block and inline: https://www.w3schools.com/html/html_blocks.asp
Try this:
#passphraseBilder {
display:inline-block;
width:100%;
}
Note: I have just added the properties which you should add or overwrite. Existing properties has to be there.
I want to remove panel border completely (border, background-image and all). I have a window which has 6 panel and every panel has title. I want only title name without any border.
Question may be duplicate but i didn't get answer.
I have tried border: false but doesn't work.
Add a cls option to the window so that you can scope your "no border" styles:
cls: 'noPanelBorder'
Then use this:
.noPanelBorder .x-panel-body-default,
.noPanelBorder .x-panel-header-default,
.noPanelBorder .x-panel-default {
border: none;
box-shadow: none;
background: none;
}
See example: https://fiddle.sencha.com/#fiddle/sbs
Note that using SCSS with Sencha CMD is recommended so that the style declarations can look simpler.
So I am trying to figure out how to change the colour of the container div by using a javascript toggle button, but I think I am missing something obvious when trying to get the div to work in the statement. When I run the code and press the toggle button nothing happens. Thank you!
<!DOCTYPE html>
<head>
<style>
body {
}
#container {
height: 300px;
width: 500px;
background: lightblue;
position: absolute;
float: center;
text-align: center;
}
h1 {
font-size: 50px;
font-family: sans-serif;
}
#button {
font-size: 30px;
}
</style>
<script>
function toggleColour()
{
if (document.getElementById('container').style.background == ("lightblue"))
{
document.getElementById('container').style.background = ("orange");
}
else
{
document.getElementById('container').style.background = ("lightblue");
}
}
</script>
<body>
<div id="container">
<h1>Lets button this up!</h1>
<button type="button" id="button" onclick="toggleColour()">Toggle Colour</button>
</div>
</body>
Three things:
background is a shorthand CSS property that combines many background properties together (see the list here). If you set the background color using just background you still need to read the result from background-color (and you should use that in the CSS as well if it's the only background property you're setting).
lightblue and orange are also shorthands for RGB codes. Most browsers (if not all?) return the RGB values (e.g. rgb(173, 216, 230) for lightblue) even if the color is set using the color's name.
.style in JavaScript doesn't return styles applied by CSS, only those applied directly with the element's style attribute. You need to use window.getComputedStyle() instead.
In this case it'd be much simpler to just assume the background color's starting status and use a flag to keep track of it.
var bg = 'lightblue';
function toggleColour()
{
if( bg === "lightblue" )
{
bg = "orange";
}
else
{
bg = "lightblue";
}
document.getElementById('container').style.background = bg;
}
Note that you don't need parentheses around string literals and it's good form to use the strict === for comparison.
#Bergi is right. To get the resulting style for an element (come it from CSS or from inline style) you would use getComputedStyle with real browsers (Chrome, Firefox, Safari, Opera, and IE9) and currentStyle with IE prior to version 9.
Your problem is that the .style property only does reflect the style attribute of the element (which is empty), not all the styles that are applied on it via CSS. Therefore, on the first click the .style.background is empty, and will be set to an explicit "lightblue" (which you don't see). On the second click, it is set now and satisfies the if-condition so that it will be changed to "orange".
What you can do:
Use getComputedStyle to get the actual value. Yet, it initially would be rgb(173, 216, 230) not lightblue so a cross-browser solution is not easy.
Just swap the condition: If it is orange then set it to blue, else (if it is blue or nothing) set it to orange. (demo)
Set the style attribute to a start value in the HTML (demo)
Okay, let's say you have something like this:
<span class="image" style="background-image: url('http://www.example.com/images/image1.png')"></span>
Every CSS tutorial I've ever read has covered the concept of using a background color after the background-image code, which of course takes the place of the image when one is unavailable, but...
How do you specify a backup background-image - one that should be displayed if the image referenced is unavailable? If there's no CSS trick for this, maybe JavaScript could handle it?
In modern browsers you can chain background images and have more than one on each node. You can even chain background-position and background-repeat etc!
This means you can declare your first image (which is the fallback) and then the second one appears over it, if it exists.
background-color: black;
background-image: url("https://via.placeholder.com/300x300?text=Top Image"), url("https://via.placeholder.com/300x300?text=Failed To Load");
background-position: 0 0, 0 0;
background-repeat: no-repeat, no-repeat;
JFIDDLE DEMO
Simple answer:
You could either nest the span inside another span - with the outer span set to use the backup background image. If the inside span's background isn't available, then you'll see the outside one's
Better, more difficult answer:
You could achieve a similar result in pure CSS, by adding some psuedo content before the span, and then styling that to have the fallback background. However, this usually takes some trial and error to get it right;
Something lile
span.image:before{content:" "; background:url(backup.png); display: block; position:absolute;}
Well, I know that the actual tag has onload, onerror, and onabort events.
You could try loading it in an image, then if that succeeds, use JS to set the background property of the body.
EDIT: Never mind. I like his answer better.
Just declare the preferred default image after your background declaration:
.image
{
background: #000 url('http://www.example.com/images/image1.png') 0 0 no-repeat;
width: xxpx;
height: xxpx;
background-image: url('http://www.example.com/images/image1.png');
}
<span class="image"></span>
idk the dimensions of your img, so they are "xxpx"
working demo: http://jsfiddle.net/jalbertbowdenii/rJWwW/1/