I am building a web app using web components in LitElement.js. I have a div containing most components (let's call it .top) that specifies a grid layout and a background image. In the div I have a custom component (call it <custom-container> that is itself composed of custom components (call each instance <custom-leaf>). The container also uses display: grid and defines a grid-column-gap.
The problem: between each <custom-leaf> nested inside the <custom-container> there is a grid gap, however, it is invisible: instead of "piercing" through the background image, it shows the background image.
Here is some code:
index.html
<style>
.top {
grid-gap: 4px;
display: grid;
background-image: url("../img/background.jpg");
}
</style>
<body>
<div class="top">
<custom-container></custom-container>
</div>
<script src="customContainer.js"/>
<script src="customLeaf.js"/>
</body>
customContainer.js
class CustomContainer extends LitElement {
static get styles() {
return css`
:host {
display: grid;
grid-gap: 4px
}
`
}
render() {
return html`<custom-leaf></custom-leaf><custom-leaf></custom-leaf>`
}
}
Related
I am working on Ionic2 app. I want to zoom an image inside ion-scroll. How can I do that.
<ion-scroll scrollX="true" scrollY="true" zoom=true>
<img src="https://aa.com/app/package_content/s78c_e4vt6/main_images/pg_114.jpg" />
</ion-scroll>
I can zoom an image inside an ion-scroll by writing a small code for the tap event. This code is tested and working in android/ios ionic 2. Tap one time to zoom in and tap again to zoom out . For ios, just add overflow scroll in the ion-content for smooth scrolling.
.ts page:
export class PageName {
constructor() {
}
public tap: number = 600;
tapEvent(e) {
if (this.tap != 700) {
this.tap = 700;
}
else
this.tap = 600;
}}
html:
<ion-content style="background-image:url(assets/img/image1.PNG); white-space: nowrap; overflow: scroll; overflow-x:scroll; height: 100%">
<ion-scroll scrollX="true" scrollY="true" (tap)="tapEvent($event)" zoom="true" style="width:100%;height:100%;text-align:center;">
<div class="scroll-item" style=" width:100%; white-space: nowrap; overflow: scroll;">
<img [ngStyle]="{'width' : tap + 'px', 'min-width' : tap + 'px'}" alt="logo" src="assets/img/image2.PNG">
</div>
</ion-scroll> </ion-content>
I have a fairly simple flex layout built on Angular Material. It has a side panel that can be slid offscreen. I'm currently using negative margins to handle that so that the main content box follows its movement with a width adjustment, which works well. However, this results in animation that's not smooth. Apparently it's more of a chore for the graphics rendering mechanism than translation.
How can I accomplish the same using translateX? Here's my demo layout:
<div ng-app="sandbox" layout="row" class="wrapper" ng-class="{'sidebar-out': sidebarOut}">
<div flex="60" class="main md-padding">
<h1>Main Content</h1>
<button class="toggler" ng-click="sidebarOut=!sidebarOut">Toggle sidebar</button>
</div>
<div flex="40" class="sidebar md-padding">
<h2>Sidebar</h2>
</div>
</div>
The sidebar movement is handled with simple Angular directives and CSS:
.sidebar-out .sidebar {
transform: translateX(40vw)
}
Fiddle demo
The problem is that the main content box doesn't adjust size as the sidebar translates off screen. How can I make that happen? Thanks heaps.
Does this help in anyway? - Fiddle
I think there may be a better way to do this bit though...
.sidebar-out .main {
transform: scaleX(1.7)
}
Markup
<div ng-app="sandbox" layout="row" class="wrapper" ng-class="{'sidebar-out': sidebarOut}">
<div id="newMain" flex="60">
<div id="mainContent">
<h1>Main Content</h1>
<button class="toggler" ng-click="sidebarOut=!sidebarOut">Toggle sidebar</button>
</div>
<div class="main md-padding">
</div>
</div>
<div flex="40" class="sidebar md-padding">
<h2>Sidebar</h2>
</div>
</div>
CSS
.wrapper {
background: pink;
overflow: hidden;
}
#newMain {
position: relative;
width: 100vw;
height: 100vh;
}
#mainContent {
position: absolute;
z-index: 1;
}
.sidebar,
.main {
height: 100vh;
}
.main {
background: #fff;
transition: all .5s;
transform-origin: 0 0;
}
.sidebar-out .main {
transform: scaleX(1.7)
}
.sidebar {
background: #ddd;
transition: all .5s;
}
.sidebar-out .sidebar {
transform: translateX(40vw)
}
Question
How do I remove all the white space around the <paper-button> elements (only) inside a <paper-dialog> element?
So, for example, the hover effect should go all the way to the edge. But I still would like to retain the white space surrounding the paragraph text.
Demo:
Click this JS Bin for working example code.
Special note to Safari users: Use Chrome to view demo.
Attempts:
In the code and demo, I commented all my prior attempts /* No effect */.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
<style>
:host { /* No effect */
display: block; /* No effect */
margin: 0;
}
paper-dialog {
width: 400px;
margin: 0; /* No effect */
padding: 0; /* No effect */
}
paper-button {
width: 100%; /* No effect */
margin: 0; /* No effect */
}
paper-dialog::shadow { /* No effect */
margin: 0 auto; /* No effect */
padding: 0 auto; /* No effect */
}
paper-button:hover{
background-color: black;
color: white;
}
</style>
<template>
<paper-dialog id="dialog">
<p>
I want to remove the white space around the below buttons
so the hover effect extends to the edges of this dialog.
But I want to keep the white space around this text.
</p>
<div class="layout vertical">
<paper-button>One</paper-button>
<paper-button>Two</paper-button>
<paper-button>Three</paper-button>
</div>
</paper-dialog>
<paper-button on-tap="openDialog">Open Dialog</paper-button>
</template>
<script>
Polymer({
is: 'x-element',
openDialog: function(){
this.$.dialog.open();
}
});
</script>
</dom-module>
</body>
</html>
I think you just need to be a bit more specific on your selector try:
paper-dialog div {
margin: 0;
padding: 0;
}
but this will style all the div elements so I'm not sure if that's what you were after.
I have:
<style>
.parent{
display: flex;
flex-flow: row wrap;
}
.c1{
flex: 1 100%;
background: green;
}
.c2{
flex: 1;
background: red;
}
.c3{
flex: 4;
background: cyan;
}
</style>
<div class="parent">
<div class="c1">100% width</div>
<div class="c2">This text is big and long, and pushes the other div towards the bottom of the page and blabla.</div>
<div class="c3">This should not grow.</div>
</div>
And I wonder if it is posible to have the cyan div not to have 100%. A fixed size doesn't look right because I want it to grow with the flow of text in diferent window sizes.
Just add:
align-items: flex-start;
to the parent div. This makes the children align top and have diferent sizes. Strangely, the default valu for align-items is stretch.
Hi I want to have a dropdown list in my django form with a checkbox in front of every option in the drop down. I have tried using multiple choice field with selectmultiple widget but this displays every option with checkboxes on the page. They are not contained inside the drop down. is there a way to contain them inside the dropdown?
I see that you asked this four years ago so I doubt you are still looking for an answer, but I might as well provide in case someone else finds it!
Basically you want to make a div with an unordered list inside of it, where each item in that list contains a checkbox input.
Then, you use jQuery so that when you click on the div, it gets assigned the 'selected' class in its html.
Then you make your CSS so that the dropdown menu itself only shows up when it has the 'selected' class.
The JSFiddle is here (minus the django templating, obviously):
https://jsfiddle.net/lymanjohnson/2L71nhko/15/
And code is below:
HTML (django template):
<fieldset class="item toggle-item">
<div class="legend-container">
<legend>Choices</legend>
</div>
<ul class="scrollable-dropdown-list">
{% for choice in choices %}
<li>
<input type="checkbox" class="custom-control-input filter" id="choice_{{forloop.counter}}" name="choice" value="{{choice}}">
<label for="choice_{{forloop.counter}}"class="custom-control-label">{{choice}}</label>
</li>
{% endfor %}
</ul>
</fieldset>
JQUERY:
<script>
$(document).ready(function() {
// Listener for when you click on the dropdown menu
$('fieldset.toggle-item > .legend-container').on('click', (event) => {
// Adds or removes the 'selected' attribute on the dropdown menu you clicked
$(event.currentTarget).parent().toggleClass('selected')
// If you have multiple dropdown menus you may want it so that when you open Menu B, Menu A
// automatically closes.
// This line does that by removing 'selected' from every dropdown menu other than the one you clicked on.
// It's 'optional' but it definitely feels better if you have it
$('fieldset.toggle-item').not($(event.currentTarget).parent()).removeClass('selected')
})
// The user is probably going to expect that any and all dropdown menus will close if they click outside of them. Here's how to make that happen:
//This listens for whenever you let go of the mouse
$(document).mouseup(function(e)
{
// make this a variable just to make the next line a little easier to read
// a 'container' is now any
var dropdown_menus = $("fieldset.toggle-item");
// if the target of the click isn't a dropdown menu OR any of the elements inside one of them
if (!dropdown_menus.is(e.target) && dropdown_menus.has(e.target).length === 0)
{
// then it will de-select (thereby closing) all the dropdown menus on the page
$('fieldset.toggle-item').removeClass('selected')
}
});
})
</script>
CSS:
<style>
.item {
width: 33%;
margin: 2px 1% 2px 1%;
border: 0;
}
.item li {
list-style: none;
}
.scrollable-dropdown-list{
position: absolute;
max-height:200px;
width:33%;
overflow-y:scroll;
overflow-x:auto;
margin: 0;
padding-left: 1em;
border-style: solid;
border-width: thin;
border-color: grey;
background-color: white;
}
legend {
margin-bottom: 0;
font-size: 18px;
}
label {
font-weight: normal;
margin-left:20px;
}
.legend-container {
cursor: pointer;
width: 100%;
display: flex;
padding: 0;
margin-bottom: 0px;
font-size: 21px;
line-height: inherit;
color: #333;
border: 0;
border-bottom: none;
}
fieldset {
border-width: thin;
border-color: gray;
border-style: solid;
width:50px;
}
/* Note that all the browser-specific animation stuff is totally optional, but provides a nice subtle animation for the dropdown effect */
fieldset ul.scrollable-dropdown-list {
display: none;
-webkit-animation: slide-down .3s ease-out;
-moz-animation: slide-down .3s ease-out;
}
fieldset.selected ul.scrollable-dropdown-list {
display: block;
-webkit-animation: slide-down .3s ease-out;
-moz-animation: slide-down .3s ease-out;
}
#-webkit-keyframes slide-down {
0% {
opacity: 0;
-webkit-transform: translateY(-10%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#-moz-keyframes slide-down {
0% {
opacity: 0;
-moz-transform: translateY(-10%);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
</style>
Dropdowns and checkboxes are HTML elements that are rendered by the browser using its built-in components. Those components don't have any support for combining them: in pure HTML, you simply can't combine a select with a check box.
The only way to do this would be to use components rendered purely in Javascript. Google's Closure UI tools is one set of controls I've used, but only because I used to work at Google: something like jQuery UI might have a version that's easier to use.