Flickity not hiding on desktop - javascript

I want the flickity slider to hide on desktop and larger devices. I think I'm following the instructions in the documentation, they seem pretty straightforward, however, It's not working.
Div looks something like this:
<div class="w-full flex pl-4 pb-16 overflow-x-auto lg:justify-center">
<flickity class="main-carousel mx-20 mt-5 sm:my-10 w-10/12" ref="flickity" :options="{ lazyLoad: 3, watchCss: true, cellAlign: 'left', wrapAround: true, pageDots: true, pauseAutoPlayOnHover: true, arrowShape: { x0: 0, x1: 75, y1: 50, x2: 90, y2: 50, x3: 15 } }">
<PlanesCard v-for="(plan, index) in getTiers" :key="index" :value="plan.value" :name="plan.name" />
</flickity>
</div>
Styling like this:
.main-carousel:after {
content: 'flickity';
display: none;
}
#media (min-width: 1024px) {
.main-carousel:after {
content: '';
}
}
which is the component that gets "flicked", looks something like this, even though I think it's not important:
<article :class="planText()" class="py-8 flex-shrink-0">
<h2>
<span>{{ value }}</span>
</h2>
<ul class="text-left pl-6 pr-4">
<PlanList v-for="pl in getFeatures" :key="pl.title" :plan="name" />
</ul>
</article>
Also, I don't know if this is important, but when I inspect the element on Chrome, I have this:
Thanks in advance!

I think you misspelled a property. I reproduced your problem and fixed it by changing the property "watchCss" to "watchCSS".

Related

Svelte transition 'jumps' animation

