I'm using the mat-slide-toggle element from Angular Material 2, and I made it a bit bigger, but the thumb doesn't move to the end of the container when clicked, and I can't seem to figure out which transform-translate property controls the distance.
The following is a pic of how it looks currently when clicked:
Is someone aware of what property needs to be changed for this to slide to the end? Thanks in advance.
In case someone Googles this - the correct selector is the following:
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
transform: translate3d(64px,0,0) !important;
}
I got the correct answer from the following link, which contains other useful selectors for mat-slide-toggle.
Related
I'm using ngx-bootstrap for datepicker. But when I use this datepicker inside modal, It opens under modal.
My issue is similar to this . But css changes are not working for me. Any help whould be appreciated.
I think You need to change the parent class style .
this will work for ngx-bootstrap calendar
follow this code
bs-datepicker-container, bs-daterangepicker-container { z-index: 2000; }
You are probaly using the wrong class if you follow that answer.
I took a look at the github code and saw that the class name used there is bs-calendar-container.
You might want to verify that this is the case for your wrongly z-indexed elements by inspecting them in your developer tools(F12) and verifying the class name on them.
Then you might want to change the z-index to have them appear above the modal.
The problem is caused by the modal being a direct child of the body element, and the datepicker date chooser also being a direct child of the body element, so they are competing for the same z-index space.
The bootstrap modals usually have an z-index of 1000. So setting the z-index of your datepicker item to 1200 should help, to make sure they also appear above elements that are present within the modal.
In case your datepicker has the class bs-calendar-container your CSS would look like this:
.bs-calendar-container {
z-index: 1001;
}
Is there a way to style the icon of a completed step in Angular Materials stepper module? When I complete a step it adjusts the icon to a check mark. I'm trying to adjust the background color of the icon as well. My code is similar to the example here with linear mode enabled: https://material.angular.io/components/stepper/overview
When I look in the DOM the only attribute that changes when it is completed is the 'ng-reflect-ng-switch' attribute. I'm not sure how I can target this element in order to style it upon completion. Hopefully someone can point me in the right direction. Thanks!
I got this working by targeting the elements attribute like this:
[ng-reflect-ng-switch~="done"] {
background-color: green;
}
I can't understand how to make something like in this site: __smashingmagazine.com
If u resize the window, the search will be with a button. So... try to click on this search icon... the new div will appear with search input. and pay attention to the behavior of it: no matter what u gonna do next this div won't hide it self, but only if you click on 'x' that appear instead of search icon... and this is pure css, right?! how this possible...
I found this article:
Click here
but the behavior is very, very different... and i don't like it at all.
Any idea how to make it work like in the site above? anything would may help!
Thanks!
The example from Smashing Magazine uses the :target psuedo class to change the CSS of the elements when an anchor is clicked. Here's a simplified breakdown of how they've achieved that behaviour.
The anchor is configured to set a fragment identifier in the URL, in the case of Smashing Magazine this is #ms. The have an anchor like this:
Search
When clicked the fragment identifier is set to #ms, they then use this to make the search appear using the :target psuedo class.
#ms {
display: none;
}
#ms:target {
display: block;
}
When the fragment identifier is set to #ms, the :target styles are activated, displaying the search.
Here's a simple example: http://jsfiddle.net/we76L66h/
They are using :target with children (#ms:target + div.example) to also change the styling of children within the targeted element. This is how they make the button change to a "close" button when the #ms fragment identifier is set.
I am drawing an image inside panel and slider field using ExtJS 4. I want to change opacity of image whenever of value of slider field changes.
I am aware that opacity and filter:alpha(opacity=); rule of CSS can be applied to image which will change its opacity.
However I do not know how to apply this css rule to the image. Can anyone please guide me on this?
You can use Ext.dom.Element.setOpacity method:
Ext.fly('image-id').setOpacity(0.5); // this will make img with id 'image-id' become half-transparent
Here is live demo
Update
If you are using Ext.Img component you will have to do something like the following:
imgCmp.getEl().setOpacity(0.5);
I'm making an app using JQuery Mobile on top of PhoneGap (Cordova). I used Codiqa to come up with a wireframe for my UI. It looks OK so far, but the group of radio buttons I'm going to use to change views with wasn't centred - it was off to the left by about 25px on a WVGA800-sized webkit browser. When scaled to a tablet shape, the group got further and further from the centre of the viewport.
Here's a jsFiddle link to my project with the problem unfixed - http://jsfiddle.net/jaspermogg/sahXy/1/
Here's a jsFiddle link to my project as fixed by me - http://jsfiddle.net/jaspermogg/NvMsK
I came up with a solution using JQuery, but I'm inexperienced and don't know which event to fire on.
When I load the UI in Webkit, it renders the UI pre-script, before refreshing after <1s to a post-script state. This looks lame. I have my script set up to run on $(window).load.
Questions:
What event should I be looking for, and could you show me how to implement that?
Is my script in the right place - should it be inside the page, the way it is, or outside? Or in head even?
It feels really stupid to be doing this with JQ - surely there's a way to do this with CSS?
Thanks in advance for any help offered! Cheers!
I guess I answered my own question in the comments above, so gonna formalise it by accepting my answer.
What I did in the end was -
(1) Set the radio button-containing div to visibility: hidden in the CSS.
(2) Find the widths of each radio button and add them together.
(3) Set the width of the radio button-containing div to the total width.
(4) Chain a change of the visibility property onto (3).
The CSS has to be set up like this -
#viewselector{
margin: 0 auto;
text-align: center;
visibility: hidden;
}
The code to do (1) to (4) is as follows -
$(document).ready(function(){
var idealwidth = 0
$(".ui-radio").each(function(){
idealwidth = idealwidth + $(this).width();
});
$("#viewselector").width(idealwidth).css('visibility','visible');
});
Hope this helps someone!