Here is a screenshot of what is showing up on my webapp right now. It is supposed to be an add button, and the button functionality is there, but for some reason the image itself isn't showing up:
I am not sure if this would be an issue with what I am doing in my HTML or in my CSS, and have never really seen this problem before.
The HTML code relevant to this:
<button md-button class="add-btn" aria-label="add">
<md-icon class="jf-add"></md-icon>
</button>
CSS:
.add-btn {
text-transform: none;
color: #007ab4;
> span {
padding-left: 4px;
vertical-align: sub;
}
}
Did you define the material design in your module?
Example:
angular.module('buttons', ['ngMaterial'])
Also does not look like you defined the src of the icon in your button
Example:
<md-icon md-svg-src="img/icons/cake.svg"></md-icon>
Related
I am using angular material sidenav for some application settings functionality to achieve something like we have in Google.
The difference is I am calling this sidenav from another component and wrapping the router too so that it should open below the application Header.
<mat-sidenav-container class="main-sidenav">
<app-sidenav></app-sidenav>
<router-outlet></router-outlet>
</mat-sidenav-container>
The problem is when I open the sidenav It does not disable the background. It should automatically implement the backdrop style. Is there any way I can explicitly provide some style for the same or should we consider some different component? Please suggest. Below is the sample stackblitz example for the same scenario
Stackblitz link
Set the hasBackdrop flag to true in your html:
<mat-sidenav-container class="main-sidenav" hasBackdrop="true">
<app-sidenav></app-sidenav>
<router-outlet></router-outlet>
</mat-sidenav-container>
Per Material doc of sidenav:
Using your stackblitz, I have confirmed the backdrop renders by inspecting the elements:
But you are not seeing the dark shadow, because of missing css. To fix this, add following in your styles.css file.
.mat-drawer-backdrop {
background-color: rgba(0, 0, 0, 0.6);
}
Also, to make the sidenav appear like the screenshot in your question, you need to add some css properties in sidenav class.
.sidenav {
margin-top: 35px;
margin-left: 25px;
display: block;
width: 200px;
height: 100%;
position: fixed;
background: #FFF;
}
Result:
Stackblitz Demo
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'm currently in a project developing an Angular SPA that has dropdown menus in its main navbar. To get this effect, we are using CSS: hover selectors. The issue is that when an action is performed within this dropdowns we would like to close them without hindering the ability to open them again. For example, if a user opens a link within one of this dropdowns (internal link with ui-sref) he is then taken to this particular state, but the dropdown would still be visible until he moves the mouse outside it (and partially obscuring the new content shown). We would like the dropdown to be closed when an action within is performed and if the user would like to open it again, he would be able to hover the mouse again over the trigger.
We tried removing and re-adding classes (even after a timeout) but the dropdown reappears again.
Link to a Plunker with a setup similar to what we are trying to accomplish: https://plnkr.co/edit/qzQk4r2WQFhwsgUWug39?p=preview
And the relevant portions (Angular controller omitted as it has no content):
HTML:
<div class="hoverable has-dropdown">
<button class="dropdown-trigger">Hover me!</button>
<div class="dropdown">
Dropdown content
<button ng-click="buttonAction()">Action</button>
</div>
</div>
CSS:
.dropdown {
display: none;
position: absolute;
top: 20px;
width: 100px;
height: 100px;
background: lightgrey;
padding: 1em;
}
.has-dropdown {
position: relative;
height: 20px;
}
.has-dropdown .dropdown-trigger:hover + .dropdown,
.has-dropdown .dropdown-trigger + .dropdown:hover {
display: block;
}
Thanks!
Finally solved it by using ng-mousenter and ng-mouseleave and dropping CSS :hover rules. As everything is based on JS I can just trigger mouseleave when I want to close them.
I am using a bootstrap button on a page of my website and I want to change the color of a disabled button. A button that is "grayed out" and you cannot click. Is there a way I can change the color of this using CSS? Any class for this?
Thank you very much!
In case your button look like this:
<button class="btn btn-primary" disabled>Button</button>
the next CSS code will change its color (when disabled only):
.btn.btn-primary[disabled] {
background-color: #00ff00;
}
or
.btn.btn-primary:disabled{
background-color: #00ff00;
}
If I understand your question correctly; you need to use :disabled.
Here is a working code:
#work {
width: 200px;
height: 50px;
color: black;
}
#work:disabled{
background-color: red;
}
<button id="work"disabled="true" type="submit">Button </button>
I had to do this because I was disabling the button in javascript.
var button = document.querySelector("#button");
button.disabled = 'disabled';
button.setAttribute("style", "background-color: #799b48");
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;
}