my ion-slides has in scss:
ion-slides {
--bullet-background-active: rgb(4, 100, 52);
--bullet-background: rgb(255, 0, 0);
}
the question is: how can I change the default opacity of the non-active bullet? I want her in 1
Ionic CLI : 6.19.0
Ionic Framework : #ionic/angular 6.0.4
well you can use this way:
ion-slides ::ng-deep {
.swiper-pagination.swiper-pagination-bullets {
.swiper-pagination-bullet {
background: green;
opacity: 1;
&.swiper-pagination-bullet-active {
background: red;
opacity: 0.8;
}
}
}
}
so the green background is for non active bullet and red background is for active bullet
Related
So i've installed the facebook customer chat messenger plugin on my website and it works fine, but i need to align it to the left of the website and if possible also change the size of the button (it's huge).
my code is:
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/pt_PT/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fmessengerBtn">
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml: true,
version : "v3.2"
});
};
</script>
<div id="fb-root"></div>
<div class="fb-customerchat"
attribution=setup_tool
page_id="372545293082246"
theme_color="#0b9bb8"
greeting_dialog_display="fade"
greeting_dialog_delay="60"
ref="home"
logged_in_greeting="Fale conosco"
logged_out_greeting="Fale conosco">
</div>
</div>
i've tried just using CSS to align the container div but then the chat window will stay on the right side of the website... Is there some sort of attribute or option to set the thing to go to the left side instead? Surely this is something lots of other people have needed to do
also, the greeting_dialog_delay option doesn't seem to be working
The following CSS seems to work for now (since the classes may change) :
/* ***************
* FB on left side
******************/
/* This is for the circle position */
.fb_dialog.fb_dialog_advanced {
left: 18pt;
}
/* The following are for the chat box, on display and on hide */
iframe.fb_customer_chat_bounce_in_v2 {
left: 9pt;
}
iframe.fb_customer_chat_bounce_out_v2 {
left: 9pt;
}
I tweaked the code a bit in case you want to keep the widget on the bottom right but just move it over to the left some (e.g., it is blocking another element)
.fb_dialog.fb_dialog_advanced {
right: 18pt;
margin-right: 50px;
}
iframe.fb_customer_chat_bounce_in_v2 {
right: 9pt;
margin-right: 50px;
}
iframe.fb_customer_chat_bounce_out_v2 {
right: 9pt;
margin-right: 50px;
}
To add to #Cubakos' answer to get the bounce in and bounce out animation:
#keyframes fb_bounce_in_v2 {
0% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left;
}
50% {
transform: scale(1.03, 1.03);
transform-origin: bottom left;
}
100% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left;
}
}
#keyframes fb_bounce_out_v2 {
0% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left;
}
100% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left;
}
}
Try Below Code
.fb_dialog {
position: -webkit-sticky !important;
position: fixed !important;
bottom: 95px !important;
right: 30px !important;
}
Combining #Cubakos & #Kuttoosan answers + made an adjust for positing the chat bubble as the posted methods here no longer work for me.
/* The following is for the chat bubble */
.fb_dialog_content>iframe {
left: 18pt;
}
/* The following are for the chat box, on display and on hide */
iframe.fb_customer_chat_bounce_in_v2 {
left: 9pt;
}
iframe.fb_customer_chat_bounce_out_v2 {
left: 9pt;
}
/* The following are for the bounce in/out animations */
#keyframes fb_bounce_in_v2 {
0% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left;
}
50% {
transform: scale(1.03, 1.03);
transform-origin: bottom left;
}
100% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left;
}
}
#keyframes fb_bounce_out_v2 {
0% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left;
}
100% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left;
}
}
After a while, I realize that we couldn't customize this plugin by CSS because
"it isn’t possible to style the elements contained within an iframe as
you would with normal HTML elements on your site due to HTML
limitations"
https://wordpress.org/support/topic/resize-messenger-icon/
You can customize your chat plugin from Facebook Business Page only 3 things:
Alignment
Color
Bottom Spacing (For mobile and desktop)
In the right page, there are preview pages for you to know how your customization will be like.
After customizing, don't forget to click on the button PUBLISH to save your changes.
It's a pain that you cannot resize the logo or styling it more easily, I hope that Facebook in the future can give us more power to do what we want with this.
Was Simple as below.
.fb_dialog.fb_dialog_advanced iframe {
right: auto !important;
left: 2rem;
bottom: 2rem !important;
}
Here's how I edited it properly. Get ready for a fun navigation run! (learn from our wasted 4h)
Switch or login as your facebook professional account
Go to your facebook page
Click "Manage"
On the left menu, under "Your Tools" click "Messaging Settings"
(Now it takes you to a new dashboard)
On the left menu click inbox again (even though you are already on it)
Click top gear icon.
Under "Inbox Modes", click "View all settings"
Select Chat plugin on the left
Scroll down and voila... now you can edit the chat positioning
How can we change the default underline color of a ion-text in only a single page in Ionic 4?
The underline is actually a part of the ion-item, not the ion-input.
ion-item {
--border-color: var(--ion-color-danger, #f1453d);
}
Ionic 4.x uses CSS Custom Properties for most of the time.
src/app/pages/test/test.page.scss
:host {
ion-item {
--border-color: white; // default underline color
--highlight-color-invalid: red; // invalid underline color
--highlight-color-valid: green; // valid underline color
}
}
If necessary, please check the other custom properties here.
For Ionic V4.X is a little bit diffrent.
You can open specific_page.scss file where you want to change ion-input border when input value is Valid o Invalid
Change the colors of the following class, like this:
:host {
.item-interactive.ion-invalid{
--highlight-background: yellow !important;
}
.item-interactive.ion-valid{
--highlight-background: black !important;
}
}
Try this css
.item-has-focus{
--highlight-background: #e2e2e2;
}
To aggregate in app.scss file
.ios {
.item-has-focus.ion-invalid {
--border-color: var(--ion-color-danger, #f1453d);
}
.ion-valid {
--border-color: var(
--ion-item-border-color,
var(--ion-border-color, var(--ion-color-step-150, rgba(255, 255, 255, 0.8)))
);
}
.custom-item {
--background: transparent;
color: #fff !important;
--background-focused: transparent;
}
}
.md.custom-item {
--background: transparent;
color: #fff !important;
--background-focused: transparent;
--border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(255, 255, 255, 0.8)))
);
}
Or use class to you custom .custom-item.hydrated.ion-touched.ion-dirty.ion-invalid.item-label.item-interactive.item-input.item-has-focus.item.ios.ion-focusable
I make a custom SVG icon on ionic 3 tabs, evrthing works well in browser,
but when I tested it on a device or emulator the color become wrong on the background
How to fix this?
ion-icon {
&[class*="custom-"] {
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 1em;
height: 1em;
}
&[class*="custom-donkey"] {
mask-image: url(../assets/icon/donkey.svg);
}
&[class*="custom-cat-ol"] {
mask-image: url(../assets/icon/cat-outline.svg);
}
}
Please help I thing from this code
background: currentColor;
&[class*="custom-donkey"] {
mask-image: url(../assets/icon/donkey.svg);
}
&[class*="custom-cat-ol"] {
mask-image: url(../assets/icon/cat-outline.svg);
}
instead of Adding The Url/Path of the SVG icon Try to add the SVG Code or You can Directly add the SVG code in bottom menu in HTML and Adjust the Size using CSS Class
I am making a Dashing widget and I would like the text to fade in/out when the widget is updated. At this point I can only get the widget to animate when the dashboard page is loaded. What do I need to add so that the animation runs every time the widget is updated?
Here is the scss for the widget:
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #ec663c;
$title-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.7);
// ----------------------------------------------------------------------------
// Widget-text styles
// ----------------------------------------------------------------------------
.widget-textblink {
background-color: $background-color;
.title {
color: $title-color;
}
.text {
color: $moreinfo-color;
animation: blink;
animation-duration: 1s;
animation-iteration-count: 15;
}
}
#keyframes blink {
0% { opacity: 1.0; }
50% { opacity: 0.35; }
100% { opacity: 1.0; }
}
Here is the html:
<h1 class="title" data-bind="title"></h1>
<p class="text" data-bind="text"></p>
The coffee file is empty.
In your onData function, apply the CSS class to the element responsible for animating in and out. Or alternatively just handle the animation in JavaScript.
You can put that code on your textblink.coffee and let the javascript handle it
#textblink.coffee
class Dashing.InfoProgress extends Dashing.Widget
onData ->
$(#node).fadeOut().fadeIn()
I am using jstree plugin to populate my tree based on xml file. Some nodes text are greater than the container div. Is there any way to text wrap jstree node texts?
$(document).ready(function(){
$("#tree").jstree({
"xml_data" : {
"ajax" : {
"url" : "jstree.xml"
},
"xsl" : "nest"
},
"themes" : {
"theme" : "classic",
"dots" : true,
"icons" : true
},
"search" : {
"case_insensitive" : true,
"ajax" : {
"url" : "jstree.xml"
}
},
"plugins" : ["themes", "xml_data", "ui","types", "search"]
}).bind("select_node.jstree", function (event, data) {
$("#tree").jstree("toggle_node", data.rslt.obj);
This worked for 3.0.8
.jstree-anchor {
/*enable wrapping*/
white-space : normal !important;
/*ensure lower nodes move down*/
height : auto !important;
/*offset icon width*/
padding-right : 24px;
}
And for those using the wholerow plugin;
//make sure the highlight is the same height as the node text
$('#tree').bind('hover_node.jstree', function() {
var bar = $(this).find('.jstree-wholerow-hovered');
bar.css('height',
bar.parent().children('a.jstree-anchor').height() + 'px');
});
For 3.1.1, and for it to also work with select_node.jstree use this function instead:
function(e, data) {
var element = $('#' + data.node.id);
element
.children('.jstree-wholerow')
.css('height', element.children('a').height() + 'px')
;
}
Try adding the following style to the child anchors of your jsTree div:
#jstree_div_id a {
white-space: normal !important;
height: auto;
padding: 1px 2px;
}
I also have a max-width on my jsTree div styling:
#jstree_div_id
{
max-width: 200px;
}
#tree_id {
.jstree-anchor {
white-space: normal;
height: auto;
}
.jstree-default .jstree-anchor {
height: auto;
}
}
Putting together answers from Hashbrown and TwiceB to get it to work with the wholerow plugin and preselected data.
Enable text wrapping
.jstree-anchor {
/*enable wrapping*/
white-space : normal !important;
/*ensure lower nodes move down*/
height : auto !important;
/*offset icon width*/
padding-right : 24px;
}
Enable highlighting of wrapped text on hover and select
$('#tree').bind('open_node.jstree', function () {
let bar = $(this).find('.jstree-wholerow-clicked');
bar.css('height',
bar.parent().children('a.jstree-anchor').height() + 'px');
});
$('#tree').bind('hover_node.jstree', function () {
var bar = $(this).find('.jstree-wholerow-hovered');
bar.css('height',
bar.parent().children('a.jstree-anchor').height() + 'px');
});
I found the answer by coincedence and it worked for me ,but , i had another css rule that was preventing the code from functioning well
I removed the css rule (min-height:200px) "in my code" and the following answer worked for me as i expected.
#tree_div_id a {
white-space: normal;
height: auto;
padding: 0.5ex 1ex;
margint-top:1ex;
}
This issue is resolved below.
https://www.npmjs.com/package/treeview-sample
According to this sample, the folder DOM will be output with the following contents.
<a class="jstree-anchor jstree-anchor-formatted" href="#" tabindex="-1" role="treeitem" aria-selected="false" aria-level="3" id="grandchild2_anchor" title="Human">
<i class="jstree-icon jstree-themeicon" role="presentation"></i>
<span class="jstree-anchor-text">Human</span>
</a>