I have a p-PrimeNG sidebar, which includes a fieldset, which itself includes a tree:
<p-sidebar [(visible)]="display" position="right">
<h2>My Checklist</h2>
<fieldset class="default-fieldset">
<legend>Legend ...</legend>
<p-tree [value]="filesTree2"></p-tree>
</fieldset>
</p-sidebar>
I need to be able to remove the border around the tree, as fieldset has already a border. I tried the following codes inside the scss file:
fieldset p-tree { border: none;}
fieldset p-tree { border: transparent;}
but none of them has been helpful.
Could you help me with this?
Use below CSS:
p-sidebar .ui-tree{
border: none;
}
because p-tree compiled and created an HTML with "UI-tree" so you apply all CSS in this class.
You need to apply your css selectors in styles.scss, in order to override the theme styles for the tree. In the case of your tree, add the following rule to your global styles.scss file:
p-sidebar .p-tree {
border: none;
}
Notice that I have specified the class .p-tree and not .ui-tree
Related
I am trying to customise a disabled paper-input element. I would like to remove the dashed lines and change the labels color.
Any suggestion?
This is the element I am trying to style:
<paper-input ui:field="totalLabel" label="Total to repay" always-float-label="true" disabled="true">
<div prefix="true">£ </div>
</paper-input>
Thanks!
paper-input-container has set of custom CSS mixins defined for users to override the default styles.
You can read more about how to apply custom CSS mixins here: https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins
--paper-input-container-underline-disabled can be used to update the disabled underline. https://github.com/PolymerElements/paper-input/blob/v1.1.5/paper-input-container.html#L166
--paper-input-container-disabled can be used to update the general styles of disabled container. https://github.com/PolymerElements/paper-input/blob/v1.1.5/paper-input-container.html#L110
To remove underline you can write something like below in the custom styles. Its better to use different selector based on class name or id name. I have used the element name.
paper-input {
--paper-input-container-underline-disabled: {
border-bottom: none;
};
}
You can use this for disable the under line
paper-input{
/* for disable initially*/
--paper-input-container-underline: {
display: none;
};
/* for disable on focus*/
--paper-input-container-underline-focus: {
display: none;
};
/* for disable on input-disable*/
--paper-input-container-underline-disabled: {
display: none;
};
}
Problem
I have a site built with my own styles and it looks just the way I like it. However, I want to add extra functionality by adding a custom dialog box downloaded from BootBox.
However the extensive style sheet that comes with it and is needed absolutely murders my site, butchering it in every way.
Is there anyway i can stop this by making the BootBox.css only apply to its little part of my code and not all of my site?
You can use LESS wich is what bootstrap uses.
Example:
#ContainerWithBootboox {
#import (less) "bootstrap.css"; //import bootstrap
}
Doc: http://lesscss.org/
If you only want the bootbox css to target a specific div, you'd need to prepend each bootbox css rule with the class of the target div.
So if you had
<div class="bootbox">
<!-- bootbox html here -->
</div>
and the bootbox styles were
h1 {
color: red;
padding: 0;
}
h2 {
color: blue;
margin: 10px 0;
}
Then you'd need to change it to
.bootbox h1 {
color: red;
padding: 0;
}
.bootbox h2 {
color: blue;
margin: 10px 0;
}
That said, if the bootbox css is thousands of lines of code then this may be labour intensive. It might be a matter of finding which rules specifically are borking your code and adding a specifier class to only those rules.
Not labour intensive, with the help of LESS or [SASS] (http://sass-lang.com),
If you use LESS, just wrap all bootbox css rules inside a parent root. For e.g.:
.bootbox {
/*move all bootbox CSS rules here*/
h1 { color: inherit;}
.someclass { color: red;}
}
It will be compiled into:
.bootbox .h1 { color: inherit }
.bootbox .someclass {color:red;}
You could put the BootBox code within an iframe. The css loaded by the iframe would only apply to the content within the iframe. I have used this strategy to only apply bootstrap to certain areas of my page such as tables, while leaving the rest of the page untouched.
I have this div:
<div dir="ltr"></div>
That is generated automatically via imap_ function, and therefore I am not able to assign any style to it with the style="" tag.
My question is, how can I assign styles to the div above?
An attribute selector works well if you just want to style this specific element:
div[dir="ltr"] {
/* Styles */
}
Have you tried to use CSS for this?
div {
color: #cecece; /* change the color */
}
http://jsfiddle.net/afzaal_ahmad_zeeshan/wxft9/
[dir='ltr'] {
color: #cecece;
}
or with div - div[dir='ltr']
http://jsfiddle.net/aLvZk/
Try this:
CSS:
div[dir='ltr']
{
/*Styles*/
}
Fiddle
I'm new to CSS. i have page with site css(style.css) that have all the basic tag css example
body{color:#c2c2c2}
h2{ color:green;padding-5px }
span{ color:blue;border:1px solid #b4b4b4 }
I need to remove this css for selected div
<div class="remove"><h3>Test</h3><span>This sample text for the css remove</span></div>
for remove class clear all the default site css.
You can override the global styles.
body{color: red}
h2{ color: green;padding: 5px }
span{ color: blue;border: 1px solid black }
/*Overriding global styles*/
.remove h2 {color: yellow !important;padding:0 !important}
.remove span {color: gray !important;border-color:yellow !important}
give class name to each and every div tag in which you want to add css and make a div class's css
div.add
{
/* insert css */
}
give class="add" to that css in which you want to add css
Removing style is not a concept instead you can override the css styling.
Then you need to define style properties for the "remove" class. How you want to display it.
I have the following stylesheet:
/* MyStylesheet.css */
.MyForm .MyInput fieldset { border: 2px solid grey }
And then the following HTML code:
<div class="MyForm">
<div class="MyInput">
<fieldset>
<style type="text/css">
.MyInnerFieldsets fieldset { border: 0 }
</style>
<div class="MyInnerFieldsets">
<fieldset>
</fieldset>
<fieldset>
</fieldset>
</div>
</fieldset>
</div>
</div>
All fieldsets are receiving the 2px solid grey border from the external stylesheet. I thought the nested fieldsets would receive the 0 border from the embedded style, since the selector ".MyInnerFieldSets fieldset" takes precedence over ".MyForm .MyInput fieldset". I tested this in Firefox 3.6.8. Is this the expected behavior or is this a Firefox problem?
Thanks
The selector
.MyForm .MyInput fieldset
has a greater specificity (is more specific) than the selector
.MyInnerFieldsets fieldset
A more specific selector overrides a less specific one. Read about specificity and how it's calculated here.
To solve it, make your second selector more specific (such as .MyInput .MyInnerFields fieldset), or make the first one less specific (.MyInput fieldset).
.MyForm .MyInput fieldset { border: 2px solid grey }
This rule has 2 classes specified, so it's more specific than the latter rule. Simply make the latter rule as specific or more specific by prepending it with the same class name.