I have to set height on the :root element, or else I will not get the viewport size that I want with a scrollbar. However, I only want to set height: calc(100% - 130px); when the viewport is less than 900px.
How can I do this since I can not use #media query? I tried this to no success:
<template>
<style include="iron-flex iron-flex-alignment">
:host[show] {
background-color: var(--pink-color);
width: 100%;
overflow-x: hidden;
overflow-y: auto;
outline: none;
display: flex;
}
:host[smallScreen] {
height: calc(100% - 130px);
}
<div hidden$="{{!show}}">
<iron-media-query query="(max-width: 899px)"
query-matches="{{smallScreen}}"></iron-media-query>
...
<script>
Polymer({
is: 'video-selection',
properties: {
show: {
type: Boolean,
value: true,
reflectToAttribute: true
},
smallScreen: {
type: Boolean,
value: false,
reflectToAttribute: true
}
},
I think you need
:host([small-screen]) {
height: calc(100% - 130px);
}
JSBin example
Related
I have array of object imageList where I need to achieve given pattern using flexbox. How can we use flex-grow for the images
I can achieve this pattern by using grid (...pseudo(':nth-child(1)', { gridRowStart: 1, gridRowEnd: 3 }),) but not able to get that pattern using flexbox. Please help me to get this pattern using flexbox
Current behaviour is as follows:
Provided tsx and css files
Below is my code
App.tsx
import React from "react";
import "./App.css";
const App = () => {
const imageList = [
{
id: "1",
url: "https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
},
{
id: "2",
url: "https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
},
{
id: "3",
url: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80",
},
{
id: "4",
url: "https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80",
},
{
id: "5",
url: "https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
},
{
id: "6",
url: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg",
},
{
id: "7",
url: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg",
},
{
id: "8",
url: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg",
},
];
return (
<div className="mainWrapper">
{imageList.map((image: any, index) => (
<div key={image.id} className="imageWrapper">
<img src={image.url} alt={image.url} width="100px" />
<h4 className="heading">{image.id}</h4>
</div>
))}
</div>
);
};
export default App;
Please find the App.css
*{
margin: 60;
padding: 60;
}
.mainWrapper{
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-left: 160px;
margin-right: 160px;
}
.imageWrapper{
position: relative;
flex: 1 0 21%;
height: 200px;
}
img{
min-width: 100%;
height: 100%;
border-radius: 20px;
}
.heading{
position: absolute;
top: 0;
color: white;
}
Here's one way: main flex has direction row; each column is itself a flex, but with direction set to column.
If you want to use img's and stretch them, see object-fit (MDN), or use min-height / max-height.
Relative sizing of image wrapper flex-items is done by the flex shorthand property, but can be done using min-height in percentages.
const imageList = [
{
id: "1",
url: "https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
},
{
id: "2",
url: "https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
},
{
id: "3",
url: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80",
},
{
id: "4",
url: "https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80",
},
{
id: "5",
url: "https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
},
{
id: "6",
url: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg",
},
{
id: "7",
url: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg",
},
{
id: "8",
url: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg",
},
];
class Example extends React.Component {
render() {
return (
<div className="mainWrapper">
{imageList.map((image, index) => {
if (index % 2 !== 0) { return null; }
return (
<div key={'column' + index} className="flex-column">
<div className="item item-1">
<img src={imageList[index].url} alt={imageList[index].url} width="100px" />
<h4 className="heading">{imageList[index].id}</h4>
</div>
{ imageList[index + 1] ? (
<div className="item item-2">
<img src={imageList[index + 1].url} alt={imageList[index + 1].url} width="100px" />
<h4 className="heading">{imageList[index + 1].id}</h4>
</div>
) : (<div className="item item-2"></div>)
}
</div>
)
})}
</div>
);
}
}
ReactDOM.render(
<Example />,
document.getElementById("root")
);
.mainWrapper {
display: flex;
flex-flow: row wrap;
justify-content: stretch;
gap: 20px;
}
.heading{ display: none; }
.mainWrapper .flex-column {
display: flex;
flex-direction: column;
justify-content: stretch;
gap: 20px;
width: calc(25% - 20px);
}
.flex-column .item {
border-radius: 10px;
overflow: hidden;
}
.flex-column img {
display: block;
min-width: 100%;
min-height: 100%;
object-fit: fill;
}
.flex-column:nth-child(2n) .item-2,
.flex-column:nth-child(2n + 1) .item-1 {
flex: 1;
}
.flex-column:nth-child(2n) .item-1,
.flex-column:nth-child(2n + 1) .item-2 {
flex: 2;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I have used the vuescroll library in my Nuxt project and CSS Scrollbar doesn't work when I deactivate Toggle toolbar for different devices.
There is a bug that makes overflow: scroll hidden and I am sure that I haven't used this CSS style. When I change sizeStrategy to number it works but the height exceeds enormously.
Can anyone help me to deactivate this overflow?
ops: {
vuescroll: {
mode: 'native',
sizeStrategy: 'percent',
locking: true
},
bar: {
showDelay: 500,
keepShow: true,
background: '#FFFFFF',
opacity: 1,
hoverStyle: false,
size: '1%',
disable: false
},
scrollPanel: {
initialScrollY: false,
initialScrollX: false,
scrollingX: true,
scrollingY: false,
speed: 300,
easing: undefined,
verticalNativeBarPos: 'right'
},
rail: {
background: '#A3ACBC',
opacity: 0.3,
size: '1%',
specifyBorderRadius: '1%',
gutterOfEnds: '0',
gutterOfSide: '0',
keepShow: false
}
}
Hi! I solved the problem by uninstalling the library and using css scrollbar instead.Here is the solution for making scroll:
.carousel {
width: 90%;
margin-left: auto;
margin-right: auto;
display: block !important;
padding-bottom: $spacing-09;
white-space: nowrap;
scroll-behavior: smooth;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
.featured-item {
display: inline-block;
width: calc((#{$column-width-mobile} + #{$column-gap-mobile}) * 11);
white-space: normal;
vertical-align: top;
margin-right: calc(#{$column-gap-mobile} * 2);
}
}
#wrapper {
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-thumb {
background: white;
border-radius: 30px;
}
::-webkit-scrollbar-track {
background: rgba(163, 172, 188, 0.2);
}
}
I'm trying to make an element hide on scroll within a div. I tried this tutorial https://codepen.io/neutraltone/pen/poobdgv, but it works when the complete window is scrolled. I could not make it work on the specific div.
mounted() {
this.lastScrollPosition = window.pageYOffset
window.addEventListener('scroll', this.onScroll)
},
beforeUnmount() {
window.removeEventListener('scroll', this.onScroll)
},
I'm using Vuejs 3. I think the problem is, that I can't specifically point to the div. I tried it with this.$ref.name (using ref="name" on the div), instead of window, but something is not adding up.
Thanks in advance!
You could listen for the scroll event on the div using the v-on:scroll listener (or shorthand (#scroll) and then do whatever you want in the handler (in this case checking for scroll position and then hiding the element):
<template>
<div class="scrollable-container" #scroll="scrollHandler">
<div class="content">
<div v-show="isVisible" class="to-hide">Scroll Me</div>
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
isVisible: true
};
},
methods: {
scrollHandler(e) {
this.isVisible = e.target.scrollTop > 300 ? false : true
}
}
}
</script>
<style>
.scrollable-container {
height: 500px;
width: 300px;
margin: 200px auto;
overflow-y: scroll;
border: 1px solid black;
}
.content {
height: 1000px;
}
.to-hide {
min-height: 500px;
background-color: blue;
}
</style>
My page reads as follows.
The problem is that when I use draggabilly to drag the move-line, dragging to the left is fine, but when I drag it to the right, it doesn't work in the area where the tinymce compiler is located. How do I fix this problem?
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.all-warp {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.left {
width: 200px;
background-color: burlywood;
}
.move-line {
width: 4px;
background-color: crimson;
cursor:e-resize;
}
.editor-warp {
flex-grow: 2;
}
</style>
<body>
<div class="all-warp">
<div class="left"></div>
<div class="move-line"></div>
<div class="editor-warp">
<textarea id="editor"></textarea>
</div>
</div>
<script>
$(document).ready(function () {
var $draggable = $('.move-line').draggabilly({
axis: 'x',
containment: '.all-warp'
})
});
tinymce.init({
selector: '#editor',
menubar: false,
statusbar: false,
resize: false,
height:500,
});
</script>
</body>
</html>
Without seeing actual running code I cannot say for sure but I would suspect this is because the TinyMCE editing region itself is an iframe? Does the drag code you have work if you replace TinyMCE with a regular iframe? If not that would be your issue.
I've got transition(expand/NotExpand) on the grid cells of my CSS grid which is triggered onClick.
PROBLEM:
The problem is on the initial click, the expansion/transition won't play and the element would simply snap in to place. Of course this also has a reverse transition but since it's the second click of that child cell/element, the transition would play.
~Parent grid~
<template>
<div class="jobGrid myr" id="jobGrid">
<job-cell v-for="job in jobs" :key="job.id" :job="job" />
</div>
</template>
<style scoped>
.jobGrid {
display: grid;
grid-template-columns: 10% 10% 10% 10% 10% 10% 10% ;
grid-template-rows: 25% 25% 25% 25% ;
grid-column-gap: 5%;
grid-row-gap: 3%;
margin: auto;
margin-top: 2%;
width: 90%;
height: 90%;
max-width: 90%;
max-height: 90%;
overflow-x: auto;
}
</style>
~Child cell~
<template>
<div class="scene" #click="toggleJobData($event)" :style="expandCSS" >
<div>
{{job.title}}
</div>
</div>
</template>
<style>
.scene {
background: peru;
transition: left 3s, top 3s, width 3s, height 3s;
}
</style>
<script>
export default {
props: ['job'],
data() {
return {
expand: false,
expandCSS: {zIndex: 1},
}
},
computed: {
gridCSS() {
return this.$store.state.job.jobSelectorCSS
}
},
methods: {
toggleJobData(e) {
let currentPos = e.target.getBoundingClientRect()
let expand = {
position: 'relative',
left: `${this.gridCSS.left - currentPos.left}px`,
top: `${this.gridCSS.top - currentPos.top}px`,
width: `1041%`,
height: `400%`,
//zIndex: 2,
}
let notExpand = {
position: 'relative',
left: '0px',
top: '0px',
width: '100%',
height: '100%',
//zIndex: 1,
}
if(!this.expand) {
this.expand = !this.expand
this.expandCSS = expand
}else{
this.expand = !this.expand
this.expandCSS = notExpand
}
}
}
}
</script>
*** This is what you will get onLoad, or the NotExpand state.
Here, I clicked "Job2" and it will expand beyond its cell to fill up the entire grid.
I assume that the transition is applied immediately after onLoad
I think the "missing transition" is lack of CSS properties for its initial state. Until the first click, there are no properties to transite from.
Try styling your child cell with the initial props, that would be transited, like this:
.scene {
background: peru;
transition: all 3s;
position: relative;
left: 0px; top: 0px;
width: 100%; height: 100%;
}