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.
Related
In the development of html web pages. What is the difference between :
align="middle"
align="center"
Historicaly speaking, middle refers historically to being in the centre of both vertical and horizontal dimensions. I remember (vaguely) using this syntaxing back on HTML3 and the very early days of web design, particularly for centering table cell contents both in the X and Y planes.
As far as I can tell middle can now only be used in inline <table> construction code, and is the same output as center.
center refers more often (but not always) to the horizontal plane only, so horizontally centres an element such as horizontally centering text in a column.
Nowerdays (ie since 2006) if middle is a valid value at all, it is simply another word for center and wll be silently converted by the HTML renderer.
BUT
Generally speaking, as of 2017 (and several years beforehand!) you should not be using these sort of construction syntaxes in HTML at all, instead passing all this technical layout construction stuff to CSS).
So, I'm attempting to make my own website (Yeah, I finally sucked it up and started doing markup, sigh) - problem I'm having is I'm trying to center a button, and it's offset a little. Without the <center> it's all the way to the left.
Also tried :
style="align-items:center"
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<center><input class="button0" value="Install Redux" type="button" /></center>
</fieldset>
</div>
</div>
You just have to put <center> before your <div> and close it after </div>.
Like this:
<center>
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<input class="button0" value="Install Redux" type="button" />
</fieldset>
</div>
</div>
</center>
I've also made a CodePen and a JSFiddle for you.
Try text-align:center on the parent, or use left:0;top:0;position:relative;webkitTransform:translate3d(-50%,0%,0%); where parent doesn't have position:static (the default)
I would also recommend checking out Bootstrap because it has a nice grid layout that lets you define which 12ths of the page you want columns to lay in, simply by defining classes like .btn-default or .nav or in your case class="col-xs-12" inside that other column
They also have really nice styles for forms and input buttons etc. (see video on my example site below)
Try resizing your browser while looking at their examples. Pretty much, you define class="col-xs-12" if you want it to appear as 12/12 width of the row on extra small (mobile) and LARGER devices, and you can mix them class="col-xs-12 col-md-6" so it will split the row on larger (tablet) size devices. It's the number 1 repository on GitHub, and only takes about 30 minutes to read through the Grid Layout and search around for "Nav" and "Button" elements.
I recently made a quick site http://neaumusic.github.io, feel free to check it out, and good luck
Two ways:
1) Set margin-left: auto; AND margin-right: auto; to the containing div OR
2) Set display:flex; AND justify-content:center;to the parent container.
Google flex box for a little more information, its very useful for layout once you get the hang of it.
As stated in the comments, the center tag is no longer supported.
What about if you try #form-container { text-align: center; } ? It will center all children, including button.
I would definitely recommend using flexbox, the only issue being ie8/9 support.
It really makes layout so much easier and you don't have to create very specific, often arbitrary margins to get your stuff to align nicely, particularly vertical alignment.
Your alignment options are split between the container and the items. It does row and column layout too.
Here is a link I used to get me started.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm an HTML/CSS beginner. I've made my first homepage without too much difficulty but I want to add some style to my header.
Could someone point me in the direction of a tutorial or basics of how to build a grid for my links or a starting point? I've been looking for one and typing up grid or table results in tutorials to create actual tables so I've not found anything appropriate to what I want to do yet.
From what I can gather if I can separate each list item and give it a border my idea is achievable but I'm struggling with positioning.
I don't know if Dreamweaver supports it, but i'd wrap the menu in a <div> that uses the CSS display: table-row attribute. Then i'd wrap each menu item in a separate <div> that uses the CSS display: table-cell attribute.
There is plenty of resources out there, I would reccommend checking around CSS Tricks and Site Point.
Here is one from sitepoint
Here is one from CSSnewbie
Here is one from CSS-Tricks
Currently, I'm trying to center-align four(4) custom html-boxes I've made in Joomla 2.5.x., with the ability to center themselfs after one or more of the boxes is unpublished.
So far, I've tried to make a "div"(with a class) inside an article, where I loaded each of the four(4) custom html-boxes with {loadposition name}. But when I do that, the boxes gets centered under each other in the middle of the page.
In the following example, this is what I would like to get Joomla to do:
I've made five(5) boxes, each in custom html. Then loaded them into one article with the following method: qB48wJSFiddle. Here, when one uncomments a box, the rest of boxes get automatically centered.
With the example above, I would like to be able to do the same with 4 boxes, all of them made in custom-html in Joomla 2.5.x
Can anyone help me with this challenge, or point me in the right direction ?
Best regard
Jens.
<div> elements are block-level elements. That means that, unless you tell them otherwise, they will occupy 100% the width of their parent element.
It sounds like you are loading 4 custom_html modules, which are all 100% wide, which each have their contents centered.
The solution is to force them to the width of their content only by specifying your own custom css, e.g.
.module-centered {display: inline-block; text-align: center;}
Then, to make this apply to each module, set the module class (in the modules advanced settings) to module-centered (note the preceding space).
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>