I want to bind a Polymer variable to an attribute, which I can set it to true or false to control the display of my content. However it seems that it doesn't work. is this the right way to bind it ??
css:
.nav-menu[active="true"]{
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.nav-menu[active="false"]{
display: none;
}
template:
<iron-selector class="nav-menu" selected="0" active="[[isActive_menu]]">
You are missing important thing. $. Always whenever you want to set attribute of element (not property. Property is something different) and you are using bindings, you need to add $ before =.
In your case:
<iron-selector class="nav-menu" selected="0" active$="[[isActive_menu]]">
In your case you are setting active as property of iron-selector. If you inspect that element in your browser, you will see there is no active attribute
more info about bindings: https://www.polymer-project.org/1.0/docs/devguide/data-binding
Related
I have created a textarea element with a maximum character limit. When the limit is reached, it should display an error message. I am using a pre-existing component called lib-error-alert-message. This is how the HTML code looks like -
<textarea class="my-text" rows="10" maxlength="500" [formControl]="textControl"> </textarea>
<lib-error-alert-message class="alert" *ngIf="(text | async) == 50" [alertMsg]="limitAlertMessage">
</lib-error-alert-message>
I have used this component elsewhere and it is working fine, however, in this particular page, the component has an internal class named "msgs" which has a margin-left property of -3rem.
This is causing the error alert and the textarea orientation to be askew.
While inspecting the element, if I uncheck the margin-left property then it looks correct.
I tried to create a class "alert" for the lib-error-alert-message and used the following code for that -
.alert {
margin-left: 0 !important;
width: fit-content;
}
But this does not override the inherent margin-left property for the internal class "msgs". How would I change the property for the internal class "msgs" (which is not accessible to me) in order to serve my purpose?
Add this style to your global styles.scss file. It selects the div with class msgs inside lib-error-alert-message element:
lib-error-alert-message div.msgs {
margin-left: 0 !important;
width: fit-content;
}
It’s right that you don't have direct access to the library component, but good news is that the global styles.scss is applied to all dom elements.
Use the Angular deep selector - it can be used to target inner component of external libs
:host ::ng-deep {
lib-error-alert-message div.msgs {
margin-left: 0;
width: fit-content;
}
}
I have some simple html code as shown here:
<div class="container card" hidden=false>
<canvas id="myChart"></canvas>
</div>
As you can see the hidden tag is included and set to false. Not the string 'false' just the boolean false. Yet when run the div is still completely hidden and when I check the CSS code for why it shows that the hidden tag is giving it:
display: none !important; But that shouldn't be the case when hidden is set to false right?
Instead of hidden use [style.display]="hideElement?'none':'inherit'"
Where in .ts you would set whether hideElement is true or false;
Alternatively create a class .display-hide{ display:none;} and then toggle it using
[class.display-hide]="hideElement"
The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can’t be used until the login process has been completed. Browsers won’t render elements with the hidden attribute set.
I used this link for reference:
Because hidden doesn't need a value: it either is hidden, or it isn't. The boolean you're sending is ignored. So, basically only add hidden if it should be hidden and add nothing if it should show.
ref: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden
The hidden attribute in HTML is an attribute which can't be set to any value.
For more info about the syntax, visit the MDN docs.
just use property binding on hidden
[hidden]=" some expression"
I'm expecting to see hello but I'm seeing {{someVar}}
<my-parent some-var="hello">
<div>{{someVar}}</div>
</my-parent>
I am passing some-var="{{someVar}}" to <content>:
<dom-module id="my-parent>
<template>
<content some-var="{{someVar}}"></content>
</template>
<script> Polymer({is: "my-parent"}); </script>
</dom-module>
I need this variable to be bound, such that if I embed another component, rather than a <div>, the embedded component can change the parent's property
This is a little hard to explain.. but the only element that can see the {{someVar}} binding is the element that contains my-parent. The div is not physically moved inside of the content element, it's just 'projected' so it visually renders in that position. This is how native Shadow DOM works.
If you need to do something with your distributed children you'll probably want to use the effectiveChildNodes API https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#effective-children
In some-child, make sure the property definition has notify: true
properties: {
locationHref: {
type: String,
notify: true
}
}
See https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#property-notification
Digging into the core-list source code, it looks like it checks an element's hidden attribute using Javascript. But setting <div hidden="false"> results in the div being hidden. Can I somehow bind an expression to this Javascript attribute or do I need to submit a PR to core-list to explicitly add support?
You can hide / show polymer elements with the hidden? attribute.
<span hidden?="{{showSpan}}">This may or may not be hidden.</span>
if the boolean expression 'showSpan' is truthy, the span element is displayed, otherwise it is omitted.
You can toggle the state of showSpan like this:
<div on-click="{{showinput}}">
<span hidden?="{{showSpan}}">This may or may not be hidden</span>
</div>
Polymer({
showSpan: false,
showinput: function() {
this.showSpan = !this.showSpan;
}
});
If you want that your element not being hidden you should remove the hidden attribute. hidden="false" does not means much in html.
how do I control width of a dojo combobox using css, i tried #comboId{width:50px} where comboId is the Id of <select id="comboId">. but it does not work
ComboBox is a little tricky, because the way this widget works, the node with the id comboId will end up being the inner input node inside the widget, not the widget's top-level domNode (which receives the id widget_comboId instead). This is probably why that's having no effect for you.
Note that not nearly all widgets do funny things like this, but namely widgets like dijit.form.TextBox and dijit.form.ComboBox (and widgets that extend them) do.
Perhaps the simplest way around this would be to also add a class to your widget and style based on that instead (which is generally encouraged as it is more reusable than coupling specific IDs into your css anyway). Assuming you're instantiating declaratively:
<select id="comboId" class="comboClass" dojoType="dijit.form.ComboBox">
...
</select>
Then in your css:
.comboClass { width: 50px; }
Other solutions
If you're instantiating this widget declaratively, you can apply the style inline and it will become properly mapped to the widget's domNode automatically:
<select id="comboId" dojoType="dijit.form.ComboBox" style="width: 50px">
...
</select>
Alternatively, you can set the style attribute of the widget after it is instantiated:
dijit.byId('comboId').set('style', {width: '50px'});
This is programmatically the equivalent to setting the width style inline on the DOM node declaratively.
Setting width using css did not work for me. However, setting style at construction did:
var spatialQueryComboBox = new ComboBox({
id: "selectionType",
style:{width: "100px"},
store: spatialSelectionStore,
searchAttr: "name"
}, "spatialSelectionType");
Did you try:
dojo.style("comboId", "width", "50px");
It could be done by calling the function "forceWidth(true)", and define the class .mblComboBoxMenu with desired height in your css file.
for example:
.mblComboBoxMenu {
position: relative;
overflow-y: hidden !important;
overflow: hidden;
border: 1px solid #00677f;
border-radius: 0;
background-color: white;
color: #868e96;
width: 80% !important;
}