At the moment the paper-card element has an attribute heading that I can use to setup the header of the card as following:
<paper-card heading="my header">
<div class="card-content>
<span>My body</span>
</div>
</paper-card>
I need to add to the right of the header area two paper-icon-button so that I can obtain the following result:
Is this possible in Polymer 1.3?
Here are examples https://elements.polymer-project.org/elements/paper-card?view=demo:demo/index.html&active=paper-card
Use class content-card and don't use header attribute in paper-card element
<paper-card>
<paper-icon-item class="card-header">
<iron-icon class="avatar" item-icon src="masters-icon.ico"></iron-icon>
<paper-item-body two-line>
<div>My title</div>
<div secondary>my secondary text</div>
</paper-item-body>
</paper-icon-item>
<iron-image sizing="cover" src="{{url}}"></iron-image>
<div class="card-content">
<p>Some other text</p>
</div>
</paper-card>
You can find an example on the components page here https://elements.polymer-project.org/elements/paper-card?view=demo:demo/index.html&active=paper-card under the section "Paper-cards can contain advanced content"
Related
I'm trying to have a flex-col, where the image goes first. However, the code below will only change the order when the flex direction is row(image on left). It will not work on row.
</head>
<body>
<div class="flex-row">
<div class="order-2">
<h1>Flying Kites</h1>
<h2>Subheader</h2>
</div>
<img class="order-1" src="/examples/images/kites.jpg" alt="Flying Kites">
</div>
</body>
</html>
In order to have classes order-x work, the parent element needs to be flex:
<div class="flex">
<div class="order-2">
<h1>Flying Kites</h1>
<h2>Subheader</h2>
</div>
<img class="order-1" src="/examples/images/kites.jpg" alt="Flying Kites">
</div>
See live example: https://play.tailwindcss.com/AFxRfm5JjN
See doc usage: https://tailwindcss.com/docs/order#usage
In order to flex the div, the parent class must be 'flex' for it to work.
<div class="level is-mobile name_logo">
<div class="level-left">
<div class="level-item has-text-centered">
<p class="heading">Example 1</p>
<p class="is-size-5 has-text-weight-bold title">Example 2</p>
</div>
</div>
In this example I use is-mobile class do make force classes inside to display in a row. The problem is this is forcing the <p class="heading"> and <p class="title"> to be displayed in a row to. Not even using <br> tag I am having success to display these two <p> in column. Is there anything I can do?
Are you trying to do something like the Mobile Level example on the Bulma docs? https://bulma.io/documentation/layout/level/#mobile-level
.level-item is set to display:flex, which makes the level items show in rows. In the example provided in the Bulma docs, there's an extra div wrapping the .heading and .title elements. Add that extra div and the text will show on two lines.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
<div class="level is-mobile name_logo">
<div class="level-left">
<div class="level-item has-text-centered">
<div>
<p class="heading">Example 1</p>
<p class="is-size-5 has-text-weight-bold title">Example 2</p>
</div>
</div>
</div>
</div>
When I use paper-drawer-panel, the viewport is not correct. As shown in the first screen shot, the Y scroll bar is there as it should be....but the bottom of the viewport does not equal the end/bottom of the y scrollbar. In otherwards, there is still a portion of the content not showing that is hidden.
If I remove paper-drawer-panel, then everything is good and the Y scroll bar scrolls to the bottom of the viewport.
This is in index.html.
Bad - with paper-drawer-panel:
<template is="dom-bind" id="app">
<paper-drawer-panel force-narrow="true">
<div drawer>
<drawer-custom></drawer-custom>
</div>
<div main>
<div id="header-v-center">
<paper-icon-button id="paper-toggle" icon="menu" paper-drawer-toggle>
</paper-icon-button>
<div id="header-text-middle">SPICES OF THE WORLD</div>
<div id="header-text-right">A SPECIAL EDITION! </div>
</div>
<div id="video-player-header" onclick="page('/home')" style="display: none">
<div>
<iron-icon icon="icons:arrow-back"></iron-icon>
</div>
</div>
<video-selection></video-selection>
<video-player></video-player>
</div>
</paper-drawer-panel>
</template>
GOOD - without paper-drawer-panel:
<template is="dom-bind" id="app">
<div main>
<div id="header-v-center">
<paper-icon-button id="paper-toggle" icon="menu" paper-drawer-toggle>
</paper-icon-button>
<div id="header-text-middle">SPICES OF THE WORLD</div>
<div id="header-text-right">A SPECIAL EDITION! </div>
</div>
<div id="video-player-header" onclick="page('/home')" style="display: none">
<div>
<iron-icon icon="icons:arrow-back"></iron-icon>
</div>
</div>
<video-selection></video-selection>
<video-player></video-player>
</div>
</template>
Without seeing the live page, most likely you have a height: 100%; for your content region when it should be height: calc(100% - Xpx); where X is the height of your header.
I have a paper-dialog with a fixed size and I want to align a <div> containing a button at the end. The paper-dialog contains a header, paper-tabs that controls the iron-pages below. The iron-pages contain the button.
<style is="custom-style">
paper-dialog {
width: 1000px;
height: 585px;
}
</style>
<paper-dialog>
<header>Header</header>
<paper-tabs selected="{{selected}}>
<paper-tab> tab1</paper-tab>
<paper-tab> tab2</paper-tab>
</paper-tabs>
<iron-pages selected="{{selected}}">
<div id="tab1" container class="container layout vertical">
<div> Text section tab1</div>
<div class="flex></div>
<div>
<paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
</div>
</div>
<div id="tab2" container class="container layout vertical">
<div> Text section tab2</div>
<div class="flex></div>
<div>
<paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
</div>
</div>
</iron-pages>
</paper-dialog>
But I can never get the buttons to be aligned at the end of the paper-dialog. Only by using a fixed size for the container classes inside the iron-pages. The length of the text section in tab1 and tab2 differ greatly. That is why I want to modify how the buttons are aligned and are positioned at the button. How can I do this without using a fixed size?
I solved my issue. The problem was that every parent class of the buttons have to use all the remaining space. So add flex to every parent class. Secondly add end to position the buttons on the bottom.
<style is="custom-style">
paper-dialog {
width: 1000px;
height: 585px;
}
</style>
<paper-dialog class="flex layout vertical">
<header>Header</header>
<paper-tabs selected="{{selected}}>
<paper-tab> tab1</paper-tab>
<paper-tab> tab2</paper-tab>
</paper-tabs>
<iron-pages class="flex layout vertical" selected="{{selected}}">
<div id="tab1" container class="container flex layout vertical">
<div> Text section tab1</div>
<div class="flex></div>
<div class="layout horizontal end">
<paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
</div>
</div>
<div id="tab2" container class="container layout vertical">
<div> Text section tab2</div>
<div class="flex></div>
<div>
<paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
</div>
</div>
</iron-pages>
</paper-dialog>
See also: Fill page with iron-pages element
I need to target each last <div> before each <h3>. Is there a programatic way this can be done in css?
For other reasons, I can not / don't want to target <h3> instead.
<div id="main">
<h3>Title</h3>
<div class="post">…</div>
<div class="post"><!-- Target this div--></div>
<h3>Title</h3>
<div class="post">…</div>
<div class="post">…</div>
<div class="post">…</div>
<div class="post"><!-- Target this div--></div>
<h3>Title</h3>
<div class="post">…</div>
<div class="post">…</div>
<div class="post"><!-- Target this div--></div>
</div>
Actually this isn't possible.
If you are able to wrap the blocks into parent tags you can get each last child by CSS selectors #main .post:last-child:
<div id="main">
<div> <!-- wrap with "h3" WORKS -->
<h3>Title</h3>
<div class="post">…</div>
<div class="post"><!-- Target this div--></div>
</div>
<h3>Title</h3>
<div> <!-- wrap without "h3" also WORKS -->
<div class="post">…</div>
<div class="post">…</div>
<div class="post"><!-- Target this div--></div>
</div>
</div>
Note: The :last-child selector is not supported in IE8 and earlier versions.
What do you mean with: "For other reasons, I can not / don't want to target instead."?
jQuery workaround will work exactly like you want it with your original markup:
var $Main = jQuery('#main');
$Main.find('h3').prev().add( $Main.find(':last') ) //.text('<!-- Target this div-->');
At some point in the future, when selectors level 4 are implemented:
#main div:not(:has(+ div))