Created a custom polymer element "autocomplete" which include existing polymer element "paper-autocomplete"."paper- autocomplete" element class has "paper-input" element with specific style. How can I change "paper-input" element style in "autocomplete" element class(which calls "paper-autocomplete")?
The paper-input element uses the paper-input-container, so you can define a set of CSS variables to style it, in the intended/allowed way.
If you check the source for paper-input-container here, and look under "### Styling" you will see all the options you have to style the element from "outside".
In the paper-autocomplete element add the following:
paper-input {
#apply --my-styles;
}
In the parent element where you incorporate paper-autocomplete add:
paper-autocomplete {
--my-styles: {
background-color: green;
border-radius: 4px;
border: 1px solid gray;
};
}
Related
I have a popup that will be added to websites via javascript. I have no clue on what sort of styles will be applied on these websites.
Example website has the current styles added:
h3 {
color: blue;
border: 5px solid red;
font-size: 24px;
}
My Popup which is added to the body of the website has:
PopupText = styled.h3`
font-size: 16px;
color: black;
`;
This means that font size and color are what i've declared but the border will be added regardless, is there any way to remove the added extra css properties, or to protect from additional styling added by the website?
To sum up, I want my popup to look the same, no matter where it is added. As of right now, when i add it to a website it changes depending on what styling is on the website
You can use all attribute like this :
.class {
all: unset;
}
Check it here
I think you need use iframe tag for wrap
You can use the :not() selector to achieve that: If your popup element has a class (which is probably the case) you can modify your regular css rule for h3 as follows:
*:not(.yourpopupclass) h3 {
color: blue;
border: 5px solid red;
font-size: 24px;
}
This will affect any h3 element that is a child element of anything (i.e. also of body), except if it's a child of an element that has class .yourpopupclass (i.e. is inside your popup).
The same woud be possible with an ID if the popup has no class, but an ID.
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
I just encountered the issue, that I cant find out how to overwrite another class' style i.e. Background Color on hovering another class of same div. My example:
<div class="shapeClass bgTransparentGrey"></div>
<div class="shapeClass bgTransparentGrey"></div>
<div class="shapeClass bgTransparentGrey"></div>
the class shapeClass defines the shape, the class bgTransparentGrey defines the bg color. On shapeClass:hover i want to change styles of the bgTransparentGrey class, but only to the hovered element.
Best
Tassilo
You cannot edit the attributes of a class on the fly with Javascript. You would need to write an additional class that you add that overwrites the others styling.
$('.container-styles').hover(function(){
$(this).addClass('overwrite-styles');
}, function(){
$(this).removeClass('overwrite-styles');
})
.container-styles {
background-color: red;
height: 100px;
}
.overwrite-styles {
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container-styles"></div>
You can use this selector which will only affect elements which have BOTH classes:
.boxElement.bgTransparentGrey { ... }
If you place that somewhere BELOW/AFTER the rules for the single classes in your stylesheet, settings in it will overwrite the previous settings.
(note: there is no space between the classes, therefore it only applies when both classes are assigned to the same element)
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;
};
}
The easy answer is, just include
paper-button{
background: black;
}
, but that wouldn't restyle the element if it is contained in another element. The solution used to be
html /deep/ paper-button{
background: black;
}
which still works fine, but is deprecated from the Shadow DOM spec. So what is the proper solution?
PS. Purely to be complete in case it somehow matters: What I actually want to reproduce properly is
html /deep/ paper-button.main{
[...]
}
You can use CSS custom properties to change the paper-button style globally.
Since paper-button exposes the --paper-button mixin, you can try the following inside your document -
<style is="custom-style">
simple-dialog, paper-button {
--paper-button: {
background-color: black;
color: white;
};
}
</style>
Have a look at this plunker.