I have the following sidebar in my extension but I want change the look and feel. How can I do this?
var sidebar = new appAPI.sidebar({
position: 'right',
url: 'http://news.yahoo.com',
html: 'Some Html',
title: {
content: 'Yahoo News',
close: true
},
opacity: 1.0,
width: '300px',
height: '100%',
preloader: true,
sticky: true,
slide: 150,
openAction: ['click', 'dblclick'],
closeAction: 'click',
theme: 'default',
scrollbars: false,
openOnInstall: true
There are several ways to do achieve this but my preferred method is to inject the relevant CSS rules into the page using the appropriate selector. So, for example, to change the border color to red:
var inlineCss = '.crossrider-sidebar-'+appAPI.appInfo.id+'-container {' +
'border-color:red !important;' +
'}';
appAPI.dom.addInlineCSS({css:inlineCss});
[Disclosure: I am a Crossrider employee]
Related
In my FullCalendar rendering I use the dayGrid view to create a schedule. When populating this calendar view (schedule) with events, every event is the same height, regardless of the duration of the event. I would like to make the events bigger or smaller based on their duration, similar to what the FullCalendar demo shows for other calendar views. Is this possible to achieve using the dayGrid View?
My Calendar:
FullCalendar Desired Styling:
In v5 find in the CSS file .fc-h-event and add the height option. This is mine:
.fc-h-event { /* allowed to be top-level */
display: block;
height: 70px !important;
border: 2px solid #3788d8;
border: 2px solid var(--fc-event-border-color, #3788d8);
background-color: #3788d8;
background-color: var(--fc-event-bg-color, #3788d8)
}
I ended up finding a way to accomplish my goal. The CSS styling for the calendar rendering can be modified right in the html page using:
<style>
.fc-day-grid-event > .fc-content {
white-space: normal;
}
</style>
This allows the text of the event title to wrap onto multiple lines. Without modifying this styling the event text (title) just cuts off anything longer than the width of the event box.
Once this styling is in place, I can just insert newline characters ('\n') into my html in order to expand the size of the box. Because I am controlling my events from a database, it is easy to simply add newline characters into the title string corresponding to the desired size of the event.
Here is what my calendar looked like before:
And here are some sample events to recreate the image:
events: [
{
id: 'event1',
title: 'Event 1- 5h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event2',
title: 'Event 2- 2h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event3',
title: 'Event 3- 1h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
}
]
Here is what the calendar looks like using my solution:
And the simple modification to the events needed for this solution:
events: [
{
id: 'event1',
title: 'Event 1- 5h' + '\n\n\n\n\n',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event2',
title: 'Event 2- 2h' + '\n\n',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event3',
title: 'Event 3- 1h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
}
]
I'm trying to change the bg color of ag-grid in React application. I have tried row cell style but I want to change the full bg of my grid.
my code is:
{
headerName: "Module Name",
field: "ModuleName",
sortable: true,
filter: true,
resizable: true,
cellStyle: function(params) {
return { backgroundColor: "#red" };
}
},
You could use the following CSS to change the background:
.ag-root, .ag-header, .ag-cell {
background-color: #f5f5ff !important;
}
https://embed.plnkr.co/P3HrdAQUOA8rkmIO/
Another option would be to customize the theme: https://www.ag-grid.com/javascript-grid-themes-provided/#customizing-sass-variables. This would a more complex solution, but would be better if you want to override a bunch of styles.
I have a layout that I need to put side by side.
Th code is in Extjs but I'm trying to style this container when a values gets selected in the combo box. As in the gif:
https://i.stack.imgur.com/dlgKC.gif
The container is moving upwards when any selection is been made. Is there any way in CSS I can control this behavior on select and make sure it stays still and does not move on selection?
addFilter: function(token, filter, op) {
var filterItem = Ext.create({
xtype: 'container',
height: 30,
cls: 'item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [
this.typeCombo = new Ext.form.ComboBox({
emptyText: $L('Select a filter...'),
store: this.menuStore = new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: this.getFilterValues()
})
})
}]
}); // end of filteritem
}
},
CSS:
.item div.qx-multi-select-combo-wrap{
position: absolute;
left: 320px;
}
Any idea ? Thanks!
I'm trying to insert css in my google-chart table.
My code
var cssClassNames = {'headerRow': 'cssHeaderRow',
'tableRow': 'cssTableRow',
'oddTableRow': 'cssOddTableRow',
'selectedTableRow': 'cssSelectedTableRow',
'hoverTableRow': 'cssHoverTableRow',
'headerCell': 'cssHeaderCell',
'tableCell': 'cssTableCell',
'rowNumberCell': 'cssRowNumberCell'
};
var options = {page: 'enable', pageSize:20, height:'100%',
sort:'enable', showRowNumber: true, width: '100%',
showRowNumber: true,
alternatingRowStyle:true, allowHtml: true,
cssClassNames: cssClassNames}
this.$.chart_class.options = options;
But it's not working.
I have added
this.$.chart_class.set('options', options);
and
this.$.chart_class.redraw();
I need to style the pagination too.
Please provide full code and what exactly you need but if you have already chart exist and you need styling of chart then you may use element's styling :
<template>
<style>
google-chart {
height: 300px;
width: 50em;
......
}
.....
</style>
<google-chart
type="{{type}}"
options="{{options}}"
cols="{{cols}}"
rows="{{rows}}">
</google-chart>
In case if you need to specify google-chart property dynamically than specify cols and rows, besides your options are not formatted as into element description. But simply you may use and define properties dynamically:
At the property declaration, you may define this properties and options. Or in a function with the button or somehow with calling this function:
defininingChartVariables(){
var type = "pie" // See the possible types below link.
var cols = [<specify an array for cols>];
var rows = [<specify an array for rows>];
var options = {title: "Chart title goes here",
hAxis: {title: "Categories"},
vAxis: {title: "Values", minValue: 0, maxValue: 2},
legend: "none" };
this.set('type',type);
this.set('cols',cols);
this.set('rows',rows);
this.set('optiosn',options);
}
see the possible types
I want to change the background color of a button in a toolbar.
I need this button to show a summary-value.
I tried with
cls: 'button-matching-auto',
and in css-file
.x-btn-button .button-matching-auto {
background-color: #10E0E0;
}
No effect.
Then i tried with
style: {color:'red'},
It's the same: no effect
In Developer Tools of chrome i can see, that the colors were applied,
but not visible.
What's wrong?
"It's because the button has a CSS class named 'x-button' with a background-color set to '#CCC' by default..." http://www.sencha.com/forum/showthread.php?208417-Change-image-button
{
xtype: 'button',
baseCls: 'null',
cls: 'buttonRed
}
... if you only want the default look and feel of a button not the gray one ...
I've done this to change the look and feel to get the default one:
dockedItems: [{
xtype: 'toolbar',
layout: {
pack: 'center'
},
defaultButtonUI: 'default', // get default look and feel
dock: 'bottom',
items: [{
xtype: 'button',
width: 200,
text: 'Download to Excel',
},{
xtype: 'button',
width: 200,
text: 'Another action',
}]