I'm trying to learn Polymer. Currently, I have a custom element that needs to animate content within some paper. In an attempt to do this, I currently have the following:
<paper-material elevation="4">
<h4>Hello</h4>
<neon-animated-pages selected="0" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
<div>
Thank you for visiting. I think you'll enjoy what you're
gonna find. To dive in, click the "Next" button.
<br />
<paper-button>Next</paper-button>
</div>
<div>
some more information
</div>
</neon-animated-pages>
</paper-material>
The odd part is, the content within the neon-animated-pages element does not render within the paper properly. I've included a screenshot below showing how it renders.
What am I doing wrong?
If you look at the source of neon-animated-pages, you will see that it is a position: relative div, and its children (the pages) are all position: absolute (taken out of the document flow).
This means that unless you give a height to your neon-animated-pages element (either by directly setting the height CCS property or the fitor flex class), you will see some overflow like this.
Related
I am new to HTML. In my HTML code I have different sections. In my projects section I have 3 child sections but somehow my resume section header which is underneath my projects section and a separate section display as part of the projects section.
link to my repository: https://jobarkhuizen.github.io/FreeCodeCampPersonalPage/
I run my code through W3C validator and included the source, outline and clean up html in the run. Validator run return no error and the outline shows that Projects and Resume sections are both children of the Body tag and Columns Tribute page, Landing page and Technical page are children of Projects section
<section id="projects">
<h2><a id="portfolio">Projects</a></h2>
<section id="col1"><h3 style="text-align: center;">Tribute Page</h3>
<a href="https://jobarkhuizen.github.io/FCC_Tribute_Page/" target="_blank">
<img class="project-tile" src="tributepage.jpg" alt="Tribute Page Picture"></a>
<p>The following guidelines was provided for the tribute page. It should have a div element with a corresponding id="img-div". Within the img-div element, there should be an img element with a
corresponding id="image". Within the img-div element, there should be an element with a corresponding id="img-caption" that contains textual
content describing the image shown in img-div. There should be an element with a corresponding id="tribute-info", which contains textual content
describing the subject of the tribute page. Ther should be an a element with a corresponding id="tribute-link", which links to an outside site
that contains additional information about the subject of the tribute page, this link must open in a new tab. The img element should responsively
resize, relative to the width of its parent element, without exceeding its original size and should be centered within its parent element.
</p>
</section>
<section id="col2"><h3 style="text-align: center;">Landing Page</h3>
<a href="https://jobarkhuizen.github.io/LandingPage/" target="_blank">
<img class="project-tile" src="Landingp.jpg" alt="Landing Page Picture"></a>
<p>The following guidelines was provided for the product landing page. The page should have a header element with a corresponding id="header".
An image within the header element with a corresponding id="header-img".
Within the #header element a nav element with a corresponding id="nav-bar".
At least three clickable elements inside the nav element, each with the class nav-link.
When you click the nav-link button in the nav element, it goes to the corresponding section of the landing page.
Embed a watch-able video with id="video".
A form element with a corresponding id="form". Within the form, there is an input field with id="email" where you can enter an email address.
The #email input field should have placeholder text to let the user know what the field is for and uses HTML5 validation to confirm text is correct.
Within the form, there is a submit input with a corresponding id="submit".</p>
</section>
<section id="col3"><h3 style="text-align: center;">Technical Page</h3>
<a href="https://jobarkhuizen.github.io/FCC-Technical-Page/" target="_blank">
<img class="project-tile" src="technicalp.jpg" alt="Technical Page Picture"></a>
<p>The following guidelines was provided for the technical page. Should have a main element with a corresponding id="main-doc", which contains the page's main content.
Within the #main-doc element, you should have several section elements, each with a class of main-section.
The first element within each .main-section should be a header element which contains text that describes the topic of that section.
Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it.
Any spaces should be replaced with underscores (id="Javascript_and_Java").
The .main-section elements should contain at least 10 p elements in total.
The .main-section elements should contain at least 5 code elements in total.
The .main-section elements should contain at least 5 li items in total. A nav element with a corresponding id="navbar".</p>
</section>
</section>
<section>
<h2><a id="resume">Resume</a></h2>
<p>Studying Responsive Web Design through FreeCodeCamp. My next project is studying and completing JavaScript and SQL.</p>
<p>I have done automated testing on Winrunner and QTP and managed projects through TestDirector.</p>
<p>Did testing in both waterfall and agile development environments. </p>
<p>This portfolio page is for Freecodecamp certification. I have loaded a personal portfolio page on my Github account which I will update as soon as possible.</p>
</section>
The headings should have a brown background only and be center aligned, but my whole Projects section has a brown background and the Resume heading is on the right side of the page within the projects section
When you use css float property as left, then the content flows to the right of that element. This is unlike the normal flow of block elements which is vertically stacking one below another.
There are many ways to get around this, one way suggested in the spec is to use clear as both:
both: Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that
resulted from elements earlier in the source document.
So make your resume section as
<section class="resume">
</section>
and add its css as:
.resume {
clear: both;
}
For the complete story refer Visual Formatting Model
Also, note that CSS has introduced a number of new features that we dont have to use floats for a column layout. We have grid and flex layouts for the same.
Please use the below code
CSS
<pre>
<style>
.clear{clear:both;}
</style>
<section id="projects">
...
</section>
<div class="clear"></div>
</pre>
the application I write consists of many routes with transition animations between routes. It looks like:
<section class="a animated bounceUp">...</section>
<section class="b">...</section>
When I change route it will show animation and render new content - pretty simple behavior.
Today I created a new section and I need to put inside fixed filters pinned to the viewport. It should look like:
<section class="a">...</section>
<section class="b">...</section>
<section class="c animated bounceDown">
<div class="fixed-filters">...</div>
<div>...</div>
</section>
And here I met my problem. I added fixed position to div, but it doesn't work. The element hasn't fixed position.
Of course I made research about that and I found articles like:
'transform3d' not working with position: fixed children
and
https://www.achrafkassioui.com/blog/position-fixed-and-CSS-transforms/
Which says that I can't do that, because:
'transform' creates a new local coordinate system:
In the HTML namespace, any value other than none for the transform
results in the creation of both a stacking context and a containing
block. The object acts as a containing block for fixed positioned
descendants.
Is that over? Or maybe is there any solution how to do that?
I will be grateful for your help in solving this problem or finding a good workaround that anyone could use.
I have a similar question as this thread, but the answer doesn't seem to be listed anymore. I have a list of tiles that show a property image and some relevant information. I'd like each to be a full link to another page with more information on the property.
I've made my tiles into a directive, and currently the html content of that directive is wrapped in an anchor tag. Which works to reach my specified link, however that anchor tag only matches the height of the mdGridTileFooter.
Is there a way to make the entire tile clickable? So that the user can click on any part of it and access the intended link (not just the bottom footer?
The HTML Directive:
<a ng-click="spVm.linkToProperty(proforma)" ng-href="{{spVm.path}}">
<div>
<md-grid-tile-footer class="saved-prop-address">
<div class="saved-prop-address-title" ng-bind="spVm.city"></div>
<div class="saved-prop-address-subtitle"
ng-bind="proforma.listing.update_date | date: 'MMMM dd'"></div>
</md-grid-tile-footer>
</div>
</a>
The HTML Page with the Tile List:
<md-grid-list md-cols-xs="2"
md-cols-sm="3" md-cols-md="3" md-cols-gt-md="6"
md-row-height="1:1" md-gutter="4px">
<md-grid-tile class="saved-prop"
ng-repeat="proforma in sdVm.pageGroups[sdVm.saved.idx]"
ng-click="sdVm.showSelectedProperty(proforma); sdVm.linkToProperty(proforma)"
ng-href="{{sdVm.path}}"
ng-style="{'background-image':'url({{proforma.thumbnail_url}})'}">
<pgo-saved-property proforma="proforma">
</pgo-saved-property>
</md-grid-tile>
</md-grid-list>
Thank you!
Since it looks like the directive had no height, adding any responsive height/width styling to the anchor tag won't work.
Adding this code to the css for the directive, and the anchor tag, will bring the anchor/link to the full height and width of the tile.
style="display:block;height:100%;width:100%;"
And any responsive changes that occur with the tiles will work with this code as well.
I want to add core-icon-button (e.g. "+" icon) at the end of the toolbar of core-scaffold, that is, inside of
< div tool >
How can I do that?
The "+" icon should be shown at the end of the toolbar in any width of the page.
Thanks.
The core-scaffold element is composed by 3 content areas:
navigation: everything you put inside an element with the attribute navigation or nav is then injected as the content for a core-drawer-panel
tool : here the tool attribute is used and the content of the tool element is used as the content for a core-toolbar inside a core-header-panel
the rest of the content is displayed in the center of the page
So to answer your question:
<div tool>
<div>My Main Content Title in the Toolbar</div>
<core-icon-button icon="add" on-tap="{{addAction}}"></core-icon-button>
</div>
More info on the Building single page apps using web components article on the Polymer website, or by digging into the code of the element
I just skinned jquery UI Accordion. Everything works fine. But as soon as a add a div or a hr between 2 items it goes all wierd
here is my fiddle
http://jsfiddle.net/cancerian73/bgkCg/1/
.divider{width:100%; height:15px; background-color:#F00;}
As described in the jquery-ui accordion documentation, you must have pair of header/content in your markup :
The markup of your accordion container needs pairs of headers and content panels
[...]
Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the header option for information on how to use custom markup structures.
Because you are adding elements between header/content pair :
<div class="divider"></div>
you must use the header option. All you need is to specify which elements are headers in your markup and add your content as siblings of those elements.
Have a look in this jsFiddle and tell me if it feet your needs.