On a hover state I'm trying to remove the background color of an md-button when I hover, but I'm not able to affect it.
I'm using Material 2
In my html I have the following:
<div class="case-nav-container">
<div *ngFor="let item of nav">
<a md-button
routerLinkActive #rla="routerLinkActive"
class = "case-button"
[class.active]="rla.isActive">{{item.display}}</a> <br>
</div>
</div>
In my SCSS I have:
a.case-button{
min-width: 200px;
text-align: left;
&:hover{
border-left: solid blue 6px;
background-color: none;
}
}
My question is how do I remove the bg-color of the button?
The background color comes in the form of a focus overlay div. This will remove it,
template:
<a mat-button class="no-hover">Basic Button</a>
css:
.mat-button.no-hover ::ng-deep .mat-button-focus-overlay {
background: none;
}
demo:
https://stackblitz.com/edit/angular-material2-issue-dyck3s
I think you need to increase the specificity of your SCSS. Try .case-nav-container a .case-button. Your SCSS will need to address the element you are modifying more specifically than the Angular Material code is. In some instances where increasing specificity isn't practical for an element a !important SCSS attribute will work as well to override the Angular Material default background color.
Related
I have a JQuery UI progressbar and so far I have gotten it to work if the screen size is large. However, I am stuck on how to make both the progressbar and the progress showing inside to shrink and adjust to different screen sizes.
Below is my simplified code for the JQuery UI progressbar to show. In my real code, my value does change, but, even if I set it to a fixed value, it doesn't work anyways.
HTML
<div id="progressbar"></div>
CSS
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
JS
$('#progressbar').progressbar({
value: 37
});
As you can see, I have a value of 37. However, when I try to shrink the browser width, the progress bar just fills it up such that the value changes to 100.
The progress in the progress bar not responding to each other
I have tried searching solutions up but none works. I tried setting width: 100% and/or wrapping the progress bar in another div, etc, but none to do not work.
I really expected that it keeps it filled up at only 37% of the entire progress bar even when I shrink the size of the window, just like how it is on the JQuery's link: https://jqueryui.com/progressbar/.
Practice with the following.
$(function() {
$('#progressbar').progressbar({
value: 37
});
$("#setWidth").change(function() {
$(".progress-wrapper").css("width", $(this).val());
});
});
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div><label>Set Width</label><input type="text" id="setWidth" /></div>
<div class="progress-wrapper" style="width: 100%;">
<div id="progressbar"></div>
</div>
The jQuery UI Progressbar is designed to be responsive. Change the window here and you should see that both the border and the inner element shrink responsively.
You can also change the width of the parent, by typing in a value in the field above, like 40% or 240px and it will do the same.
I have padding on images and the padding affects the image link because there is a black line
Style
a:link{background-color:black}
img{padding:20px}
Html
<img src="blank">
So in Simple terms there is a black line coming from the image and I want to get rid of it. I can't get rid of the styled link because I use it for other links
Instead of black, use transparent or none
SNIPPET
.tran {
background-color: transparent;
}
.none {
background-color: none;
}
img {
padding: 20px
}
<a href="#/" class='tran'>
<img src="http://i.imgur.com/o1RbMvI.png">
</a>
<a href="#/" class='none'>
<img src="http://i.imgur.com/o1RbMvI.png">
</a>
If you want specific style for one link, but you don't want it to affect the others or be affected by the others, I would set up a specific class for the links you want to have a background-color: black; and then a separate class for the link that you don't want affected by it. zer00ne provides a sufficient answer for this. Just add class="tran" or whatever you want to name them into your links that you want to be connected together with whatever style you use in .tran{}, as shown in his answer. Play around with grouping things into classes and using the classes to style more specific elements in your CSS. Best of luck!
in css file:
.black{background-color:black;}
img{padding:20px;}
HTML:
<p>
<img src="blank">
<img src="blank">
</p>
Can't believe how much I'm struggling with this simple task. What is the correct way to place a jQuery Mobile data-icon on an element that the user does not interact with? What if I want a paragraph that just displays a message to the user like "No suitable lots were found" and I want that element to have the "info" icon?
I know this won't do it, but something like:
<p data-role="content" data-icon="info" class="my-message-block">No suitable lots were found</p>
Not a link. Not a button or checkbox or .... Just a plain old box displaying a message? All examples I see are an interactive element and not a static element.
Thanks in advance.
I do this by adding a span with some CSS as follows:
<p data-role="content" class="my-message-block"><span class="ui-icon-info ui-btn-icon-notext inlineIcon"></span>No suitable lots were found</p>
Then the inlineIcon class has these rules to place the icon:
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
The right margin controls the space between the icon and the text.
If you prefer a black icon with no gray disk behind it:
<p class="my-message-block"><span class="ui-alt-icon ui-icon-info ui-btn-icon-notext inlineIconNoDisk"></span>No suitable lots were found</p>
.inlineIconNoDisk {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
.inlineIconNoDisk:after {
background-color: transparent;
}
ui-alt-icon on the span changes the icon color and background-color: transparent; on the :after pseudo element hides the disk.
Here is a DEMO
I have the following button in my jQuery mobile 1.4.0 , I want to modify its border radius in order to be as the button in the following image , I have tried the following code but it didn't work for me , How can i modify the button border radius in jQuery mobile 1.4.0? Plese help me ..
<div class="ui-btn ui-input-btn center_BTN " >
<input type="button" id="save" data-inline="true" value=" Save" data-icon="check" />
</div>
CSS
.center_BTN {
text-align:center;
background-color:transparent !important;
border:none;
}
.center_BTN.ui-btn,.center_BTN .ui-input-btn{
border: solid #cccccc 5px;
border-radius:32px !important;
}
Update
jQM has added a new feature which doesn't require any JS intervention. Create a custom class e.g. foo and then add data-wrapper-class="foo" attribute to input itself.
<input type="button" data-wrapper-class="foo" />
Demo
Old answer
jQuery Mobile dynamically wraps input in a div where all CSS styles are added to it, hence it is not possible to style it statically.
Create a custom class with all your CSS and add it after page is created.
$(".selector").closest("div").addClass("custom-class");
Demo
Rounded rectangle button
.ui-btn-corner-all {
border-radius: 1m;
}
Rectangle button
.ui-btn-corner-all {
border-radius: 0m;
}
I am having a listbox and I want to remove its border. Can any one help?
I thought of using clip in jquery? Anyone knows that?please help
<select id="lbCommcatFrom" runat="server"
style="height: 230px; width: 232px; border: none;"
multiple name="lbCommcatFrom" class="ContentTextNormal">
</select>
or set border color to transparent.
either in css border-color: transparent;
or in code behind something like
listbox.BorderColor = System.Drawing.Color.Transparent;