I'm having a bit of confusion when trying to use Polymer's core-media-query element to adjust my layout accordingly. I understand how to set the breakpoint for when the query is going to be true, but I'm unsure of how to adjust individual attributes for the element I'm trying to change at the breakpoint.
Here's what I have so far:
<core-media-query query="max-width: 884px" queryMatches="{{smallScreen}}">
</core-media-query>
and my element:
<div class="footer-container" vertical?="{{smallScreen}}"
horizontal?="{{!smallScreen}}" center-justified layout center>
Which I found here on Github. It works great for moving the layout to vertical when smallScreen == true but I also need to change like, center-justified to end-justified and some other of the attributes. How do I go about doing this?
I've tried doing this:
<div class="left-container" center?="{{smallScreen}}" start?="{{!smallScreen}"
vertical center-justified layout>
But it doesn't appear to be doing anything. It gets that it's !smallScreen but doesn't seem to see when the query is true. hmm
edit: it appears to work with center-justified and end-justified just not work cross-axis stuff
you could use conditional templates.
<template if="{{smallScreen}}">
// things to show when smallScreen is true
</template>
<template if={{!smallScreen}}">
// things to show if smallScreen is false
</template>
Related
Because of some personal needs I need to switch the position of the footer with the paginator for my PrimeFaces DataTable:
Current:
How it should be:
Is it possible to do this without CSS? Is there a way to change the position programmatically? I think if this is possible it would be the best way to do this.
You may have to edit the CSS because if the position is relative for example this won't necessarily work. However simply arranging the position in HTML will change the order if the elements are at the default CSS values.
<div class="footer">Test</div>
<div class="pagination">1</div>
instead of:
<div class="pagination">1</div>
<div class="footer">Test</div>
Is it possible to prevent the effect of ng-show on a specific child element.
Lets say I have the following html.
<div ng-show="showParent" class="parent">
<div class="childOne"></div> <!-- don't hide this -->
<div class="childTwo"></div>
</div>
Now what I would like to achieve is hiding everything except childOne. Actually hiding a parent, but one or some of its children?
No, you can't. The HTML standard prevents that. All children get hidden when the parent gets hidden, and AngularJS just adds things to HTML, it doesn't change it.
However, AngularJS allows one variable to control multiple elements, and can probably help us get the same affects you want. So let's go back to what you are really trying to accomplish. To do this, we're going to need some more details that you took out in this question to make the question smaller (and thank you for that). What about just hiding childTwo is not working for you? Are there other things in parent you need to hide? We can put those in seperate elements (div or span or something) and hide those with the same variable as we hide ChildTwo. Does parent have some formatting (say, a border or something) you need to hide? We can change what classes are on parent based on the same variable we use to hide the other elements to something that removes the border and any other styling, effectively making it not visible, although still technically present in the DOM.
ngShow relies on a CSS class (.ng-hide). You may be able to override that class with your own more specific selector for just the divs you want excluded from the directive.
<div class="parent" ng-show="showParent">
<div class="childOne nghide-override"></div>
<div class="childTwo"></div>
</div>
Source: https://docs.angularjs.org/api/ng/directive/ngShow
(I'm unable to test this right now, but I'll mock something up shortly and edit/remove this if it doesn't work.)
You could also just split the children out into divs and hide the second div:
<div class="parent">
<div class="shown children">
<div class="childOne"></div>
</div>
<div class="hidden children" ng-show="showParent">
<div class="childTwo"></div>
</div>
</div>
Use Jquery unwrap.
Include jquery in your application:
bower install jquery --save
Set on ready unwrap to specified div:
<script type="text/javascript">
$(document).ready(function() {
$(".childOne").unwrap();
});
</script>
After some search I found that I could scroll core-header-panel by scroller property, but I cannot apply the same thing to core-scaffold.
Is there any way to scroll core-scaffold to the top ??
A core-scaffold element is just a collection of a bunch of other core elements with a bit of commonly used functionality. If the documentation doesn't answer your question one tip is to just look inside the source of the element.
That's for example the content of the core-scaffold.
<div vertical layout drawer>
<content select="[navigation], nav"></content>
</div>
<core-header-panel id="headerPanel" main mode="{{mode}}">
<core-toolbar>
<core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
<content select="[tool]"></content>
</core-toolbar>
<content select="*"></content>
</core-header-panel>
The .$ property will contain a path to any element by its id. So $.yourScaffoldID.$.headerPanel is a path you can use to access it through javascript or data-binding.
Thanks to #Winchestro answer,
I could solve it by defining a scroller property for my custom-core-scaffold and make it return the core-header-panel scroller.
get scroller() {
return this.$.headerPanel.scroller;
}
I was able to install and run the polymer 'unquote' tutorial successfully.
Now I want to modify it, but I can't figure out how. Specifically, the post-cards are lined up vertically in one column. I would like to line them up in different ways. For example horizontally and/or in multiple columns.
There is a hint in the tutorial:
http://www.polymer-project.org/docs/start/tutorial/step-2.html
"The layout horizontal center attributes are Polymer shorthand to create a flexbox layout."
So I looked at flexbox documentation at css-tricks.com/snippets/css/a-guide-to-flexbox/
Then I changed the attributes from 'layout horizontal center'
to 'layout vertical center', 'layout horizontal left', ...
Nothing changed. The post-cards always line up vertically in one column. Can somebody steer me in the right direction? The answer could be as simple as a link to the documentation that I can't find.
Erwan, I must be missing something obvious. I can't figure out how to incorporate your idea into this code in post-list.html.
<div layout vertical center>
<template repeat="{{post in posts}}">
<post-card favorite="{{post.favorite}}" on-favorite-tap="{{handleFavorite}}" hidden?="{{show == 'favorites' && !post.favorite}}">
<img src="{{post.avatar}}" width="70" height="70">
<h2>{{post.username}}</h2>
<p>{{post.text}}</p>
</post-card>
</template>
</div>
I am a dummy.
You might need to update the enclosing layout element's attributes.
For example, in my app, I have a core-card with paper-item(s) in it, stacked vertically. The attributes of the core-card contains : vertical layout. If I change the attributes to horizontal layout, the items are stacked horizontally.
Here is the HTML :
<core-card id="core_card" vertical layout >
<paper-item label="Title 0" icon="keep" id="paper_item0" center horizontal layout>Description 0</paper-item>
<paper-item label="Title 1" icon="keep" id="paper_item1" center horizontal layout>Description 1</paper-item>
<paper-item label="Title 2" icon="keep" id="paper_item2" center horizontal layout>Description 2</paper-item>
</core-card>
For more information on layout attributes and flexbox : see polymer documentation
One thing to consider when modifying polymer examples is to look at
https://www.polymer-project.org/docs/polymer/layout-attrs.html
What still trips me is the use o start, center and end instead of left center and right for both vertical and horizontal layout.
Suppose I have the following html:
<div style="width:200px;height:200px;overflow:scroll">
...
</div>
If the stuff in this div ends up overflowing, the most popular way to change the scrolling position of this item is to use jQuery.scrollTop(). However, I have a situation where I would like to set the initial scroll position of the div using the source HTML. Is there a way of doing this? All examples I see online for doing this end up using javascript.
One way I tried is to write a scrollTop property on the element, like so:
<div scrollTop=20 style="width:200px;height:200px;overflow:scroll">
...
</div>
However, this does not work. Surely, there must be a way to set the initial scrolling position of an overflowing item via HTML/CSS...
Here is a full version of this code that illustrates that it doesn't work- The vertical scrollbar remains at "0": http://jsfiddle.net/gueBZ/1/
Can anyone help me to make it work? Thanks so much for any pointers!
<div style="width:200px;height:200px;overflow:scroll">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="hello">autoscroll here</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
then open the page as
page.html#hello
this is the only thing you can do, with HTML only