I'm trying to change the font size of what is selected in a paper-dropdown-menu, but everything I've tried is failing. I've tried:
--paper-input-container-label: {font-size: 8px;};
--paper-input-container-input: {font-size: 8px;};
--paper-input-container: {font-size: 8px;};
--paper-dropdown-menu: {font-size: 8px;};
--paper-dropdown-menu-input: {font-size: 8px;};
--paper-item: {font-size: 8px;};
--paper-item-selected: {font-size: 8px;};
Everytime, the rule was put in the :root selector
but none of these work...
here's my code:
<paper-dropdown-menu no-label-float class="rowsSelector">
<paper-menu class="dropdown-content" selected="{{limit}}" attr-for-selected="value">
<template is="dom-repeat" items="{{options}}">
<paper-item value="{{item}}">{{item}}</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
You need to put it in a 'style is="custom-style"' tag and target the tag with a class or id unless you only have one dropdown menu or want them all to have the same font, font size etc..
Add below style code to adjust the font to be 20px. Notice the class to target the element I want to style, the class in my example is "test". If you do not want to use a class simply target all paper-dropdown-menu elements by changing .test with paper-dropdown-menu.
If you want to separate your custom style into its own file I believe that it has to be a HTML file for it to work.
<style is="custom-style">
.test {
--paper-input-container-label: {
font-size: 20px;
};
}
</style>
<paper-dropdown-menu class="test" label="Dinosaurs">
<paper-listbox class="dropdown-content">
<paper-item>allosaurus</paper-item>
<paper-item>brontosaurus</paper-item>
<paper-item>carcharodontosaurus</paper-item>
<paper-item>diplodocus</paper-item>
</paper-listbox>
</paper-dropdown-menu>
Related
Following the docs, I've added an anchor around the paper-item, however a few things slightly complicate the issue.
Firstly, the anchor overrights the color and adds an underline. No biggie, can style that.
Secondly, when used with paper-menu, the iron-selected class which bolds the selected item binds to the anchor and not paper-item.
<a name="view1" href="/view1" class="iron-selected">
<paper-icon-item>
<iron-icon icon="home" item-icon></iron-icon>
Home
</paper-icon-item>
</a>
Doing something with css seems pretty backwards?
.nav-core__link {
color: var(--primary-text-color);
text-decoration: none;
}
.nav-core__link.iron-selected paper-icon-item {
font-weight:bold;
}
Is there another method available?
I've got a question related to styling in Polymer. I have a responsive element which has different stylings depending on the width of the screen. If the width is 720 or greater, it should have the styling that is marked with "--specific styling 2--". If it isn't, it should have the "--specific styling 2--". It should always have the "--common styling--".
<dom-module>
<template>
<style>
:host {
--common styling--
}
</style>
<iron-media-query query="min-width: 720px" query-matches="{{isWide}}"></iron-media-query>
<template is="dom-if" if="{{!isWide}}">
<style>
:host {
--specific styling 1--
}
</style>
</template>
<template is="dom-if" if="{{isWide}}">
<style>
:host {
--specific styling 2--
}
</style>
</template>
</template>
</dom-module>
If I have the code as above, it always uses the "--specific styling 2--". Is there some way to change this to the wanted behaviour?
Bart
Code sample
http://jsbin.com/vudulonaka/1/edit?html,output
Click the menu button on this JSBin. Notice how the text wraps. I want to:
eliminate the text wrapping and
make the menu items expand their widths to match the width of the text inside.
This might necessitate forcing the menu to expand from right to left since the button is right justified in the toolbar.
How would I do that? Please provide working JSBin code example.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz">
<link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>
</style>
<paper-header-panel class="flex">
<paper-toolbar>
<span class="flex"></span>
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>This is a long label for the paper menu and button to show</paper-item>
<paper-item>This is another long label for the paper menu and button</paper-item>
<paper-item>This is still yet another long label for the paper menu</paper-item>
</paper-menu>
</paper-menu-button>
</paper-toolbar>
<div class="fit">Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
This isn't exactly perfect but it should give you an idea of the kind of css properties you should change and how to do it: http://jsbin.com/xaladokimu/1/edit?html,output
What changed is the style:
<style>
paper-menu-button{
--paper-menu-button-dropdown:{
max-width: 100%;
right:70vw;
};
}
paper-item{
--paper-item:{
white-space: nowrap;
width: 100%;
};
}
</style>
Basically, you have to add the white-space: nowrap to the items so that their text is displayed in a single line and then play around with the items' width and the dropdown menu's horizontal position and width (trying to change the dropdown's position to fixed or something else could help too)
Then again, you should set this css properties outside of the element in some custom style (unless you want your element to only work on a set position)
like this
<polymer-element name="ele-polyrow" extends="div">
</polymer-element>
is it possible to add style of ele-polyrow element.
Sure. Use the :host pseudo-class from inside the element's template. There are a couple of things to note, though:
If you extend a built-in element like div, to use the element you need to use
<div is="ele-polyrow"> rather than just <ele-polyrow>.
If the element doesn't include a constructor, you need to add the noscript
attribute, and Polymer will automatically register it for you.
Put these things together and you get:
<polymer-element name="ele-polyrow" extends="div" noscript>
<template>
<!-- shadow DOM for the element -->
<style>
:host {
outline: 2px solid red;
}
</style>
<!-- display any children -->
<content></content>
</template>
</polymer-element>
<div is="ele-polyrow">Hey there polyrow!</div>
Styling guide: http://www.polymer-project.org/articles/styling-elements.html
Styling reference: http://www.polymer-project.org/docs/polymer/styling.html
How can I change properties of component using CSS?
Let's say I have two buttons:
<p:commandButton id="mySmallButton" styleClass="smallButton">
<p:commandButton id="myButton">
I want all my buttons to have font-size: 14px; so I added this rule:
.ui-button .ui-button-text{
font-size:14px;
}
But my smallButton should have different size, so I added:
.smallButton{
font-size:11px;
}
Unfortunatelly this doesn't work. This is produced HTML:
<button class="ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only smallButton" (...)>
<span class="ui-button-text ui-c">MY TEXT</span>
</button>
The text on this button is stil 14px size. How should CSS look like to have all my smallButton font-size: 11px ?
Your problem is related to the loading order of all the CSS. CSS are cascading style sheets. So if you want your .smallButton style to be applied, it must be the last in the css chain, in order to override any previous matching styles.
Check the order of the CSS (see generated source header in your browser)
If you want your CSS to be the last one, you can use this inside your page or template:
<f:facet name="last">
<h:outputStylesheet library="default" name="css/yourstyles.css" />
</f:facet>
This avoids overuse of !important tag, that works either.
EDIT
This works fine for me on chrome. Chrome says font-size is 11px for ui-button-text embeded span, and displays the first button smaller than the second one, which font-size is 14px.
<style>
.ui-button-text{
font-size:14px;
}
.smallButton .ui-button-text {
font-size:11px;
}
</style>
<p:commandButton id="mySmallButton" styleClass="smallButton"/>
<p:commandButton id="myButton"/>
Also, please notice that the generated html buttons do not have any ui-button class.
I found the solution to my problem. All I need is this:
.smallButton.ui-button-text-only .ui-button-text {
font-size: 11px;
}
So now ui-button-text-only .ui-button-text only apply to the smallButton. I tried it before but with space after .smallButton so it didn't work. Now it is working properly. Thanks for your answers.
PrimeFaces overrides your css with the default rules for the parent form.
You can define your css for the form like this:
form .smallButton{
font-size:11px;
}
or you can use the !important keyword:
.smallButton{
font-size:11px !important;
}
See also:
PrimeFaces: how to override CSS class
PrimeFaces overrides my custom CSS style