I'm looking for overriding the width size of the toastr container to 500 px instead of the default 300px.
Is there any way to achieve it without extending the component and create a new custom one?
Here is the css portion of toastr.css that is relevant:
.toast-container .ngx-toastr {
position: relative;
overflow: hidden;
margin: 0 0 6px;
padding: 15px 15px 15px 50px;
width: 300px; <--- this one I'd like to override
border-radius: 3px 3px 3px 3px;
background-position: 15px center;
background-repeat: no-repeat;
background-size: 24px;
box-shadow: 0 0 12px #999999;
color: #FFFFFF;
}
You should override it like this :
::ng-deep #toast-container > div {
width: 500px;
}
Author of ngx-toastr.
You should copy over the css to your own global styles and make whatever changes you want. The css hasn't changed in over a year, so you aren't losing a whole lot by not importing it from the node_module.
Do not use ng-deep to do this.
Related
I have implemented the above selectOneMenu in Bootsfaces and the below selectOneMenu in primefaces.
I need the implementation in primefaces but styling as in bootsfaces.
How can I change the styling of the second selectonemenu as the above selectOneMenu?
I need to remove the grey borders.
Can anyone please suggest me.
EDIT -
After adding the suggested css.. primefaces selectonemenu is displayed as above on selecting the selectonemenu.
I need to align the highlighted box around the down arrow symbol in the selectonemenu and change the highlighted box color to grey.
Please suggest further modifications. Thankyou in advance.
I have following display of the p:selectOneMenu with the custom CSS classes (form-control & radius-none) on my specific screen:
XHTML:
<p:selectOneMenu styleClass="form-control radius-none" ...
...
...
CSS:
.ui-selectonemenu.form-control {
color: #555 !important;
display: block !important;
margin-bottom: 0 !important;
padding: 5px 10px !important;
background-color: #fff !important;
border: 1px solid #ccc !important;
}
.radius-none {
border-radius: 0 !important;
}
.ui-selectonemenu.form-control .ui-selectonemenu-trigger {
top: 0;
right: 0;
width: 16px;
height: 100%;
padding: 0 5px;
cursor: pointer;
position: absolute;
margin: 0 !important;
border: none !important;
margin-top: 5px !important;
background: transparent !important;
}
Update: The other CSS related to .ui-selectonemenu-label and .ui-inputfield is also part of the rendered HTML, which is generic in my case:
.ui-selectonemenu .ui-selectonemenu-label {
width: 100%;
border: none;
display: block;
cursor: pointer;
text-align: left;
overflow: hidden;
margin-bottom: 0px;
white-space: nowrap;
font-weight: normal;
}
.ui-selectonemenu .ui-selectonemenu-label.ui-inputfield.ui-corner-all {
text-overflow: ellipsis;
}
.ui-inputfield {
margin: 0;
padding: 5px;
background: #ffffff;
font-weight: normal;
outline: medium none;
box-shadow: inset 0 0 0 #8f8f8f!important;
-webkit-box-shadow: inset 0 0 0 #8f8f8f!important;
}
NOTE: If you want to change the style of all p:selectOneMenu elements in general, then remove the custom classes.
Some time ago, I've written an article about the problem. It includes a link to a demo project solving many (hopefully most) incompatibilities to PrimeFaces: https://www.beyondjava.net/blog/how-to-use-bootsfaces-and-primefaces-in-the-same-project/
I have the following div stricture.
<div class="profile_outer>
<div class="profile"></div>
</div>
And the following CSS
.profile_outer {
border: 2px solid #660000;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
}
.profile {
width: 198px;
height: 225px;
border: 1px solid #660000;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 100;
}
.profile_outer:hover {
background-color: blue;
}
you can find the fiddle here
Both divs do not have a background, the background is determined by an image on some parent div. So they are transparent.
So, on a hover I just want to change the background of the outer profile. It only works if I also change the background color of the inner div using
.profile_outer:hover .profile {
display: block;
background : #fff; // but I do NOT want to change the background
}
I tried the following combinations of these:
.profile_outer:hover .profile {
display: block;
background : none !important;
background-color:transparent;
}
Thanks for your help.
Well, I guess that the effect that you want is this
.profile_outer {
border: 2px solid #660000;
border-radius: 5px;
overflow: hidden;
}
.profile {
width: 198px;
height: 225px;
border: 1px solid #660000;
border-radius: 5px;
z-index: 100;
}
.profile:hover {
box-shadow: 0px 0px 0px 1000px blue;
}
fiddle
... but you should review your ideas about transparency ...
After re-reading the question, I think that Moob's sugestion is right, the answer to the question is
.profile_outer:hover .profile {box-shadow: 0px 0px 0px 1000px blue;}
Set the child's background to #fff and it'll work.
Your problem happens because the default background color for all elements is transparent
There is one other way to get this effect but it could be really annoying to implement. I'm only offering it up as a solution for completeness. Effectively you have the SAME background image on the bit that is supposed to appear masked:
body {
margin:0px;
background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') 0 0 repeat;
}
.profile_outer {
margin:20px; /* added this just to show that you'd need to offset the image placement in .profile depending on its position */
}
.profile {
background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') -20px -20px repeat;
}
http://jsfiddle.net/PdQFJ/1/
I have a codebox on my blog in which I add HTML / CSS / Javascript codes
My CSS code looks like this:
.post blockquote {
background-image: url("https://dl.dropbox.com/u/76401970/All%20Blogger%20Tricks/Images/blockquote.png");
background-position: 0 0;
background-repeat: no-repeat repeat;
border-color: #DDDDDD #666666 #666666 #DDDDDD;
border-radius: 6px 6px 6px 6px;
border-style: solid;
border-width: 1px;
color: #000000;
font-family: Consolas,'Courier New',Monaco,Courier,monospace;
line-height: 18px;
margin: 0 20px;
overflow: hidden;
padding: 10px 20px 10px 45px;
}
Whenever I add a big code (single line). The code gets to the next line but I want the code to be in the same line and a horizontal scroll under the box. I have tried overflow: auto overflow-x: scroll overflow-y: hidden
check this live example on W3SCHOOLS.
as you can see.. you need to specify a width and height.. that is why your code does not work
adding to that, use : white-space: nowrap; so you can make your code in a single line
take a look at this jsfiddle for your code
I need to hack some the styles in GWT Clean theme.
For eg. .gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
background: none repeat scroll 0 0 #CCCCCC;
padding-left: 5px;
padding-top: 6px;
}
The above style exists in GWT Clean theme.
The following is the hacked one,
#external gwt-TabLayoutPanelTabs;
.gwt-TabLayoutPanelTabs {
background: none repeat scroll 0 0 #FFF000;
padding-left: 1px;
padding-top: 0px;
top: 0px;
width: 140px !important; }
In the UI i see the style in the Clean.css.
My hacked style is not applied.
But only the following lines are considered from my hacked Style
top: 0px;
width: 140px !important; `
These 3 lines are not applied
background: none repeat scroll 0 0 #FFF000;`
padding-left: 1px;
padding-top: 0px;
So can anyone help me?
Thanks in advance,
Gnik
It is fixed by adding !important; with all the properties.
I would like to have the #textblock div to have at the same hight as #brevillestandard div.
CSS:
#textblock {
width: 260px;
border: 1px solid #999999;
padding: 0 5px;
float: right;
font-size: 95%;
background-color: #FEF4CC;
}
#brevillestandard {
padding: 8px 0 0 5px;
height: 80px;
Width: 61%;
border: 1px solid #999999;
float: left;
margin: 5px 5px 5px 0;
}
The answer is literally in the question.
You're giving #brevillestandard a height of 80px.
Add:
height: 80px;
to any other elements you want to be the same height.
Are they not the same height when you set the height in the CSS for both of them?
Perhaps it's the different padding that is causing the difference in their appearance?
If you make the CSS identical, do the two divs look the same? That might be one place to start. Or apply the same CSS class to both, and see if they look the same then.