I'm writing an angular 14 app and it contains a div element that is draggable using cdkDrag and also has two buttons to scale up or down the div.
so in the component i save a scale version with default to one, and scale buttons add or dec 0.1 from the scale variable, i define the style of the div using ngStyle with [ngStyle]="{ transform: 'scale(' + scale + ')' }" and added a cdkDrag to support dragging this div around the screen.
since drag and drop uses transform and scaling using transform whenever I try to scale up or down and a few times and then move it around, then scale it again a few times and move it around.. it have a weird behavior of going back to the original position and going back to the original size while moving it around.
i saw some old bug reports from a few years ago but i couldn't find anything that could help in my situation.
so my template file is this:
<div cdkDrag [ngStyle]="{ transform: 'scale(' + scale + ')' }">
<button mat-icon-button (click)="zoomIn()" color="primary">
<mat-icon>zoom_in</mat-icon>
</button>
<button mat-icon-button (click)="zoomOut()" color="primary">
<mat-icon>zoom_out</mat-icon>
</button>
<p>Start editing to see some magic happen :)</p>
</div>
and I also reproduced at Stackblitz link
any information regarding this issue would be greatly appreciated.
The way I solved the issue in my project is that I put the element that scales inside the element that drags.
<div cdkDrag >
<div[ngStyle]="{ transform: 'scale(' + scale + ')' }">
Stackblitz example
Related
When just visiting my main webpage, the tooltip when hovering over the countries in my react-simple-maps map looks pretty normal:
tooltip
However, after going to a different webpage, and then promptly returning to the map-containing webpage (same URL), the tooltip's padding changes:
changed tooltip
Here is the code behind my tooltip:
<ReactTooltip>
<div className="bg-gray-800 text-white rounded p-[8px]">
<div className="text-[16px] font-bold">
{Name}
</div>
<div className="text-[14px]">
No information available right now
</div>
</div>
</ReactTooltip>
I assume the issue lies in server/client-side rendering, since the strange border (which I assume to be the p-[8px] only appears after re-entering the webpage). However, I am still inexperienced. Any ways to fix this?
Thanks!
I tried putting the className directly into , but that resulted in a clear background... Then I just tried moving different stylings around but nothing seemed to do the trick.
Seriously, How do you make TailwindCSS button group span the full witdh ?
For simple buttons, you could use btn-block, but that wont work once you start using button groups.
Okay as, i was righting this I found the answer, but still went ahead to publish this, cause I didnt find answers else where....
So I ended up using tailwind witdh classes documented here
<div class="btn-group">
<button class="btn w-1/2 btn-outline btn-primary ">Save</button>
<button class="btn w-1/2 btn-outline ">Cancel</button>
</div>
so the class w-1/2 gives a 50% width, i'm using this caus I have only 2 buttons in my button group, so you should adjust accordingly depending on the number of buttons.
The draw back with this technique, is that it can become complex if you want to add buttons dynamically. put still doable.
I am using border-image property to create styled components with 9-slice. Also I am using css transform: scale(x) property to scale down/up my elements based on screen sizes. The issue I am running into is that my 9-slice component looks fine when scale is set to a whole number like 1, 2, 3... but if its a float then the border shows 9-slice lines/gaps and I am having hard time fixing it.
I have tried setting different values for border-image-slice as well as the scale. Initially thought that it was causing this issue when the number after decimal point is odd but that was an odd thought anyway.
<div class="Primary-Back-Button" style="transform: scale(1.2);">
<button class="Primary-Button" id="">
<div class="Primary-Button-Content">Button</div>
</button>
</div>
Expected result would be to show no lines/gaps on the border when using scale or I would be willing to change how we scale the things too. I basically want to keep the same layout on a desktop app no matter what the screen size is. This is for a desktop game that I am working on and it uses JS on UI side.
Expected result when scale is a whole number which is set to 6 in this case:
Notice the lines when I set scale to 6.25
If anyone ever run into the same issue which is very unlikely but I did figure out a solution so I am gonna put it out there.
You will need to add perspective: 1px; to the root styles() and then wherever you are using transform: scale(x); make it transform: translateZ(0) scale(x);
I am still trying to understand why that works but at least works. And its CSS so there could be some magic involved.
I am using angularjs material tabs https://material.angularjs.org/latest/demo/tabs .
Firstly, how to set the color for the left and right arrows?
<md-toolbar >
<div class="md-toolbar-tools tb">
<md-tabs class="tab">
<md-tab ng-repeat = "item in toDoList track by $index" label="{{item.name}}" >
</md-tab>
</md-tabs>
</div>
</md-toolbar>
For example, set the color of the arrows from white to other colors(like red) in the image and fiddle below
jsfiddle 1
Next, how to make the arrows always visible? In the image and jsfiddle below, if there is no tab overflow, the left and right arrows will not appear.
jsfiddle 2
Lastly, is there any formal/specific name for the left and right arrows, like pagination arrow? Because I can't find much related topic about the md-tabs arrow, maybe I used the incorrect keyword for the arrow.
For arrows color you can use this rule :
md-toolbar:not(.md-menu-toolbar) md-icon{
fill:red;
}
jsfiddle 1
But to make them always visible, I don't think it's possible unless you modify the Angular Material source code
I'm trying to adjust FABs in Ionic to make them scrolling with my content. If we refer to the Ionic Exemple :
<ion-fab top right edge>
<button ion-fab mini><ion-icon name="add"></ion-icon></button>
<ion-fab-list>
<button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
<button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
<button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
</ion-fab-list>
</ion-fab>
The result is the following :
I'd like to make this FAB scroll with the content. I tried to overrider Ionic CSS, but when I change the position attribute it makes my button disappear..
Thank you in advance for any help
You can't because the case here is not css. Ionic adds the FAB button to the fixed-content class, so even knowing you can use css to manipulate both the fab and the fixed-content it does't scroll along with the scroll-content (i've tried here to find a solution for you).
Manipulating the DOM maybe works, taking out the fab from fixed-content and placing it in scroll-content with ElementRef, ViewChild, Renderer from #angular/core (haven't tried this yet).
Along with manipulating the DOM, the other solution is creating your own FAB button, it can be a hard work, but there must be some examples around the internet.
Hope this helps.