The problem is that is I click the button of the menu I can't see the window popup because it's hiding behind "Main Content". I can see this with Firebugs inspect element tool.
I tried using the z-index style but it doesn't seem to help..
Are there any other options or creative solutions to fix this?
{kind:"FittableColumns", style:"z-index:1;", fit:true, components:[
{kind:"FittableRows", style:"z-index:1;", fit:true, components:[
{content:"Main Content",style:"z-index:1;", fit:true},
{kind: "onyx.Toolbar", style: "height:40px; padding:0px;", components: [
{kind: "onyx.MenuDecorator", onSelect: "itemSelected", components: [
{kind: "onyx.IconButton", src: "assets/menu-icon-bookmark.png"},
{kind: "onyx.Menu",style:"z-index:99999;",components: [
{components: [
{kind: "onyx.IconButton", src: "assets/menu-icon-bookmark.png"},
{content: "Bookmarks"}
]},
{content: "Favorites"},
{classes: "onyx-menu-divider"},
{content: "Recents"},
]}
]},
]}
and the code goes on but that isn't anywhere near the menu to overlap.
Tkx in advance for a solution.
solved added this, and did wonders {kind: "onyx.Menu", floating: true, components: [
Related
Is there a way to add separators to a dropdown menu in activeadmin?
For example, if I wanted a separator between the first and second items, how can I do that?
menu.add label: 'Tasks', priority: 10 do |tasks|
tasks.add label: 'Add News Item',
url: proc { new_feed_path },
if: proc { authorized? :create, Feed },
priority: 14
tasks.add label: 'Add Calendar Event',
url: proc { new_event_path },
if: proc { authorized? :create, Event },
priority: 15
end
I checked the documentation but don't seem to see anything for that.
As of writing this comment, ActiveAdmin is at version 1.2.1 and based on its code, it isn't possible to add separators/dividers in a dropdown menu. :(
I just checked on the Github repo and they have no opened issue nor pull request matching the "separator" or "divider" keywords.
Maybe the first step would be to open an issue describing what and how to implement it.
Nothing is preventing us from adding a divider manually:
menu.add label: 'Tasks', priority: 10 do |tasks|
tasks.add label: 'Add News Item',
url: proc { new_feed_path },
if: proc { authorized? :create, Feed },
priority: 14
tasks.add label: "<hr>".html_safe,
url: "javascript:void(0)",
priority: 15
tasks.add label: 'Add Calendar Event',
url: proc { new_event_path },
if: proc { authorized? :create, Event },
priority: 16
end
a url attribute is required so using javascript:void(0) is an option here as # will not render the label. This question discusses javascript:void(0)
I want to add my own custom toolbar for my ckeditor and have therefore added this to my ckconfig.jsp via a hook.
config.toolbar_Mini = [
['Bold', 'Italic', 'Underline', 'Strike'],
['BulletedList']
];
Additionally I've found out that liferay uses the config.toolbar_liferaysettings. How (code) and where (file) can I change this default behaviour?
EDIT:
This is how the html-editor for my journal-articles looks now:
and I want to limit the functionality of the toolbar to this:
I do not want to change the default config.toolbar_liferay toolbar because I might need a different toolbar later on.
Is this the correct way to achieve this (via hook?) or can I just add a new completely new ckeditor that can be used in a structure?
Below configuration settings represents configuration for journal article ck-editor screen.
From ckconfig.jsp of source code.
config.toolbar_liferayArticle = [
['Styles', 'FontSize', '-', 'TextColor', 'BGColor'],
['Bold', 'Italic', 'Underline', 'Strike'],
['Subscript', 'Superscript'],
'/',
['Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'SelectAll', 'RemoveFormat'],
['Find', 'Replace', 'SpellChecker', 'Scayt'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
'/',
['Source'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', <c:if test="<%= XugglerUtil.isEnabled() %>">'Audio', 'Video',</c:if> 'Table', '-', 'Smiley', 'SpecialChar', 'LiferayPageBreak']
];
So, if you want to have different configuration setting for CKEditor of journal-article then you have to modify config.toolbar_liferayArticle in ckconfig.jsp using liferay plugin hook.
e.g
config.toolbar_liferayArticle=[
['Bold', 'Italic', 'Underline', 'Strike'],
['BulletedList']
];
I've just installed Grunt and grunt-svgstore and am using it to compile my folder of SVG's into one application.svg where each icon has a unique id that I can reference using:
It works fine for some icons, but for others, part of their shapes turn black. In the case of the ruby logo I am linking to above, it shows like: http://cl.ly/image/0X2J0f3i0C1X/Screen%20Shot%202014-08-03%20at%2011.02.47.png
The actually SVG file can be found here: http://cl.ly/2k012T020d2S/ruby-logo.svg
If I open the ruby-logo.svg file in illustrator, it looks fine. I have rexported it, ensured all settings are correct and it still happens.
Any suggestions?
Thanks,
Neil
Solved by adding the following styles to the application.svg import at the top of my document:
width: 0;
height: 0;
visibility: hidden;
Use the "style" option instead..
eg:
svgstore: {
options: {
prefix : 'icon-', // This will prefix each ID
svg: {
viewBox : '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg',
style: 'display:none;' // This line might help you!
},
cleanup: ['fill','stroke']
},
default: {
files: {
'<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.svg': '<%= app_files.svgIcons %>'
}
}
},
We're already creating dynamic HighCharts for our webpages--these have a few javascript dependencies and a chart-generation script. We'd like to start creating PDFs of these charts using the new HighCharts/Node/PhantomJS suite HighCharts has rigged up (see press release). Our image-gen node server would run on a separate box/vm. How can we do this without having to maintain two separate codebases for the same chart? I'm not too familiar with Node yet, so I'm not sure how requesting the scripts with a web request would work. I'm guessing a lot of HighCharts users that want to start generating some of their charts as images server-side will run into a similar issue with managing two related codesets...
In essence, we already have have this:
Webserver -> JSON (data) + foo.js + bar.js + foo.html -> webpage with dynamic charts.
We'd like to build:
Web-server -> JSON (data) + separate Node Server + foo.js + bar.js -> images available via web request
Obviously some redundancy. How can we manage the dependencies?
While node is awesome, I felt that approach was needlessly complex, with having to many moving parts that could break. So I did the super simple solution of creating files dynamically. The only problem i faced was deleting the temporary file after adding it to the pdf. It would break the PDF from rendering. And setting the directory to /tmp, crashed phantomjs. The best idea i came up with currently is putting the tempory generated files, in a temp directory, then deleting everything in that directory every night, with a cronjob.
I post this out of code simplicity. It should be in a function, to maintain code re-usability.
<?php
$TmpInFileName = 'tmp/graph_'.md5($CurrentDate.rand(666,9482845713)).'.js';
$TmpGraphFileName = 'tmp/pnggraph_'.md5($CurrentDate.rand(2666,54713)).'.png';
$Data = "
{
chart: {
zoomType: 'xy',
width: 700,
height: 520
},
credits: {
enabled: false
},
colors: [
'#2f7ed8',
'#910000',
'#8bbc21',
'#1aadce',
'#492970',
'#f28f43',
'#77a1e5',
'#c42525',
'#a6c96a'
],
title: {
text: 'Sample Graph - created at ".date('m/d/Y g:i:s a')."',
style: {
fontSize: '16px',
}
},
xAxis: [{
categories: ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30']
}],
yAxis: [{
labels: {
format: '{value}',
style: {
fontSize: '14px',
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Y axis',
style: {
fontSize: '16px',
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Sec Yaxis',
style: {
fontSize: '16px',
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
fontSize: '14px',
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'first',
type: 'spline',
yAxis: 1,
data: [0, -119.9502311075212, -119.96203992145706, -119.98172620218355, -119.71898290168028, -119.97023935590325, -119.95230287195413]
},
{
name: 'second',
type: 'spline',
yAxis: 1,
data: [0, -119.24222667756482, -119.60905809195222, -119.63522965403729, -119.11011466187935, -119.63643171374981, -119.54969080301575]
},{
name: 'third',
type: 'column',
data: [10, 11, 9, 7, 5, 2, 7]
},{
name: 'fourth',
type: 'column',
data: [0, -0.7080044299563895, -0.35298182950484147, -0.34649654814626274, -0.6088682398009269, -0.33380764215343106, -0.40261206893838164]
}]
}";
try {
$myfile = fopen($TmpInFileName, "w") or die("Unable to open file!");
fwrite($myfile, $Data);
fclose($myfile);
} catch (Exception $e) {
echo 'Error: '.$e.' <br />';
}
$URL_Command = "phantomjs /highcharts/exporting-server/phantomjs/highcharts-convert.js -infile $TmpInFileName -outfile $TmpGraphFileName -width 600";
exec($URL_Command);
echo '<img src="'.$TmpGraphFileName.'" alt="Could not load img: '.$TmpGraphFileName.'">';
?>
I hope this helps. I couldn't find a good solution that didn't involve Node.JS or Java to do this. I wanted a pure PHP solution.
We decided to pass the entire highcharts config object (e.g. Highcharts.chart(configObj)) to the node server as a URL-encoded string. We had to put a few rendering functions over on the node server, but it wasn't too bad. We also stuck some of the rendering functions in the string config object. Not the most beautiful result, but it worked.
I am trying a implement a really simple layout using BorderLayout.
var summary = new Ext.Panel({
region:'west',
id:'summary',
title:'Summary layout',
header: true,
split:true,
collapseMode: 'mini',
collapsible: true,
width: 200,
minSize: 175,
maxSize: 400,
layout:'vbox',
align: 'stretch',
items: [{
html: Ext.example.shortBogusMarkup,
title:'Navigation',
autoScroll:true,
border:false,
flex: 1
},{
title:'Settings',
html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings',
flex: 1
}]
});
The layout renders well, but when I change the width using the handle, the two panels inside the vbox don't resize.
I tried any kind of configuration I thought of, but i did not work.
(layout fit, width auto, autoWidth, etc...)
What do I miss? Thanks
For me, it doesn't work.
But this code works :
layout:{
type:'vbox',
align:'stretch'
}
I finally found by myself.
I set the layout options not correctly
I had to change to
...
layout:'vbox',
layoutConfig: {
align: 'stretch'
},
items: [{
...