I want to just set the left value of a absolutely positioned div different from other divs. I tried the last: property of tailwind, but its not working.
Here's my code thet I tried
absolute z-10 -ml-4 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 -left-5 last:left-20"
I added these classes and only want the last mapped div to have different position
Sample code:
<div class='relative w-full h-72'>
{items.map((each, i ) => {
return (
<div key={i} class='absolute top-0 left-0 last:left-10'>{each}</div
)
})}
</div>
and the last div that is mapped should have different left value
Prior to v2.1 and JIT mode, you need to explicitly enable the last-child variant in your tailwind.config.js, as it's not enabled for any core plugins.
// tailwind.config.js
module.exports = {
// ...
variants: {
extend: {
inset: ['last']
}
}
}
Playground demo: https://play.tailwindcss.com/Wt6reZBsRY
From v2.1, when using Just-in-Time mode no extra configuration is required as all styles are generated on-demand.
// tailwind.config.js
module.exports = {
mode: 'jit',
// ...
}
Related
I've been trying to reach this type of layout using grid as I find it to be more easy to handle in situations as such. but it seems that my current code achieves stack two boxes on top of each other in the first column and only one in the second column which is not as the required layout. I would have liked it if the primary color which is in index=0 of the array to be the div taking the entire first column and the two remaining elements of the array to be stacked on top of each other in the second column.
Here is how it currently looks : Link
Here is my current component code along with tailwind classes:
const ColorPreview = ({ colors }: any) => {
console.log('colors inside colorPreview', colors);
return (
<div className='grid grid-cols-2 gap-6'>
{Object.keys(colors).map((key, index) => (
<div key={uuidv4()} className=' overflow-hidden rounded-lg border-2'>
<div
className={clsx(
'h-[6rem] w-20 p-4',
index === 0 && 'h-60 w-48 p-4',
)}
style={{
backgroundColor: colors[key],
}}
>
{' '}
</div>
<p className='justify-center p-2 text-base'>{colors[key]}</p>
{/* primary or secondary or tertiary*/}
</div>
))}
</div>
);
};
Any help or guidance is much appreciated.
I write a css class. this will work if you had only 3 items.
.parentClass {
/* targeting only those children 3n+1 */
/* n=0=>1st, n=1=>4th and so on */
& > *:nth-child(3n + 1),
// in large screen make the first item col span 2 units and row spans 2 units
#screen lg {
#apply col-span-2 row-span-2;
}
}
If you have more items, and decide which one you want to target. Here is a link about nth child:
https://css-tricks.com/how-nth-child-works/
Based on your layout decision you might write 2 separate logic. for example
& > *:nth-child(3n + 1),
& > *:nth-child(6n + 1) {
/* apply this css to target children. you could add more css here */
#screen lg {
#apply col-span-2 row-span-2;
}
then apply the parentClass class name to the top-level div.
I have a div with a classes that look like this className={`${cardSelected && 'shadow-factors'} bg-white rounded-md cursor-pointer`}
Right now I'm setting up a print version of the page and I was wondering if it is possible to somehow remove this shadow-factors / box-shadow for the printed version with TailwindCSS toolset?
Yes Tailwind has a modifier print, you may look here
For example - shadow will disappear when printing
<div class="shadow-lg print:shadow-none">
Hello World
</div>
In order to make it work I had to add the following to the config:
// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
'print': {'raw': 'print'},
// => #media print { ... }
}
}
}
}
With this being added to config any print: statements are working now, including print:shadow-none
My code is working when fine when i am running for group hover on play.tailwindcss.com
But when i copy same code in my local file, group hover is not working there;
what should i include in my tailwind.config.css file to enable group hover in my case?
DEMO
CODE:
<div class="group">
Menu
<div class="hidden group-hover:block absolute bg-white shadow-md w-auto p-4">
option 1
option 1
option 1
option 1
</div>
The Playground uses JIT mode, so option 1 for you is enabling JIT mode.
Option 2 is to add the group-hover variant to your display utility as shown here https://tailwindcss.com/docs/display#variants
If you're using display variants anywhere else you'll need to add those as well, it might look something like this.
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
display: ['hover', 'focus', 'group-hover'],
}
}
}
I use the Youtube Angular pakacge in my Angular 11 project. I would like to fill the player to 100% of the divs height, which is a TailWind h-full div:
<div class="flex flex-col flex-auto w-full h-full xs:p-2" #videoContainer>
<youtube-player
*ngIf="videoId"
[videoId]="videoId"
width="100%"
[height]="videoHeight"
></youtube-player>
</div>
I tried to do this in two different eays already:
#1 height="100%" or height="100vh"
Both leads to:
#2 Dynamic Height
[height]="videoHeight"
ngOnInit() {
this._params = this._route.params.subscribe((params) => {
this.videoId = params['videoId'];
});
}
ngAfterViewInit(): void {
this.videoHeight = this.videoContainer.nativeElement.offsetHeight;
}
This works, but leads to
Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '905'..
#3 Move videoHeight
I moved this.videoHeight = this.videoContainer.nativeElement.offsetHeight; to the constructor and in the OnInit this leads to:
TypeError: Cannot read property 'nativeElement' of undefined at new YoutubeComponent
What am I doing wrong?
Here is how I solved it,
I created new component:
ng g component components/yt-player
In yt-player.component.html add container with ref and youtube-player
<div #youTubePlayer >
<youtube-player [width]="videoWidth" [height]="videoHeight" [videoId]="videoID"></youtube-player>
</div>
and in yt-player.component.ts add this code:
export class YtPlayerComponent implements AfterViewInit {
#ViewChild('youTubePlayer') youTubePlayer: ElementRef<HTMLDivElement>;
videoHeight: number | undefined;
videoWidth: number | undefined;
#Input('videoID') videoID: string;
constructor(private changeDetectorRef: ChangeDetectorRef) {}
ngAfterViewInit(): void {
this.onResize();
window.addEventListener('resize', this.onResize.bind(this));
}
onResize(): void {
// you can remove this line if you want to have wider video player than 1200px
this.videoWidth = Math.min(
this.youTubePlayer.nativeElement.clientWidth,
1200
);
// so you keep the ratio
this.videoHeight = this.videoWidth * 0.6;
this.changeDetectorRef.detectChanges();
}
}
The code is basiclly self explenatory, you have refrence on the container of youtube-player, in afterViewInit you set videoHeight and videoWidth, to corespond to the width of the container. We set up event listener in the case of size changes to update the width and height. And in the end we add #Input('videoID') videoID: string so we can pass the id to the youtube-player component. So we can use it like this:
<yt-player videoID="oHg5SJYRHA0"></yt-player>
Try height="100vh"
Try assigning value to videoHeight during declaration or in constructor
or in ngOnInit hook.
Remove any attempt to set width and height in the template code -
<div class="flex flex-col flex-auto w-full h-full xs:p-2">
<youtube-player *ngIf="videoId" [videoId]="videoId"></youtube-player>
</div>
and also from the component code. Then it should display automatically to full height.
After reimplementing the fab speed dial based on the demo presneted on angular material, I've managed to set the position, but I can't seem to figure out how to setup the spacing between the dials.
They're really close to eachother. I've tried setting the margin and padding, but in the button, but it doesn't seem to be right, because it applies even in close mode, whereas intended only to be set in open mode.
Link to codepen demo of my code
HTML
<div ng-controller="DemoCtrl as demo" layout="column" ng-cloak="" class="fabSpeedDialdemoBasicUsage" ng-app="MyApp">
<div style="position: fixed; bottom: 15px; right: 50%" >
<md-fab-speed-dial md-open="demo.isOpen" md-direction="up"
class="md-fling" ng-cloak>
<md-fab-trigger >
<md-button aria-label="menu" class="md-fab md-warn" ng-style="navIconStyle" >
<md-icon md-svg-src="img/icons/menu.svg"></md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button ng-repeat="button in demo.pageButtons" class="md-fab md-raised md-icon-button "
aria-label="{{button.label}}" style="background-color:orange;margin-top:10px;">
<md-icon md-svg-icon="{{button.icon}}"></md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</div>
JS
(function() {
'use strict';
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('DemoCtrl', function() {
this.pageButtons =
[
{
icon: "img/icons/menu.svg",
label: "News"
},
{
icon: "img/icons/menu.svg",
label: "Schedule"
},
{
icon: "img/icons/menu.svg",
label: "Home"
}
]
});
})();
You can create a ng-style that corresponds to an array of styles
Since we're focused on the speed dial, the open state and close state depends on directive's argument md-open, which here is assigned by isOpen.
So when isOpen = true, then we can set 10px padding, otherwise if close, then set padding to false, and make it 0px. We can do this by creating an array of those two css styles. Then cast the boolean value of isOpen state with an integer, so the array of style corresponds accordingly.
In Html's md-button tag
ng-style="navIconStyle[navController.isOpen ? 1 : 0]"
In Js controller
$scope.navIconStyle =
[
{
"margin-bottom" : "0px"
},
{
"margin-bottom" : "10px"
}
]
I tried adding ng-style, but it seems that Angular Material framework overwrites the style while expanding. I ended up adding a separate class and using ng-class attribute.
ng-class="{'spaced': demo.isOpen }"
And define the class as below. Use appropriate side of margin based on where FAB is opening. My case, menu was configured to open on left, so I set margin on right.
.md-button.md-fab.md-mini.spaced {
margin-right: 8px !important;
}