I have a SvelteKit application with a two divs with text. My goal is to add a in:fly animation to the text divs along with an easing function. However, at the end of the easing animation, the animation 'skips' or something weird happened. The ease function does not complete the animation. Here's a gif of the animation
This is the code I have for this
<script>
import { fly } from 'svelte/transition';
import { onMount } from 'svelte';
import { circOut } from 'svelte/easing';
let mounted = false;
onMount(() => {
mounted = true;
});
</script>
{#if mounted}
<main class="w-full h-screen flex items-center justify-center">
<div class="w-full max-w-7xl flex">
<div class="w-3/4 flex flex-col gap-3">
<!-- Text 1 -->
<div class="h-40 relative overflow-hidden">
<div
class="absolute inset-0 text-9xl"
in:fly={{ y: 150, duration: 1100, easing: circOut }}
>
Some
</div>
</div>
<!-- Text 1 -->
<div class="h-40 relative overflow-hidden">
<div
class="absolute inset-0 text-9xl"
in:fly={{ y: 150, duration: 1000, delay: 100, easing: circOut }}
>
Title
</div>
</div>
</div>
<div class="w-1/4 bg-blue-300" />
</div>
</main>
{/if}
This does not happen when the page is hot-refreshed after saving the file.
I've tried using other ease functions as well but the result is the same
I've tried removing the absolute positioning of the divs with no luck as well
Edit: I tried it with just one text element but the issue persists.
<script>
import { fly } from 'svelte/transition';
import { onMount } from 'svelte';
import { circOut } from 'svelte/easing';
let mounted = false;
onMount(() => {
mounted = true;
});
</script>
{#if mounted}
<div class="text-9xl" in:fly={{ y: 150, duration: 1100, easing: circOut }}>Text</div>
{/if}
Edit 2:
I added a MRE to this repository. (Hosted)
Issue persists on Chrome, Chrome guest mode, Chrome for Android.
Does NOT happen on Firefox
Edit 3
It happens even without the easing function. (Initially thought it was caused by the ease function)

two elements next to each other with 100% height of window

I'd like to put two elements next to each other but at least one of them (the textarea) I need to have always 100% height of the window. I've checked a few similar questions here but I don't know how to put that together. Could you help?
html:
<div style={styles.rowEqHeight}>
<div style={styles.component}>
<div className='input-group'>
<textarea id='textarea'
className='form-control'
onChange={this.onDataChange}
placeholder='Type your data...'></textarea>
</div>
</div>
<div style={styles.component}>
<Treebeard data={this.state}
decorators={decorators}
onToggle={this.onToggle}/>
</div>
styles.js
export default {
component: {
width: '50%',
display: 'inline-block',
verticalAlign: 'top',
padding: '20px',
},
rowEqHeight: {
display: '-webkit-box',
display: '-webkit-flex',
display: '-ms-flexbox',
display: 'flex'
}
};
try using 100vh in your CSS or inline css for your element. That will set the height to 100% of the window .
sample below:
<textarea style="height:100vh"></textarea>
<textarea id='textarea'
className='form-control'
onChange={this.onDataChange}
placeholder='Type your data...'
style="height: 100vh"></textarea>
This just demonstrates the styling. You could edit it to include the style in styles.js. The vh unit (abbreviated form of viewport height) is a percentage of the total height of the viewport, as evident from the name.

React: Resizing a div including handlers, different cursors i.e ns-resize - no jquery

I am looking for an easy way of allow a user to resize a div using handles and all relevant cursors. I see lots of examples using jquery but I would like to use it in react and jquery isn't required.
Does anyone know a easy way of doing this ? I presume pure js, css. I don't really want to use a react component for this, as I need to enable resizing on standard divs.
Of course it is for use with reactjs, is there a more modern way of doing this without jquery ?
** EDIT **
These are the cursors that could be used for each resizable point
e-resize ne-resize n-resize nw-resize s-resize se-resize
w-resize sw-resize
You can only with CSS, resize property allows you to make that!
.resize {
border: 1px solid black;
overflow:auto;
}
.resize.horizontal {
resize: horizontal;
}
.resize.vertical {
resize: vertical;
}
.resize.both {
resize: both;
}
.wrap {
max-width: 80%;
}
<div class="wrap">
<div class="resize horizontal">Resize me!</div>
<div class="resize vertical">Resize me!</div>
<div class="resize both">Resize me!</div>
</div>
Requirements
overflow different than visible (initial) is required and you can apply it to all elements whos overflow is setted with auto, scroll and hidden.
I call this property marvellous!
Heres an example of a great solution using react-resize-panel library
https://www.npmjs.com/package/react-resize-panel
Put anything you want to show inside the divs, you can customize the handler too.
import ResizePanel from "react-resize-panel";
...
<div style={{
width: '80%',
height: '500px',
border: '1px solid black',
display: 'flex',
flexDirection: 'column'}}>
<ResizePanel direction='s' style={{backgroundColor: 'black', height: '50%'}}>
<div style={{backgroundColor: 'orange', height: '100%'}}>panel</div>
</ResizePanel>
<div style={{backgroundColor: 'purple', flexGrow: '1'}}>panel</div>
</div>
...
Hope this can help someone else
A few days ago I wanted to build something like this but with 2 div elements.
using resize property from css made it's width 0 when there are multiple elements so I tried javascript.
I saw an example using onMouseMove event but there are many problems with this example so I made a new sandbox in which I use the onDarg event.
Here is the important code:
const dragHandler = useCallback(
(e) => {
const w =
((e.clientX -
e.currentTarget.parentElement.parentElement.getBoundingClientRect()
.left) /
e.currentTarget.parentElement.parentElement.getBoundingClientRect()
.width) *
100;
if (w > 0 && w !== width) {
setWidth(w);
}
},
[width]
);
and
<Box width={width} />
<div
draggable
onDrag={dragHandler}
className="flex justify-center items-center p-1 h-full bg-slate-800 cursor-col-resize"
>
<div className="w-1 border-x border-white h-1/6" />
</div>
<Box width={100 - width} />
Hope it helps \(^_^)/

tooltip div with ReactJS

objective
I have a div that I want to make act like a tooltip with reactjs.
HTML
<div>on hover here we will show the tooltip</div>
<div>
<div class="tooltip_custom">this is the tooltip!!</div>
</div>
I am used to angularjs using the ng-show with a condition on the <div> , I was wondering if there is such binding in reactjs , or else how can I do this functionality ?
Thanks
You can make your component to return the following markup
return (
<div>
<div onMouseOver={this.handleMouseIn.bind(this)} onMouseOut={this.handleMouseOut.bind(this)}>on hover here we will show the tooltip</div>
<div>
<div style={tooltipStyle}>this is the tooltip!!</div>
</div>
</div>
);
Where tooltipStyle is assigned like this:
const tooltipStyle = {
display: this.state.hover ? 'block' : 'none'
}
So tooltip depends on component state, now in handleMouseIn and handleMouseOut you need to change component state to make tooltip visible.
handleMouseIn() {
this.setState({ hover: true })
}
handleMouseOut() {
this.setState({ hover: false })
}
Here is working example.
You can start diving in React with this article: Thinking in React.
One option is just to do it in CSS. It's not quite as flexible, but with markup like:
<div className="tooltip-on-hover">Hover here</div>
<div className="tooltip">This is the tooltip</div>
You could do:
.tooltip {
...
visibility: hidden; /* Or display: none, depending on how you want it to behave */
}
.tooltip-on-hover:hover + .tooltip { /* Uses the adjacent sibling selector */
visibility: visible; /* Or display: block */
}
Example:
.tooltip { display: none; }
.tooltip-on-hover:hover + .tooltip { display: block; }
<div class="tooltip-on-hover">Hover here</div>
<div class="tooltip">This is the tooltip</div>
You could also nest the tooltip inside the element so you could use a normal descendant selector like .tooltip-on-hover:hover .tooltip. You could even use a ::before or ::after pseudo-element, there are guides around on how to do this.
I think whatever you want to show as tooltip, just add that to the "title" of the div where you want to show it.
Eg:
<div title="I am the tooltip text">I am the div where you should hover</div>
But if its a custom designed div then go as the answers given before.
Install npm package:
npm install react-tooltip
Usage:
import ReactTooltip from "react-tooltip";
<div data-tip="msg to show" data-for='toolTip1' data-place='top'>Tooltip</div>
<ReactTooltip id="toolTip1" />
You can also use React Mapple ToolTip which is easy to use and customize and also comes with predefined themes.
Disclaimer: I am the author of this library
reactjs-mappletooltip
You can use react-tooltip package. Super easy to use and handy also.
Installation: npm i react-tootip.
Example:
1. import it :
import ReactTooltip from "react-tooltip"
Include it in your component:
<div className="createContent">
**<ReactTooltip />**
<div className="contentPlaceholder">
add tool tip to your button/div or any element: data-tip="add tooltip message"
<button className="addSection" data-tip="add tooltip message" onClick={() => this.onAddChild()}>+</button>
package url: https://www.npmjs.com/package/react-tooltip
import Tooltip from "#material-ui/core/Tooltip";
const HtmlTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: 'rgba(255,250,228)',
color: 'rgba(0, 0, 0, 0.87)',
maxWidth: 400,
fontSize: theme.typography.pxToRem(12),
border: '1px solid #dadde9',
},
}))(Tooltip);
headerName: 'FEEDBACK',
field: "remarks",
flex: 0.30,
renderCell: (params: GridCellParams) => (
<Grid>
<HtmlTooltip title={params.value} placement="bottom">
<Typography style={{ color: "inherit", cursor: "pointer" }}>{params.value}</Typography>
</HtmlTooltip>
</Grid>
)
In case, if you are using react-bootstrap in your project, then use https://react-bootstrap.github.io/components/overlays/ Overlay with the tooltip.
MouseEnter and MoverLeave need to be used though.
<OverlayTrigger
placement="right"
delay={{ show: 250, hide: 400 }}
overlay={renderTooltip}>
<div>on hover here we will show the tooltip</div>
</OverlayTrigger>

