I need the default bootstrap css left intact when printing a table with a fixed header, but need to override a couple of styles relating to overflow as the table is scrollable vertically.
Basically I want targetStyles: ['*'] left in to match what is in my bootstrap css template, but need to override tbody {overflow:auto} and another custom style of .table-responsive {overflow-x:auto} . How can I keep all the bootstrap css but change these two styles for a print job?
I've tried using targetStyles: and style: with a list of these two styles. https://printjs.crabbly.com/#documentation is helpful but not intuitive (yet) for this scenario
/* my table is contained in a div with id of #howDoingTable */
printJS({
printable: 'howDoingTable',
type: 'html',
targetStyles: ['*'],
style: '#howDoingTable tbody {overflow:none;} #howDoingTable.table-responsive {overflow-x:none;}'
});
/*It's ignoring the style with the two overrides I want to implement via style:*/
Unless this isn't possible with just printJS in its current offering, I found out the workaround is to change the styles that need changing right before the call to printJS and then re-enable them right afterwards via jQuery:
//change overflow css to visible to remove scrolling in the ui
$("#howDoingTable.table-responsive").css("overflow-x","visible");
$("#howDoingTable tbody").css("overflow","visible");
printJS({
printable: 'howDoingTable',
type: 'html',
targetStyles: ['*']
});
//change the overflow css properties back to scrolling
$("#howDoingTable.table-responsive").css("overflow-x","auto");
$("#howDoingTable tbody").css("overflow","auto");
Related
I am new to working with ag-grid. I am working through some of the documentation, and ran across something I am unclear on. In the Column Filtering section, I see the examples, and I put together some code that I believe duplicates what is done in the example. The code works, and I can filter, but the filter popup I see is not the same as what I see in the examples on the page. Specifically, I see a filter that has a text entry area, and, once text has been entered, an area that shows And/Or buttons (with the buttons on top of the text) and a second text entry area. In the examples in the documentation, I see clear popups with a dropdown starting with "Contains" (and having other options) and a text entry area below. What am I doing wrongly/missing? Is this expected behavior?
My column defs look like:
var columnDefs = [
{headerName: "Title", field: "title"},
{headerName: "Alias", field: "alias"}
];
And my grid options are:
var gridOptions = {
columnDefs: columnDefs,
enableSorting: true,
enableFilter: true,
enableColResize:true,
rowSelection:'single',
rowDeselection:true,
onRowSelected: onRowSelected,
onSelectionChanged: onSelectionChanged
};
I am getting the rows from fetch, so rowData is not defined.
The images (first is the one I see in the demo, the second is what I see in my app):
The filter I see in the demo app
The filter I see in my app
From the comments:
I see your screenshots, and I don't have a clue what's happening. At a
guess, I would say you have some strange CSS that's affecting the
ag-grid filter. Try temporarily removing all CSS that isn't native to
ag-grid. If you need more help, you'll have to provide a demo that
reproduces the problem.
It seems that materialize.css was the source of the problem:
#thirtydot spot on. the "select" elements had been undisplayed in some
other css, and the inputs had been resized. The culprit here seems to be materialize.css.
You probably need some CSS like this:
.ag-root-wrapper select {
display: inline-block !important; /* might not need !important */
/* and any other needed CSS to make selects display normally */
}
I can't find a way to limit the height of the ckeditor window.
I've tried all the solutions I've found through google and none work: Tables, divs, config commands after the CKEDITOR call like this is supposed to work but doesn't:
<script type='text/javascript'>CKEDITOR.replace('cTitle1');CKEDITOR.config.height = '800px';</script>
I have the latest version of ckeditor.
I don't want to limit it globally, just specific instances because there are times I want it to be regular size, and times I need it to be less tall.
Thanks in advance.
You can pass configuration object directly to replace method:
CKEDITOR.replace( 'editor', {
height: '400px'
} );
If you want to prevent the editor from resizing, you can also set config.resize_enabled to false in the configuration object:
CKEDITOR.replace( 'editor', {
height: '400px',
resize_enabled: false
} );
Please take a look at this example.
If you only want to limit height when the editor is being resized, you can add config.resize_maxHeight to the configuration object. Check the "Editor Resizing Customization" sample and documentation for more options and examples.
Question: I would like add custom styles to the dropdown in ckeditor, e.g. to show a Button style adding an a tag with class btn. Is there a way to do so within Bolt CMS?
(source: jonathanschmid.de)
Attempt: I was hoping to be able to add styles via the general.wysiwyg.ck config key, but there doesn't seem to be a suitable option. I managed to achieve what I wanted by editing bolt-public/view/js/ckeditor/styles.js – but I guess it's not update-safe.
Does anyone know of a safe way to achieve this within Bolt CMS? If not, I'll try forking to suggest adding general.wysiwyg.ck.styles to config.
There's an official guide about styles.
CKEDITOR.stylesSet.add( 'my_styles', [
{ name: 'Button', element: 'a', attributes: { 'class': 'btn' } }
] );
and
config.stylesSet = 'my_styles';
Then if you put the selection into a link, you can apply the style.
However, if you'd like to create a link from scratch, use CKEDITOR.editor.insertHtml within a custom command and expose it as a button in the toolbar. Styles combo does not insert new elements.
Is it possible to use the stylesheet parser in full page mode? I can get either of these features to work, but not both. For example, the following settings result in an empty styles combo box.
var editor1 = CKEDITOR.replace('editor1', {
contentsCss: ['myStyles.css'],
stylesSet: [],
fullPage: true,
allowedContent: true
});
If I comment out the "styleSet: []" line, then the combo box gets populated with the default styles, and mine don't get added. On the other hand, if I comment out "fullPage: true", then my styles get added, but I'm not in full page mode.
I'm using the latest version of ckeditor (4.4.7). Thanks for any help ...
I have found a comment by zbacsi on jqgrids site under inline editing.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#how_is_the_data_organized
"zbacsi, 2010/08/02 20:23
There is an escaping bug with special characters. Try insert alert('hello') into a field. It should be displayed as common text, but its executed..."
I was able to reproduce this issue, on my own grid setup, using the below versions of jqGrid and jQuery.
jqGrid version - > 4.4.4, jQuery version - > 1.7.1.
This can also be reproduced on the inline editing demo pages for jqGrid, located at:
http://www.trirand.com/blog/jqgrid/jqgrid.html
Once there navigate to:
Functionality -> Formatter Actions and begin editing a row.
Inside of the column labeled 'Notes' insert the value: <script>alert('hi')</script>
Hit enter or click the 'Save' icon.
The alert('hi') gets executed rather than 'Notes' containing <script>alert('hi')</script>
Any additional information would be much appreciated, thank you.
It's not a bug. You can fix the problem by usage option
autoencode: true
which I personally strictly recommend you to use the option in all grids.
jqGrid have many options. I personally find default values of some options (see values in "Default" column on the page documentation) not optimal. One from such options is autoencode which default value is false. It means that all data used to fill the grid cells will be interpreted as HTML code fragments. Scripts are the only problem which one have, but inserting the text like a>b, </tr> or <-- could really break the page.
jqGrid allow to overwrite the default by extending $.jgrid.defaults. So I include on every HTML page JS file with my own default preferences. In the file there are lines like
$.extend($.jgrid.defaults, {
autoencode: true,
gridview: true,
height: "auto"
datatype: "json",
loadui: 'block',
...
});