I'm using primeng tooltip, when i hover over an element the tooltip appears but on click the tooltip disappears, how to avoid this behaviour?
<i *ngIf="form.controls.url.value.length" class="far fa-copy" [pTooltip]="tooltipText" tooltipPosition="top" (click)="copyToClipboard()"></i>
Related
I am trying to make a popover, but for icon. The current implementation is with button.
Also, I am trying to make it popover to the right, not the bottom.
Stackblitz
Here is the icon:
<i (click)="infoButton()" class="icon-info"></i>
You can't with this library.
But you can try to add:
[mdePopoverOffsetX]="100" [mdePopoverArrowOffsetX]="0"
But I don't know if there is a good solution with this library
If you are using Angular Material, Check this example to transform your button in icon with mat-icon-button
Every time I press the Login dropdown menu, the colour of the button is inheriting the background image's colour. However, when I move my cursor away from the Login button, a white square appears over it. I do not have any css supporting the button. Both the code and sample images are below. I am trying to make it so that when I move my cursor away, the Login button still inherits the background image colour rather than changing to a white square.
Amateur at bootstrap coding so if there are any other mistakes, do let me know!
<li class="dropdown">
<b>Login</b><span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
Cursor is on button
Removing cursor from button
Happens because when you click on the dropmenu bootstrap adds a class called open to the <li> which applies that background, and it stays until it loses focus all you have to do is override that class and remove the background.
add this to your css file which should come after the bootstrap <link> to override it.
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover{
background:none;
}
I'm seeing some odd behaviour concerning standard HTML buttons on Chrome. A standard button does not add an outline when clicked; only on focus through keyboard.
<button type="button">Works as expects</button>
As soon as I add styling with border-radius, the button will get an outline when clicked.
<button type="button" style="border-radius: 5px;">Focus on click</button>
Does anyone know what makes the button behave this way? And how can I make sure that the outline only gets added on keyboard navigation using the border-radius?
In response to the first part of the question:
If you right click on the round button, click inspect, and click the computed tab you can see that by adding styling it has overridden the platform-native styling:
-webkit-appearance: button;
has changed to:
-webkit-appearance: none;
the button's background-color change (when you hold down click) is also lost.
Throughout my web app I have various submit buttons. I am able to disable them after a user submits to prevent multiple post requests and submissions to the server. I also replace the text of the button with a font awesome spinner icon. "Approve" becomes <i class="fa fa-spinner" aria-hidden="true"></i>.
<a class="btn btn-success" id="approve-button" rel="nofollow" data-method="post" href="/approve?id=40">
Approve
</a>
#approve-button {
height: 34px;
width: 138px;
}
Since the text and font-size is dictating the size of the buttons, when I replace the text with the icon, the button shrinks. The only way I see the prevent this is to manually set the button height and width. But I have to do this for all buttons.
Is there a simpler way where I don't have to manually set the height and width of all buttons?
Setting the min-width & min-height or by grabbing the existing width and height, and applying an inline-style at the same time you swap the spinner.
OR
If you want to be strictly CSS based, you can set two span elements within the button: one for the spinner, and the button label. Thus, position absolute the span spinner to sit above the button, and when your spinner is active (display: block), and make the span label hidden (visibility: hidden) -- this will keep the proportion of the button.
To demonstrate: forked off of TheEarlyMan's answer: http://codepen.io/brh55/pen/yJNbmP
Not sure if this is what you are looking for but here's a solution codepen link
HTML
<a class="btn btn-success" id="approve-button" rel="nofollow" >
<span>Approve</span>
<i class="fa fa-spinner"></i>
</a>
Jquery
$(".fa").hide();
$("#approve-button").click(function() {
$("span").hide();
$(".fa").show();
});
i am new in Angular and i have used Bootstrap in the pages design, but the default glyphicon icons ... huuum ... well
I have readed this tutorial http://favbulous.com/post/1006/create-custom-icons-for-twitter-bootstrap-easily but not work for me. The icons it's showing but the position is not that i want, the icons shows top of the text not to the left. I have this code
<i class="rpe rpe-user"></i> Logout
The icon is on the top of the text
With glyphicon works well
<span class="glyphicon glyphicon-off"></span> Mantenimientos
Thanks!
try adding
display: inline-block;
to your class for image