How to change the underline color of selected tab in angular-material?

I am following tutorial to put md-tabs in the md-toolbar from here. But, My selected indicator tab is same color as the md-primarywhich make it invisible. Please see the image below.
But, when I change the color of the md-tabs to md-accent, it will show the indicator.
How do I change the color of the selected indicator tab?
Here is the code:
<md-toolbar class="md-whiteframe-5dp">
<div class="md-toolbar-tools">
<h2>Title</h2>
</div>
<md-tabs md-selected="tabs.selectedIndex">
<md-tab id="tab1" aria-controls="tab1-content">Tab #1</md-tab>
<md-tab id="tab2" aria-controls="tab2-content">Tab #2</md-tab>
<md-tab id="tab3" aria-controls="tab3-content">Tab #3</md-tab>
</md-tabs>
</md-toolbar>
<md-content layout-padding flex>
<ng-switch on="tabs.selectedIndex" class="tabpanel-container">
<div role="tabpanel" id="tab1-content" aria-labelledby="tab1" ng-switch-when="0" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
View for Item #1<br />
data.selectedIndex = 0
</div>
<div role="tabpanel" id="tab2-content" aria-labelledby="tab2" ng-switch-when="1" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
View for Item #2<br />
data.selectedIndex = 1
</div>
<div role="tabpanel" id="tab3-content" aria-labelledby="tab3" ng-switch-when="2" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
View for Item #3<br />
data.selectedIndex = 2
</div>
</ng-switch>
</md-content>
By the way, all the color are default.
The simplest way is to change via CSS :
md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar {
color: red !important;
background-color:red !important;
}
But you can also check the ยง about theming in the documentation :
https://material.angularjs.org/latest/Theming/01_introduction
Sometime the CSS is embedded and generated on the fly in style-tags, if this code doesn't work, try to force the color with !important.
md-tabs md-ink-bar {
color: green;
background-color: green;
}
You need to define a custome theme and set the accent-color to the one that you want your md-ink-bar to have. In this example it's white:
var customAccent = {
'50': '#b3b3b3',
'100': '#bfbfbf',
'200': '#cccccc',
'300': '#d9d9d9',
'400': '#e6e6e6',
'500': '#f2f2f2',
'600': '#ffffff',
'700': '#ffffff',
'800': '#ffffff',
'900': '#ffffff',
'A100': '#ffffff',
'A200': '#fff',
'A400': '#f2f2f2',
'A700': '#ffffff'
};
$mdThemingProvider
.definePalette('whiteAccent', customAccent);
$mdThemingProvider.theme('whiteAccentTheme')
.primaryPalette('deep-purple')
.accentPalette('whiteAccent');
You can generate an accent-palette on this site: https://angular-md-color.com/#/
In your view, use the new custom theme for your md-tabs:
<div md-theme="whiteAccentTheme">
<md-tabs class="md-primary">...</md-tabs>
</div>
CSS
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
background-color: #f44336;
}
Bit late to the party but might help someone. Simply put color property of the mat-tab-group to none
<mat-tab-group mat-align-tabs="start" mat-align-tabs="center" color="none">
I had struggle with this issue, too. I don't like the solution to overwrite the CSS. So there is a a much more convenient and more straight forward solution:
Just set the default HUE for your palette:
$mdThemingProvider.theme('default')
.primaryPalette('amber', { 'default': '600'})
.accentPalette('indigo', { 'default': '400'});
The tab ink bar, the FAB speedial, ... will use this color from your palette.
After much wasted time reading responses that just didn't work, this is the solution I have found. Being new to CSS, and as someone that despises CSS, I thought I would post my solution for those that also are new to CSS and despise CSS.
HTML
<md-tab-group>
<md-tab>
<ng-template md-tab-label>
<span class="mdTab">Tab Label</span>
</ng-template>
</md-tab>
</md-tab-group>
CSS
.mdTab{
color: white;
}

Categories