I'm currently implementing a Swiper using react. I'm using Bullets as pagination marks. My code for the pagination looks as follows:
<Swiper
navigation
pagination={{
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
}}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
Since I'm using react the attribute of the span should be className instead of class. The problem is, that if I change it to className instead of class, the CSS of the bullets does not get applied. I hope somebody can help me to fix this, thanks in advance.
Use it like this,
return <span className={`${className}`}>{index + 1}</span>;
This will work!
Related
I keep running into this problem. I need to be able to set the background of various elements in my component as dynamic linear gradients. (The context is creating a grid background that scales and adjusts depending on various inputs).
I want to be able to build up my linear-gradient CSS background property dynamically in a function, e.g. here's a simplified version of what I am trying to achieve:
createBackgroundString(){
return 'linear-gradient(' + this.angle + 'deg, ' + this.color1 + ', ' + this.color2 + ')';
}
...and then stick that into my :style attribute to have Vue apply it dynamically:
v-bind:style="{ background: createBackgroundString() }"
Vue rejects (ignores) this outright, presumably because the resultant string is too complex to fit the property template which expects a simple string like 'red' or '#FF000' etc.
Is there any way/hack/workaround to achieve this in Vue? At the moment I'm having to resort to jQuery for this which is far from ideal.
I can get it to work like this:
<div :style="{ backgroundImage: createBackgroundString }" />
and a computed prop:
data() {
return {
angle: '50',
color1: 'red',
color2: 'blue'
}
},
computed: {
createBackgroundString() {
return `linear-gradient(${this.angle}deg, ${this.color1}, ${this.color2})`;
}
}
You don't have to use backticks (`) if you don't want to. I just prefer it.
Note that I have changed createBackgroundString() to createBackgroundString
I am trying to display my data in Green color I tried with different methods but still it is not getting populated.
if(typeof(this._serverList)!="undefined"){
var apparr=this._ApplicationList.find(x=>x.appNm==app);
let strlist1=this._serverList.filter(i=>i.envId==envId&&i.appId==apparr.appId).map(x=>x.serverName);
if(typeof(strlist1)!="undefined"){
strlist1.forEach(line=>{
if(line!="")
line.fontcolor("green"); //HERE IS PROBLEM, NOT POPULATING
list+='.'+line+'\n';
});
}
return list;
}
Your problem is using the fontcolor() method - that's old and won't work in HTML5:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fontcolor
If you are rendering the HTML properly from this string, then you should be able to easily achieve this by just assigning some hardcoded HTML to it (that's all fontcolor() does). So instead of doing line.fontcolor(color), you could just replace that line with:
line = '<p style="color: #000">' + line + '</p>
Or use template strings, etc.
document.getElementById('red-text').innerHTML = '<p style="color: red">hello!</p>';
<div id="red-text"></div>
I want to change position depends on some events.
For example at the begining space from top should be 100px, but after button click should be 0px
<mat-list-item class="menu-item disabled " disableRipple (click)="toggleSubmenu($event)">
<h3 matLine class="menu-item-text">Orchestration</h3>
</mat-list-item>
I want to code some similar to
<mat-list-item class="menu-item disabled " disableRipple (click)="toggleSubmenu($event)" [ngStyle]={top: myVarilable+'px'}>
<h3 matLine class="menu-item-text">Orchestration</h3>
</mat-list-item>
but it doesnt work for me. Do you have some ideas to solve it?
I am not sure if is what you are looking for but you can pass an Object in the ngStyle, so you can use a function that returns a dynamically generated object.
Something like that.
HTML
<p [ngStyle]="setMyStyles()">
You say tomato, I say tomato
</p>
Component
setMyStyles() {
let styles = {
'top': this.user.myVarilable + 'px',
};
return styles;
}
You can do this very simply.
[ngStyle]="{'top.px': myVarilable}"
Otherwise:
[style.top.px]="myVarilable"
<div [ngStyle]="{'margin-top': !clicked ? '0px' : '100px'}"></div>
I fixed by adding below code on HTML and ts files.
HTML :
<div [ngStyle]="getStyles()">
TS:
getStyles(): void {
const myStyles = {
'background': 'red,
};
return myStyles;
}
Hope this will work fine.
Upgrading to Angular v9 isn't a Option for my Project. So this works:
<div [style]="color">...</div>
color = this.sanitizer.bypassSecurityTrustStyle('--someKey: ' + someVariable);
example 2:
[style]="colorTest(progressPercentageValueoutOfTotal, progressColor)"
colorTest(progressPercentageValueoutOfTotal, progressColor) {
return this.sanitizer.bypassSecurityTrustStyle('--percent: ' + progressPercentageValueoutOfTotal + '; stroke:' + progressColor);
}
I figured out, that it doesn't work if any other styles were set via [style.anyKey] or [ngStyle], so i had to create a container wich only contains the variable. 🎉
Please, see image below and you will see what I talking about.
When I click on link or picture feature of Summernote BoosTrap Editor ( v0.6.16 ) the Modal appears inside another Modal, that's weird. I don't know if I have some CSS overriding another ones or if its BUG of SummerNote.
Summernote url: http://summernote.org/#/
Thanks.
I found the issue. In my point of view its a incompatibility between SummerNote and bootstrap-modal plugin.
In SummerNote I found code below:
var tplDialog = function (className, title, body, footer) {
return '<div class="' + className + ' modal" aria-hidden="false">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
(title ?
'<div class="modal-header">' +
'<button type="button" class="close" aria-hidden="true" tabindex="-1">×</button>' +
'<h4 class="modal-title">' + title + '</h4>' +
'</div>' : ''
) +
'<div class="modal-body">' + body + '</div>' +
(footer ?
'<div class="modal-footer">' + footer + '</div>' : ''
) +
'</div>' +
'</div>' +
'</div>';
};
What the meaning of this, when i click on Link or Picture feature on SummerNote he calls the .modal() and the default behavior of this function, on Bootstrap-modal Plugin, is create a new div with class="modal-dialog". If I remove this class="modal-dialog" and try again, everything works fine!
i think you just need to enable this option
dialogsInBody: true
$('.summernote').summernote({
height: 300,
dialogsInBody: true
});
As originally pointed on this issue, Summernote´s crew has included the solution in the documentation, which says to include the following option:
$('#summernote').summernote({
dialogsInBody: true
});
But even so you experience a bug that freezes the underlaying modal, you can use this ugly, but handy and short workaround:
$('.modal.link-dialog').on('hide.bs.modal', () => {
setTimeout(() => {
if ($('.modal:not(.link-dialog)').hasClass('show')) {
$('body').addClass('modal-open');
}
}, 0);
});
It basically re-add the modal-open class to the body when another modal is active.
How to place typeahead results above the text input ? The best for me would be adding an option to this widget or maybe some css rule ?
At this moment i finally used jQuery solution in render event of typeahead widget, by modifying css margin-top after each render. Here is the code:
echo Typeahead::widget([
//(...)
'pluginEvents' => [
'typeahead:render' => 'function(event,ui) {
var ttMenu = $("#search-main .tt-menu").first();
var ttMenuHeight;
if($(ttMenu).hasClass("tt-open")) {
ttMenuHeight = -$(ttMenu).height();
$(ttMenu).css("margin-top", ttMenuHeight - 70);
}
}',
],
//(...)
]);
'#search-main .tt-menu' is my selector for typeahead input, and this "70" is height of this input so be sure to replace it with your own.
Hope it helps.