I have a tree panel in an ExtJS4 application and I want to change the icon's used for nodes so that they use the "leaf" icon when they contain no children nodes. But as soon as a child node is added to it, it reverts back to the normal folder icon. What would be the best way to achieve this?
Figured it out:
On initialization of the treepanel, all nodes have allowChildren:true and leaf:false, and nodes the contain no children have iconCls:'tree-leaf'. The accompanying css rule for that class is:
.x-reset .tree-leaf,
.x-reset .x-grid-tree-node-expanded .tree-leaf
{
width: 16px;
background-image: url('../ext4/resources/themes/images/gray/tree/leaf.gif');
}
Then if an empty node has any children nodes added to it, I programmatically remove the custom iconCls css class by:
node.set('iconCls', '');
And when the inverse occurs, when a node with children loses its children and is now empty, the custom class is programmatically added to it:
node.set('iconCls', 'tree-leaf');
Create your own css sheet and copy the following style, this will overwrite the default style and put your images instead of the theme
.x-tree-icon-leaf {
background-color: transparent;
width: 16px;
height: 16px;
background-image:url(../img/neogeo.png) !important;
}
.x-tree-icon-parent {
background-color: transparent;
width: 16px;
height: 16px;
background-image:url(../img/folder-pass.png) !important;
}
.x-tree-icon-parent-expanded {
background-color: transparent;
width: 16px;
height: 16px;
background-image:url(../img/folder-open-pass.png) !important;
}
Related
angular material2 mat-checkbox
How do I modify the left icon size, and the left icon state color?
<mat-checkbox>Like Me.</mat-checkbox>
You can use this ( .mat-checkbox-inner-container ) CSS class to modify the mat-checkbox
.mat-checkbox-inner-container {
height: 50px!important;
width: 50px!important;
}
Note that you need to put the style modification in styles.css root folder (
/src/styles.css ) and not in the components css.
Also put !important ( width: 50px!important; ) to override the
default style.
Below is the default style for the mat-checkbox
.mat-checkbox-inner-container {
display: inline-block;
height: 20px;
line-height: 0;
margin: auto;
margin-right: 8px;
order: 0;
position: relative;
vertical-align: middle;
white-space: nowrap;
width: 20px;
flex-shrink: 0;
}
Hope this helps.
If you want to change color then use these in your CSS file
::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: black;
}
::ng-deep .mat-checkbox-checked .mat-checkbox-background {
background-color: black !important;
}
::ng-deep .mat-checkbox-checkmark-path {
stroke: #000 !important;
}
Hope this css will resolve your issue
to change styles use classes and define them in your scss component file.
When you see that this not work's, use the selectors :host /deep/ before the class name in each of the scss defined classes.
The size of the icons is defined by the font-size not width / height
Hope I helped you
In my project, we overrode sizes of checkboxes and radio buttons to 16px in this way:
body .mat-checkbox-inner-container, body .mat-radio-container, body .mat-radio-outer-circle, body .mat-radio-inner-circle {
height: 16px;
width: 16px;
}
body .mat-checkbox-ripple, body .mat-radio-ripple {
left: calc(50% - 20px);
top: calc(50% - 20px);
height: 40px;
width: 40px;
border-radius: 50%;
}
I have the following scss snippet. When .child is present I want the .container to have a color of yellow I have code elsewhere which removes adds/removes the element with .child on it
.container {
height: 100%;
color: red;
:global {
.child {
background-color: black;
}
.container .child { <=== This obviously doesn't work but
I need .container to be yellow only when child is present
color: yellow;
}
}
}
How do I represent that in scss?
Even though you're using SCSS, we still can't get around the fact that There is currently no way to select the parent of an element in CSS. In your code that add/removes the element with the child class, add an additional class to the parent container so that you can color it.
I am using Joomla Membership Pro component and am having some trouble with CSS styling.
If you click here
http://se24media.net/dc3/index.php/join-us/membership-options/supporter/sign-up
You will see the background is styled nicely but if you fill in the form, click submit and go through to the page which dispalys your membership details it loses all styling (see link below)
http://i60.tinypic.com/33pa4c2.png
Does anyone know why it suddenly loses it's formatting?
Many thanks
It loses the styling because on the first page, the table containing all the fields is wrapped with <form> tags like so:
<form id="os_form">
<!-- Table with fields are in here -->
</form>
and the following CSS has been given for #os_form
#os_form {
background-color: #FFFFFF;
background-image: url("/dc3/images/news_header.gif");
background-repeat: repeat-x;
border-color: #868687;
border-radius: 12px;
border-style: solid;
border-width: 0 2px 3px 0;
color: #000000;
float: left;
font-family: 'Source Code Pro',sans-serif;
height: auto;
margin: 0 40px 40px 50px;
max-width: 100%;
opacity: 0.9;
padding: 40px 20px 20px;
width: 85%;
}
The second page simply displays a table with the class os_table so style this table, you will need to add the following to your CSS file:
.os_table {
/* code here */
}
Hope this helps
I have created a custom drop-down element, which is listed on this page:
http://jsfiddle.net/spryno724/2snUH/3/
Click on the drop-down menu in the "Result" secion, and you will see the problem. By rolling over the choices in the expanded drop-down list, you notice the roll-over indicators don't stretch to the available width.
While still maintaining the width of the menu when it was collapsed, how can I stretch the background color of each menu item? I'd also like each of the menu items to remain on their own line. A couple of adjustments that I made the CSS caused some of the list items to wrap their own text.
Thank you for your time.
Use negative margins with width: auto instead of width: 100% for items:
UL.dropdown.open LI {
margin: 0 -23px 0 -10px;
padding-right: 23px;
padding-left: 10px;
position: relative;
width: auto;
}
See http://jsfiddle.net/2snUH/4/ .
Or get rid of horizontal padding for UL (and specify horizontal padding for LI instead), and then you will not need negative margins for LI items.
To fix the width of the li elements use:
ul.dropdown.open {
padding: 5px 0;
}
ul.dropdown.open li {
display: block;
padding: 5px;
text-wrap: none;
width: 100%;
box-sizing: border-box;
}
I want to change JQGrid "Loading..." message to something with animated gif image. Looked everywhere but couldn't find a way. Anyone please.
Try to use
.ui-jqgrid .loading { background: url(ajax-loader.gif); }
it should work. Some animated gifs can be loaded for example from here. By the way, the div having "Loading..." message has the form
<div id="load_list" class="loading ui-state-default ui-state-active">Loading...</div>
where the id "load_list" will be constructed from the prefix "load_" and the id of the table element.
UPDATED: To remove the text "Loading..." you can either use loadtext:'' jqGrid option or overwrite $.jgrid.defaults.loadtext global setting from the grid.locale-en.js:
$.jgrid.defaults.loadtext='';
If you need to adjust width, height or any other CSS parameter of the loading div you can do it in the same way. For example,
.ui-jqgrid .loading
{
left: 45%;
top: 45%;
background: url(ajax-loader.gif);
background-position-x: 50%;
background-position-y: 50%;
background-repeat: no-repeat;
height: 20px;
width: 20px;
}
This is perhaps a more modern answer to the question using FontAwesome rather than a gif. I couldn't find where this has been answered anywhere and had to piece it together from various places including the answer above by #oleg.
Hopefully this will be helpful to others searching.
<style>
.ui-jqgrid .loading {
background-color: transparent;
border: 0px;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.ui-jqgrid .loading:before {
content: "\f110";
font-family: FontAwesome;
font-size:40px;
}
</style>
And then place the following (exactly like this) after $(document).ready(function() {
$.jgrid.defaults.loadtext='';