I am using bootstrap 5.0 (the one that can import from inline html) to create a toggle outline button like below.
<button type="button" class="btn btn-outline-dark" data-bs-toggle="button" autocomplete="off" aria-pressed="false" >{{mode}} Mode</button>
In first click, color change instantly from transparent to fill.
But the issue is, if i click the second time, the toggle button don't instantly change the color from fill to transparent. You have to click elsewhere to let it change back to transparent.
How can I make the color change from fill to transparent instantly after the click instead of the need to click somewhere else?
You mean like this?
styles.css
.btn-check:focus + .btn-outline-dark,
.btn-outline-dark:focus {
box-shadow: none !important;
}
.btn-check:focus + .btn,
.btn:focus {
outline: 0;
box-shadow: none !important;
}
forked stackblitz
Related
I want to change the color of the BootStrap tooltips and and make the text to be left aligned. I checked other post, but none of the css changes works for me. I am wondering how to change the css of tooltip text message?
HTML code for tooltips:
<button type="button" class="btn btn-lg btn-info bottom-right-2" data-html="true"
data-toggle="tooltip" data-placement="left" title="text text">
First, make sure there is a space on the left side of the button enough for the tooltip. Otherwise, it will be placed on the right side.
to change the color
/* to change the arrow background */
.tooltip > .arrow:before{
border-left-color: lightblue;
}
.tooltip > .tooltip-inner {
color: darkblue;
background-color: lightblue;
}
please take a look at bootstrap markup for the tooltip: https://getbootstrap.com/docs/4.5/components/tooltips/#markup
see the example:
https://jsfiddle.net/au4pjwf6/
I am trying to repliace google's homepage as part of an html and css course I started. I can't figure out how to add a shadow on the search box when the page loads, just like with Google's website.
Also, when hovering the top-right image, it changes the transparency but this should not be happening. How can I take remove that effect?
Page is here:
https://odiseon.github.io/google-homepage/
Looked at your code, this what causes issue on hover
header a:hover {
opacity: 0.85;
}
You can do something like this
header a.user-link:hover {
opacity: 1;
}
Looking at the google page behavior, it starts off with the class that has box-shadow and then after first mouse click it's removed.
You can use JavaScript.
window.onload
and then add the classname to your input field.
use the below code as a reference.
index.html
<input type='text' class='input'>
app.js
window.onload = (event) => {
document.styleSheets[0].insertRule('.input:focus{
box-shadow: 4px 4px 4px 0 (0,0,0,0.2);
}', 0);
}
I have Open button
<button mat-raised-button (click)="openModal()
"type="button" color="primary">Open Modal </button>
On button button click, popup modal open and after close modal. cdk-focused and cdk-program-focused classes added and to this button and get some ripple effect on that.
I want to get rid of that style, want remove or overwrite those classes those added to button after close modal*
I suggest two solutions:
1. First, set an additional class on that button in order to avoid that all the mat-raised-buttons be affected by the style change, it's not your aim, I suppose.
HTML:
<button mat-raised-button class="myButton" (click)="openDialog();">Pick one</button>
CSS:
.myButton:focus{
box-shadow: 0 0 rgba(255, 255, 255, 1) !important;
transition:none !important;
background-color: rgba(255, 255, 255, 1) !important;
-webkit-tap-highlight-color:rgba(255, 255, 255, 1) !important;
}
Then you can set the style of mat-raised-button either by
a) setting it in component's stylesheet with ::ng-deep:
::ng-deep .myButton>.mat-button-focus-overlay {
background-color:transparent !important;
}
::ng-deep .mat-app-background{
background: white !important
}
Demo
b) setting with ViewEncapsulation.none:
Class:
import { ViewEncapsulation } from '#angular/core';
...
#Component({
...
encapsulation:ViewEncapsulation.None
})
CSS:
.myButton>.mat-button-focus-overlay {
background-color:transparent !important;
}
.myButton>.mat-app-background{
background: white !important
}
Demo
c) setting it in style.css:
.myButton>.mat-button-focus-overlay {
background-color:transparent !important;
}
.myButton>.mat-app-background{
background: white !important
}
Demo
The button gets the focus when you click on it. Turn away the focus from that button by setting the focus on an other element:
...
<input matInput #input [(ngModel)]="name" placeholder="What's your name?">
...
<button mat-raised-button class="myButton" (click)=" input.focus();openDialog() ">Pick one </button>
Demo
.mat-button-focus-overlay {
background-color:transparent !important;
}
.mat-app-background{
background: transparent !important
}
Even I went through lots of trial and error method,but finally got fixed with it by adding following feature while creating model.
in the diolog creation add this
restoreFocus:false
*Whether the dialog should restore focus to the
*previously-focused element, after it's closed.
I faced same problem with Angular 11 and inside mat-drawer for the first link it was adding this effect.
This span was being added inside first link whenever I open the mat-drawer
<span class="mat-button-focus-overlay"></span>
So I had to do this in my component's scss
::ng-deep .mat-button-focus-overlay {
background-color: transparent !important;
}
This may be similar to above answers, hope this will help someone working with mat-drawer.
I'm unable to line up three buttons in boostrap button group.
1) I have btn-group and three buttons inside
2) Second and third button sometimes is disabled (logic for enable/disable is written inside knockout model, but it is not important here)
3) Second button has tooltip, so I created tooltip-wrapper for button, because disabled buttons cannot have tooltips (from Bootstrap documentation http://getbootstrap.com/javascript/:
"Tooltips on disabled elements require wrapper elements To add a
tooltip to a disabled or .disabled element, put the element inside of
a and apply the tooltip to that instead."
4) I have added container for wrapper div as per deocumentation:
Tooltips in button groups and input groups require special setting
When using tooltips on elements within a .btn-group or an
.input-group, you'll have to specify the option container: 'body'
(documented below) to avoid unwanted side effects (such as the element
growing wider and/or losing its rounded corners when the tooltip is
triggered).
Unfourtunately after this:
a) the order of third and second button changes.
b) three buttons doesn't look like a btn-group
I am unable to find a solution or an idea what to try. Changing button order doesn't help.
Here is html and JS fiddle link (http://jsfiddle.net/rRLB4/):
P.S. Please, note that in JS Fiddle I have removed all spaces, enters and tabs in HTML and I do not TidyUp, otherwise there appears some empty spaces and btn-group is not lined up.
<div class="btn-group">
<button data-toggle="modal" data-target="#portfolioEditModal" data-bind="click: triggerFileUpload, clickBubble: false" class="btn btn-primary">Import</button>
<div class="tooltip-wrapper" data-toggle="tooltip" data-container="body" data-placement="bottom" data-original-title="Enter data!">
<button data-bind="click: trySave, clickBubble: false" class="btn btn-primary" disabled="">Save</button>
</div>
<button class="btn btn-primary" data-bind="click: showSaveAsDialog, clickBubble: false" disabled="">Save As</button>
</div>
You need to set the .tooltip-wrapper to float left like buttons do in a button group and adjust the border radius of the button inside the wrapper. Something like this should work:
.tooltip-wrapper {
display: inline-block;
float: left;
}
.tooltip-wrapper .btn {
border-radius: 0;
}
.tooltip-wrapper:first-child .btn {
border-radius: 3px 0 0 3px;
}
.tooltip-wrapper:last-child .btn {
border-radius: 0 3px 3px 0;
}
Here's your example updated: http://jsfiddle.net/sxqDt/12/
//test you css code
.tooltip{
dislay:none !important;
}
//if you use tooltip and this code copay paste your source css
//when use tooltip
.tooltip{
position:fixed !important;
}
.tooltip-inner {
padding:5px;
color:#FFFFFF !important;
font-size: 12px !important;
max-width:250px !important;
text-align:justify !important;
word-break: break-all;
}
Here is an example: http://jsfiddle.net/eJSGn/
input{
padding-left: 20px;
}
input:last-of-type{
background: url(http://skiorboard.com/wp-content/uploads/2014/03/search.png) no-repeat;
background-size:15px 15px;
}
<input type="button" value=" Search " />
<input type="button" value=" Search " />
<input type="button" value=" Search " />
So if I have three input buttons and style the last of the three to have a background image (magnifying glass) why does the adding of this image to the third button also result in drastic changes to the button? In chrome, for example, the third button's background turns white and the border style changes.
I want to use the browser's default styles for these buttons, but would like to be able to add a background image to the button without it making that button look totally different than the other buttons which I will not be adding icons to.
Your overriding the background property which browsers use to set their defaults (browser set styles have the very lowest CSS priority). It would be the same as doing.
/* This will override browser styles. */
button
{
background: grey;
}
/* This will override the above style */
button
{
background: black;
}
/* This will override the above style */
button
{
background: blue!important;
}
Each one has more priority over the other therefore overriding it.