Recently tried to migrate a Polymer1 app to Polymer2 but I am really having a hard time to get stuff working. Here are some things I noticed when trying:
Do I really have to hand pick every paper/iron element for polymer2? I used to just install paper-elements and the like, this was a convenient way to simply get all components in a category, is there a similar way to get all paper-elements for polymer 2?
The Api for paper-toolbar specifies a justify property that would center the content, but this does not seem to work in the case below:
```
<paper-toolbar class="tall" justify="center" bottom-justify="center">
<div slot="top" class="title">Top Title</div>
<div slot="middle" class="title">Middle Title</div>
<div slot="bottom" class="title">Bottom Title</div>
</paper-toolbar>
```
The fullbleed class on the body does not work anymore. I've included the iron-layout-classes and iron-layout files, but these do not have any effect :(
Am I missing something?
Yes you have to pick every paper/iron elements.
Elements have dependencies and you just need to install few of them to have a whole lot of polymer elements, I don't see the advantage of downloading a pack of elements when you will just not use them all anyways.
And the reason why middleJustify or bottomJustify are not working in your case is because you are using a class="title". the toolbar will turn the slot title into a flex element, that means the element will stretch as far as possible to the right in the available space of its container. Because the title is taking all the available space justifying it to center will just fail (trying to center something that's all-contained in its container and it won't move).
If you want to justify to the center, try that :
<paper-toolbar class="tall" bottom-justify="center">
<div slot="top" class="title">Top Title</div>
<div slot="middle" class="title">Middle Title</div>
<div slot="bottom">Bottom Title</div> <!-- remove the class title, not recommended for a title -->
</paper-toolbar>
or
<paper-toolbar class="tall" justify="center" bottom-justify="center">
<div slot="top" class="title">Top Title</div>
<div slot="middle" class="title">Middle Title</div>
<div slot="bottom" class="title" style="text-align:center;">Bottom Title</div>
</paper-toolbar>
Related
I am editing a site to be 3 columns.
Here is example page, currently 2 columns:
https://courses.guitar-dreams.com/lessons/an-introduction-to-triads-and-their-inversions/
So what we have is a header, sidebar, content area, and footer. Seems pretty straightforward. But as I look at the HTML, the structure is so odd. Here is how this page is arranged:
<body>
<div class="learndash-wrapper">
<div class="ld-focus">
<!-- notice how it is starting out with sidebar even though we have 2 headers on top of each other... -->
<div class="ld-focus-sidebar">
<div class="ld-focus-sidebar-wrapper">
<div class="ld-course-navigation">
Here is sidebar navigation content
</div> <!--/.ld-course-navigation-->
</div> <!--/.ld-focus-sidebar-wrapper-->
</div> <!--/.ld-focus-sidebar-->
<!-- ok now the main content -->
<div class="ld-focus-main">
<!-- oh but wait, let's add header first! And namely the 2nd header! -->
<div class="ld-focus-header">
Here is the 2nd header
</div> <!--/.ld-focus-header-->
<!-- ok now that we added 2nd header, let's add main content! -->
<div class="ld-focus-content">
here is main content
</div> <!--/.ld-focus-content-->
</div> <!--/.ld-focus-main-->
</div> <!--/.ld-focus-->
<!--/.ld-learndash-wrapper-->
<!-- Oh wait, now that we are at end, let's add that first header now! -->
<div id="wpadminbar" class="">
The topmost header
</div>
</body>
You see what I mean? I am not a web design expert, but I tend to believe that layout of pages generally should follow similar principles to the document publishing world. That is, if your page starts with header, probably good idea for that to be the first design element that you add, and not the last, and moreover, that the design element, if possible, should be placed in the design environment in a way that has physical correspondence to the rendered document.
I am trying to add a right sidebar to make it a 3 column layout. I tried adding a wrapper div to <div class="ld-focus-main"> with display: flex and followed some of the approaches here:
http://geniuscarrier.com/2-columns-layout-with-flexbox/
<div class="ld-focus-main">
<div class="ld-focus-header">
</div> <!--/.ld-focus-header-->
<div class="mywrapper">
<div class="ld-focus-content">
here is main content
</div> <!--/.ld-focus-content-->
<div class="mysidebar">My sidebar</div>
</div>
</div> <!--/.ld-focus-main-->
Here I used (as inline styles)
.mywrapper {
display: flex;
align-items: center;
}
.ld-focus-content {
flex-grow:1
}
I didn't use properties on the right sidebar since in the example in the link above it suggested that if all is well with wrapper and left then right part will follow suit.
But above doesn't produce desired result. At bottom of page linked above you see my added divs and "My Sidebar". I think part of the problem is that the theme template uses such bizarre placement of divs and properties such that when I try to add that right column the underlying structure is not making it work as expected. Sort of like 2nd, 3rd order effects... as well as a Jenga game within a Jenga game.
I was thinking about just redoing the entire template, but at this point I would prefer to just add a sticky right sidebar without a ton of rework. That said, to me it seems the proper way to do such a layout, syntactically would be
<div class="mainwrapper">
<div class = "firstheader"></div>
<div class = "secondheader"></div>
<div class = "outercontentwrapper"></div>
<div class = "leftnavigation"></div>
<div class = "contentwrapper">
<div class = "maincontent"></div>
<div class = "rightsidebar"></div>
</div>
</div>
<div class = "footer"></div>
</div>
Just not sure all the specific properties such that the page would behave as is now, plus add a right sidebar.
So with all that, how would you go about adding that right column?
Thanks!
Brian
I have a number of controls declared like this.
<div class="row">
<div class="col-sm-12">
<div>Caption</div>
<input type="text" class="form-control">
</div>
</div>
Trying to refactor my code, I introduced a component to encapsulate this particular behavior.
<div class="row">
<app-textbox [caption]="'Caption'"></app-textbox>
</div>
The markup for the component is just a copy of the original code.
<div class="col-sm-12">
<!-- <div style="width:100%;"> -->
<!-- <div class=""> -->
<div>{{data?.caption}}</div>
<input type="text" class="form-control">
</div>
The problem arising is with the class row seems not to propagate to the component. It spreads to the full width (as it's set to 12 but it's not the width of the component holding the class row - it's smaller). Analyzing the markup in the console of the browser, I can see that the only difference is that there's a tag for the custom control injected in the structure like this:
div class="row"
-- app-textbox
-- -- div class="col-sm-12"
-- -- input
while the "old-style" generates this:
div class="row"
-- div class="col-sm-12"
-- input
One way to handle it is to set the columns on the component in the main page like this.
<div class="row">
<app-textbox [caption]="'Caption'" class="col-sm-12"></app-input-text>
</div>
There are, however, two issues that bother me with it making me feel reluctant to this approach. First one is that the component still gets a (very tiny) extra margin of 15px on each side relative to the enclosing component (all the item have it but the custom app-textbox gets it twice, probably due to encapsulation). The other issue is that this kind of defeats the purpose of the encapsulation.
I've tried spreading the width of the components and setting different styles/classes to the input boxes etc. After a few hours, I realize that I'm at a loss.
Is it possible to make the injected tag app-textbox spread fully in its parent?
I had the same issue. Here is the way I solved it.
Original app.component.html:
<div class="container-fluid">
<div class="row">
<app-one></app-one>
<app-two></app-two>
</div>
</div>
Original one.component.html:
<div class="col-9">
<p>One</p>
</div>
Original two.component.html:
<div class="col-3">
<p>Two</p>
</div>
I moved 'col' divs from one and two components to the app component:
New app.component.html:
<div class="container-fluid">
<div class="row">
<div class="col-9">
<app-one></app-one>
</div>
<div class="col-3">
<app-two></app-two>
</div>
</div>
</div>
New one.component.html:
<p>One</p>
New two.component.html:
<p>Two</p>
For css to be visible in all your components, add it directly to the index.html file, or to app.component.css.
For example on the index.html as the last head element include:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
That URL was taken from : https://getbootstrap.com/docs/3.3/getting-started/
(I'm assuming that your Angular2 project was generated with angular-cli and the files follow the standard names)
About the extra margin, try checking app.component.html. Maybe there's a container div around it. Also check index.html itself
I would like to know if, according to BEM methodology, I can have the following structure:
.block1
.block1__element1
.block2
.block1__element2 <-- ??
Am I allowed to use an element from a parent block, inside a children block?
Thanks.
UPDATE:
This is the actual DOM structure:
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
// <-- ???
</div>
</div>
</div>
According to best practices of BEM methodology: am I allowed to move the element with head__user inside the menu block? Or all elements inside the menu block need to start with the menu__ prefix?
I hope this clears out the problem.
I been using BEM for sometime and from what I got it's not recommended nor intended to be used like that. You can nest different BEM elements to each other like menu-blockintohead-block, but menu-block items should not go outside its parent menu-block, like you should not put menu-block__item at the top of head-block. Does it makes sense? :)
To illustrate there are two ways to go. What should be noted here is that depending on the scale of your project and how you build things (component based?). If you don't have a large project and are not doing or reusing the menu else where you can do it both ways. Lets say your menu is huge amount of html/css I would do it like #1
This is not correct
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
<div class="head__something"></div>
</div>
</div>
</div>
Recommended solution
Based on this part of the documentation. Now you can chop your own header design into blocks, does this below match?
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
<div class="menu__something"><img src="" class="menu__image" /></div>
</div>
</div>
</div>
I think this variant is allowed:
<div class="head">
<div class="head__nav">
<div class="menu">
<div class="head__user"></div>
</div>
</div>
</div>
I haven't found the current part in the official BEM documentation, but I've found this part:
The block name defines the namespace, which guarantees that the elements are dependent on the block (block__elem).
A block can have a nested structure of elements in the DOM tree:
Example
<div class="block">
<div class="block__elem1">
<div class="block__elem2">
<div class="block__elem3"></div>
</div>
</div>
</div>
However, this block structure is always represented as a flat list of elements in the BEM methodology:
Example
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
This allows you to change a block's DOM structure without making changes in the code for each separate element:
Example
<div class="block">
<div class="block__elem1">
<div class="block__elem2"></div>
</div>
<div class="block__elem3"></div>
</div>
The block's structure changes, but the rules for the elements and their names remain the same.
I understand it as there is only one rule about HTML structure for elements in BEM: an element has to be inside its block (it doesn't matter how deep).
One possible problem that I can imagine for this case is using some of BEM tree formats. But if you don't need it, I think there's no problem.
I would consider making the potential head__something into simply something, and then to provide multiple modifications of it. e.g. something--head and something--menu.
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
<div class="something--menu" />
</div>
</div>
<div class="something--head" />
</div>
Also, refactoring further, I would consider getting rid of head__nav as it probably does not add any richer semantics than menu.
<div class="head">
<div class="head__user"></div>
<div class="menu">
<div class="something--menu" />
</div>
<div class="something--head">for those cases where you want <code>something</code> directly descending from <code>head</code></div>
</div>
The content of my scrolling container stops scrolling when it is, for instance, viewed on an iPad. How can I keep the children from collapsing into themselves and make the scroll?
I don't know if it's specifically a material issue, or if it's the way flex works on different browsers, but I'm seeing this:
This is a cleaned up version of the HTML output:
<md-content class="layout-column flex">
<div class="layout-column">
<div class="layout-padding layout-column">
<div class="layout-column" ng-repeat="item in items track by $index">
<div class="layout-margin layout-row">
<!--more stuff inside with various layout rules-->
</div>
<div class="layout-column">
<!--more stuff inside with various layout rules-->
</div>
</div>
</div>
</div>
</md-content>
This happens in some browsers with nested scrolling/flex elements, such as nested md-content elementes
With HTML5, there were many additional elements added for structuring documents like blog posts or long texts. But what I have problems coming up with is a semantic way of structuring UI components.
On a typical webapp, you have many different components such as modals, button elements, interacitve forms, containers, and so on. Often, I see those things being constructed using div and span only or by misusing header, footerand nav elements and I get the feeling I missed something out.
Is it really semantic to create all structural, not content-related elements using the div element only? Will there be a more diverse element choice in the future?
EDIT: Here's a short example of what I mean:
<div class="modal foo">
<div class="inner wrapper">
<div class="upper bar">
<div class="inner">
<div class="window-name">
<span class="upper heading">
<h1>Foo</h1>
</span>
<span class="lower heading">
<h3>Extra Baz</h3>
</span>
</div>
<div class="buttons">
<div class="button close"><span class="icon"><i>×<i></span></div>
<div class="button maximize"><span class="icon"><i class="fa fa-maximize"><i></span></div>
</div>
</div>
</div>
<div class="content well">
<!--
Whatever happens inside the modal window named foo.
Pretty sure it needs many divs as well, though.
-->
</div>
<div class="lower bar">
<div class="buttons">
<div class="button help"><span class="icon"><i>?<i></span></div>
</div>
<span class="info">
<p>Enter your barbaz.</p>
</span>
</div>
</div>
</div>
The last W3C working draft for HTML 5.1 was released two days ago, on April, 13, and it is "semantic-centered": see
http://www.w3.org/TR/html51/Overview.html
It is an interesting reading, while waiting to have all those fancy things implemented by the most common browsers.
Is it really semantic to create all structural, not content-related elements using the div element only?
Not in my opinion. Even without to cite "the media is the message", everything has something to do with the content, even "open" and "close" buttons allowing users to see the content.
Will there be a more diverse element choice in the future?
Of course! And with a lot of proprietary prefixes, as usual, just to keep our life busier.
Ignoring div and span elements (which are meaningless, except for the case of specifying some meaningful attributes), your snippet consists of this:
<h1>Foo</h1>
<h3>Extra Baz</h3>
<i>×</i>
<i></i>
<!-- content -->
<i>?</i>
<p>Enter your barbaz.</p>
This is what your content looks like from the semantic perspective. Not very clear what gets represented here.
Using a heading element for a subtitle (h3 in your case) is not appropriate. (Or, if it’s not a subheading but really a new/own section, don’t skip a heading level; but I’m assuming the former.) Use one heading element, and use p for the subheading, and group them in header.
Using i elements for adding icons via CSS is not appropriate. Either use CSS only (with the help of existing elements), or, if you have to add an empty element, use span.
Using span/div elements for buttons is not appropriate. Use button instead.
As you are already using a heading element, it’s recommended to explicitly specify a sectioning content element. Depending on the context of this content, it may be article or aside (or nav if it’s for navigation), but in all other cases section.
Following this, you’d get:
<section>
<header>
<h1>Foo</h1>
<p>Extra Baz</p>
</header>
<button>Close</button>
<button>Maximize</button>
<!-- content -->
<button>Help</button>
<p>Enter your barbaz.</p>
</section>
Now you may add header/footer elements for those parts that are not part of this section’s (not this document’s, it’s only about this section!) main content.
You may, for example, enclose the maximize/close buttons in a header (however, opinions if this would be appropriate differ).
HTML 5.1 will probably have a menu element and a dialog element, which might be useful in this case.