We Keep Coding

Vue.js cannot add style from method

I'd like to add some styles into html element from methods:
<div class="add-profile-img" v-bind:style="getBackgroundImg()">
The method is:
getBackgroundImg: function() {
return {
width: 180px;
height: 180px;
background-color: 'yellow';
background-image:url(this.BASE_URL +'/uploads/noimg.gif');
}
},
However, I get
Syntax Error: Identifier directly after number (79:13)
77 | getBackgroundImg: function() {
78 | return {
> 79 | width: 180px;
| ^
How can I fix it?

Dimension in pixels need to be in string format so the function return a valid javascript object:
return {
width: '180px',
height: '180px',
'background-color': 'yellow',
'background-image': `url(${this.BASE_URL}/uploads/noimg.gif)`
}

can I ask why would you want to do that? As far as I know if you bind a style, just create the object in the data object and do not forget to use the style sintax adapted for javascript. (Camelcase)
data(){
return{
yourStyleVariable: {
backgroundColor: 'red'
}
}
}

Video.js Customizing player controls

Im Searching how to customize the player for live use with dash.js,
as browser player not work wel with live session i trying to delete seekbar and time indicators for now, in the future i will search for a seekbar that can manage live buffer.
But I can't find the correct attribute to set seekBar: false and every time indicator off,
I find this list https://docs.videojs.com/tutorial-components.html but the components seems to not work.
Which are the correct attribute to exclude that controls? Or maybe is a syntax problem?
http://jsbin.com/aheVeCOG/2/edit?js,output
Volume control to false work:
var video = videojs('my_video_1', {
children: {
controlBar: {
children: {
volumeControl: false
}
}
}
});
My try don't work
var video = videojs('my_video_1', {
children: {
controlBar: {
children: {
ProgressControl: false
}
}
}
});
Thanks!
Massimo

Just need to fix typo it works, use lowserCase at first character instead:
progressControl instead of ProgressControl
var video = videojs('my_video_1', {
children: {
controlBar: {
children: {
progressControl: false
}
}
}
});
Working example:
http://jsbin.com/damahev/2/edit?html,js,output

I was instructed to use the CSS side to show/hide any undesirable values.
So, I've been using the top four lines in style defn below for mine:
<style>
.video-js .vjs-current-time { display: block; }
.video-js .vjs-time-divider { display: block; }
.video-js .vjs-duration { display: block; }
.video-js .vjs-remaining-time { display: none; }
#.video-js .vjs-mute-control { display: none; }
#.video-js .vjs-volume-menu-button { display: none; }
#.video-js .vjs-volume-bar { display: none; }
#.video-js .vjs-progress-control { display: none; }
</style>
The bottom-four lines (after removing leading '#' char) should work for you.
(Note that you can peruse the linked file 'video-js.css' for current defns.

This worked for me:
this.video = videojs('some-id', {
bigPlayButton: true,
controlBar: {
fullscreenToggle: false,
pictureInPictureToggle: false,
remainingTimeDisplay: false,
volumePanel: false,
currentTimeDisplay: true,
timeDivider: true,
durationDisplay: true
}
})
To make currentTimeDisplay, timeDivider and durationDisplay to work you also need to add this CSS:
.vjs-current-time {
display: inline-block !important;
}
.vjs-time-divider {
display: inline-block !important;
}
.vjs-duration {
display: inline-block !important;
}

Background color does not change after assigning color code in getRowClass at viewConfig property

Here, is JavaScript in which I am setting background color on those field which contain different data in BusinessObject column and CustomTable column.
projectgrid= new Ext.grid.GridPanel
({
id:projectgrid,
cm : projectInfoFieldsCM,
store: inlineGridStore,
stripeRows: true,
autoScroll:true,
width:550,
height:500,
bodyCssClass : 'customInlineGridCSS',
viewConfig:
{
forceFit: false,
autoFill : false,
deferEmptyText : false,
emptyText : '<div align="center"><span style="font-size: 9pt; font-weight: normal">No record available</span></span></div>',
getRowClass: function(record, index, rowParams, store) {
if(record.get('BusinessObject')!=record.get('CustomTable')){
return 'gender-male';
}
}
}
});
Here, Is css file in which I have assign color coding.
Note : I tried both ID which are declared in css file.
.data-row-light-red
{
background-color: #ff0000 !important ;
}
.gender-male .ID {
background-color: #088da5;
}
Am I doing something wrong because I have implemented this functionality before but I am stuck in this one?

Maybe not want you exactly need but I already done something similar with renderer function in the column, maybe you going to be able to use that too?
Here is my code:
columns: [
{header: "Color", dataIndex: "COLOR", width:100,
renderer:
function(value, metaData, record, rowIndex, colIndex, store){
metaData.style = "background-color: rgb(255,255,255);";
return "";
}
},
Hope this helps

You need to separate class selectors using comma
Try this
.gender-male, .ID
{
background-color: #088da5;
}
Or
.gender-male
{
background-color: #088da5;
}
If you don't need ID class anywhere

jqgrid - how to center delete action icon

I don't know how to center delete action icon in inline editing.
My setting action column is:
{
name: 'action',
width: 40,
align: "center",
editable: false,
formatter:'actions',
search: false,
fixed: true,
resize: false,
formatoptions: { keys: true, editbutton: false }
}

You need to play around with CSS to find the fix in your case. Try overriding jqGrid's CSS rules.
In general, if you have only 'Delete' icon in your column, following CSS rules will make it center aligned.
.ui-pg-div.ui-inline-del {
float: none !important;
}
span.ui-icon.ui-icon-trash {
margin: auto;
}
Although, its not a good practice to use '!important'.
If you want to do this for a particular grid, you can prepend grid id(say, list) to CSS rule like this:
#list .ui-pg-div.ui-inline-del{}

Extjs change font size for displayfield

I've a displayfield, and i would like to increase the font size.
I've configured it as follow:
{
xtype:'displayfield',
cls:'biggertext',
fieldLabel:'label',
style:{
'font-size':'32px'
},
labelStyle:{
'font-size':'32px'
}
}
but the size of the font for the label and the value field has not changed.
I've also tried to do it via CSS:
.biggertext
{
font-size: 32px;
}
but I've no changes about the font size.
What is wrong?
Thank you all

you should use some other properties for this.
e.g labelcls.
Here is a demo
{
xtype: 'displayfield',
fieldLabel: 'Home',
name: 'home_score',
value: '10',
labelCls: 'biggertext',
fieldCls:'biggertext',
}

Try this.!important will overwrite the parent style
.biggertext
{
font-size: 32px!important;
}
Or
style:{
'font-size':'32px!important'
},
labelStyle:{
'font-size':'32px!important'
}

label:
labelStyle: "font-size:15px;font-weight:bold;width:60;padding:10px 0px 0px 10px;",
value:
style:"font-size:14px;padding:10px 0px 0 15px",

You've missed the ' on your cls biggertext in the ExtJS code. Also you do your styles like this:
style:{
'font-size: 32px;'
},
labelStyle:{
'font-size:32px;'
}
Also note that labelStyle used to work only if you are wrapping your label in a container with FormLayout.
It could also be that you need to add !important to your CSS. I once needed it, otherwise it would not be displayed correctly in the browser.