I ve recently started working with slickgrids. So getting lots and lots of doubts. How can wordwrap the column headers in slickgrids
I solved this by editing 2 css tags:
In slick-default-theme.css:
.slick-header-columns {
white-space: pre !important;
height: 45px;
}
The height here is adjustable to your needs. This was good to display 3 lines.
In slick.grid.css, change the height settings on the below tag to 100%:
.slick-header-column.ui-state-default {
...
height: 100%;
...
}
Hope this helps!
fwiw, the author of slick grid answers this question here:
https://github.com/mleibman/SlickGrid/issues/61
I created a custom css class to enable/disable the functionality :
.slickgrid-word-wrap .slick-cell {
white-space: normal;
overflow: auto;
}
And then on my div container :
<div id="my-grid"
class="slickgrid-word-wrap"></div>
And you can still set the row's height on the SlickGrid configuration like this :
var options = {
editable: false,
enableCellNavigation: false,
autoExpandColumns: false,
forceFitColumns: false,
showFooterRow: false,
explicitInitialization: true,
multiColumnSort: false,
rowHeight: 50 // <--- here
};
Related
I've a code mirror version: 5.65.3 with Blazor. When I've a long line in the editor the horizontal scroll doesn't work, it rather uses the scroll of the page which mess out the whole page.
Like this:
I don't think that I changed any CSS in Codemirror.
Here is some related CSS lines:
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 750px;
color: black;
direction: ltr;
}
.CodeMirror-scroll {
overflow: scroll !important; /* Things will break if this is overridden */
/* 50px is the magic margin used to hide the element's real scrollbars */
/* See overflow: hidden in .CodeMirror */
margin-bottom: -50px; margin-right: -50px;
padding-bottom: 50px;
height: 100%;
outline: none; /* Prevent dragging from highlighting the element */
position: relative;
z-index: 0;
}
I'm calling the codemirror through this code: (the onchange is because I'm using Blazor for binding purposes )
window.editor= function (dontNetObjRef) {
editor = CodeMirror.fromTextArea(document.getElementById('myTextArea'), {
lineNumbers: true,
indentUnit: 4,
lineWrapping: true,
tabMode: "shift",
gutters: ["CodeMirror-lint-markers"]
});
//JavaScript function use the onchange event of CodeMirror to invoke the C# method and pass the value of the myTextArea .
editor.on("change", editor => {
dontNetObjRef.invokeMethodAsync("UpdateField", editor.getValue());
// console.log(editor.getValue());
});
Note: even if I used lineWrapping: true it moved to the second line and does the same issue with scroll.
Also, it works well when I set a fixed width like 1000px but I'd like to make it auto in case the screen size of the user changes.
Thanks to Jax-p for giving me some hints to fix the issue.
I've add width:70vw in .CodeMirror class and max-width:70vm in .CodeMirror-scroll
Another thing that was affecting the changes is that I was putting the textarea in inside a <div class=col-11> which was affecting the width in the CSS so I just removed that and everything is working.
While working on a project I've encountered the same issue - that is a problem with CSS.
I fixed it with that pretty simple flexbox solution:
<div class="root-wrapper"> <!-- Editor parent container -->
<div class="cm-editor ͼ1 ͼ2 ͼ4"> <!-- CodeMirror stuff (v6 in my case) -->
...
</div>
</div>
The corresponding styling:
.root-wrapper {
display: flex;
flex-direction: row;
.cm-editor {
width: 0;
flex-grow: 1;
}
}
I use DataTables and would like to reduce the columns a bit.
I use the following code for this.
$('#example').dataTable( {
"columnDefs": [
{ "width": "29px", "targets": 0 }
]
});
When I then check the number of pixels in the developer tools in Chrome, significantly more pixels appear and I still have too much space between the last letter of the column name and the arrow for sorting. See screenshot.
I just want to reduce the space between the last letter of the label and the arrow for sorting the records a bit. Example
I have not tried this solution but maybe it's working. We need to define width of table with this option.
Datatable configutation :
$('#example').dataTable( {
"autoWidth": false
} );
Css :
table {
margin: 0 auto;
width: 100%;
clear: both;
border-collapse: collapse;
table-layout: fixed; // ***********add this
word-wrap:break-word; // ***********and this
}
OR
You can try from this link: https://datatables.net/extensions/fixedcolumns/examples/initialisation/size_fixed.html
Angular2 material team recently released the MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md
I'd like to change the looking and feel about the angular2 material's dialog. For example, to change the fixed size of the popup container and make it scrollable, change the background color, so forth. What's the best way to do so? Is there a css that I can play with?
There are two ways which we can use to change size of your MatDialog component in angular material
1) From Outside Component Which Call Dialog Component
import { MatDialog, MatDialogConfig, MatDialogRef } from '#angular/material';
dialogRef: MatDialogRef <any> ;
constructor(public dialog: MatDialog) { }
openDialog() {
this.dialogRef = this.dialog.open(TestTemplateComponent, {
height: '40%',
width: '60%'
});
this.dialogRef.afterClosed().subscribe(result => {
this.dialogRef = null;
});
}
2) From Inside Dialog Component. dynamically change its size
import { MatDialog, MatDialogConfig, MatDialogRef } from '#angular/material';
constructor(public dialogRef: MatDialogRef<any>) { }
ngOnInit() {
this.dialogRef.updateSize('80%', '80%');
}
use updateSize() in any function in dialog component. it will change dialog size automatically.
for more information check this link https://material.angular.io/components/component/dialog
Content in md-dialog-content is automatically scrollable.
You can manually set the size in the call to MdDialog.open
let dialogRef = dialog.open(MyComponent, {
height: '400px',
width: '600px',
});
Further documentation / examples for scrolling and sizing:
https://material.angular.io/components/dialog/overview
Some colors should be determined by your theme. See here for theming docs:
https://material.angular.io/guide/theming
If you want to override colors and such, use Elmer's technique of just adding the appropriate css.
Note that you must have the HTML 5 <!DOCTYPE html> on your page for the size of your dialog to fit the contents correctly ( https://github.com/angular/material2/issues/2351 )
With current version of Angular Material (6.4.7) you can use a custom class:
let dialogRef = dialog.open(UserProfileComponent, {
panelClass: 'my-class'
});
Now put your class somewhere global (haven't been able to make this work elsewhere), e.g. in styles.css:
.my-class .mat-dialog-container{
height: 400px;
width: 600px;
border-radius: 10px;
background: lightcyan;
color: #039be5;
}
Done!
You can inspect the dialog element with dev tools and see what classes are applied on mdDialog.
For example, .md-dialog-container is the main classe of the MDDialog and has padding: 24px
you can create a custom CSS to overwrite whatever you want
.md-dialog-container {
background-color: #000;
width: 250px;
height: 250px
}
In my opinion this is not a good option and probably goes against Material guide but since it doesn't have all features it has in its previous version, you should do what you think is best for you.
sharing the latest on mat-dialog
two ways of achieving this...
1) either you set the width and height during the open
e.g.
let dialogRef = dialog.open(NwasNtdSelectorComponent, {
data: {
title: "NWAS NTD"
},
width: '600px',
height: '600px',
panelClass: 'epsSelectorPanel'
});
or
2) use the panelClass and style it accordingly.
1) is easiest but 2) is better and more configurable.
For the most recent version of Angular as of this post, it seems you must first create a MatDialogConfig object and pass it as a second parameter to dialog.open() because Typescript expects the second parameter to be of type MatDialogConfig.
const matDialogConfig = new MatDialogConfig();
matDialogConfig.width = "600px";
matDialogConfig.height = "480px";
this.dialog.open(MyDialogComponent, matDialogConfig);
dialog-component.css
This code works perfectly for me, other solutions don't work.
Use the ::ng-deep shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The ::ng-deep combinator works to any depth of nested components, and it applies to both the view children and content children of the component.
::ng-deep .mat-dialog-container {
height: 400px !important;
width: 400px !important;
}
I think you need to use /deep/, because your CSS may not see your modal class. For example, if you want to customize .modal-dialog
/deep/.modal-dialog {
width: 75% !important;
}
But this code will modify all your modal-windows, better solution will be
:host {
/deep/.modal-dialog {
width: 75% !important;
}
}
This worked for me:
dialogRef.updateSize("300px", "300px");
You can also let angular material solve the size itself depending on the content.
This means you don't have to cloud your TS files with sizes that depend on your UI. You can keep these in the HTML/CSS.
my-dialog.html
<div class="myContent">
<h1 mat-dialog-title fxLayoutAlign="center">Your title</h1>
<form [formGroup]="myForm" fxLayout="column">
<div mat-dialog-content>
</div mat-dialog-content>
</form>
</div>
my-dialog.scss
.myContent {
width: 300px;
height: 150px;
}
my-component.ts
const myInfo = {};
this.dialog.open(MyDialogComponent, { data: myInfo });
On smaller screen's like laptop the dialog will shrink. To auto-fix, try the following option
http://answersicouldntfindanywhereelse.blogspot.com/2018/05/angular-material-full-size-dialog-on.html
Additional Reading
https://material.angular.io/cdk/layout/overview
Thanks to the solution in answersicouldntfindanywhereelse (2nd para).
it worked for me.
Following is needed
import { Breakpoints, BreakpointObserver } from '#angular/cdk/layout'
component.ts
const dialog = matDialog.open(DialogComponent, {
data: {
panelClass: 'custom-dialog-container',
autoFocus: false,
},
});
styles.scss
// mobile portrait:
#media (orientation: portrait) and (max-width: 599px) {
// DIALOG:
// width:
.cdk-overlay-pane {
max-width: 100vw !important;
}
// padding
.custom-dialog-container .mat-dialog-container {
padding: 5px !important;
}
}
I am having problem with TinyMCE 4.x custom plugin js for editor.windowManager.open.
I used autoScroll: true, height: 500, width: 800 and few more parameters but only height and width gets effect.
I can see the scrollbar but it doesn't work and body content are visible.
editor.windowManager.open( {
autoScroll: true,
height: 500,
width: 800,
resizable : true,
I had the same problem. It's because wordpress adds the following rule in editor.min.css:
.mce-window .mce-container-body.mce-abs-layout {
overflow: visible;
}
To fix it just add a class to your window:
var win = editor.windowManager.open( {
autoScroll: true,
width: 670,
height: 500,
classes: 'myAwesomeClass-panel'
});
And target it with some css:
.mce-window.mce-container.mce-myAwesomeClass-panel .mce-container-body.mce-abs-layout {
overflow: hidden;
}
Adding a class to your panel and applying css to only that will likely prevent any interference with built in wp stuff.
I also have same problem but i solve it by using the following code change in css location:wp-includes/css/editor.min.css
.mce-window .mce-container-body.mce-abs-layout{
overflow: auto;
}
So my website can resize based on screen size, but when I implemented a Twitter widget, when I tried resizing it, the widget, despite having the attribute width:'auto' did not resize. Here is the code for the widget:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 2,
interval: 30000,
width: 'auto',
height: 100,
theme: {
shell: {
background: '#dbdbdb',
color: '#000000'
},
tweets: {
background: '#dbdbdb',
color: '#000000',
links: '#000000'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('jackstonedev').start();
</script>
And here is the CSS for the widget:
#twittercontainer
{
border:3px solid;
border-radius:20px;
background-color:lightgrey;
opacity:0.7;
max-width:500px;
margin: auto;
}
Annoyingly you can't do this with the new twitter widgets and the old API is due to be binned in march 2013 but I wrote some stuff on how to solve it using the new widgets here using jquery albeit a fairly simplistic approach:
http://tappetyclick.com/blog/2012/12/20/how-dynamically-resize-new-twitter-widget
Try resizing by using % instead of auto.
If the parent div then resizes your widget should aswel, for example if you set your widgets css to
#widget { width: 90%; }
if the parent div is 100 pixels wide, your widget will be 90 pixels wide.
I Hope this works for you.
What might also be a problem is that if the twitter widget is loaded via iFrame / or JS generated, it might assign CSS values aswel, these can override your own set values since they are set when/after the page is loaded. Try inspecting the widget itself in the HTML source and see what is happening to it.
put widget in wrapper and change width to
width: '100%',
it should work as you expect.
I was able to change the width of two widgets to 100% in my Rails application by adding the following code in my stylesheet:
#twitter-widget-0, #twitter-widget-1 {
float: none;
width: 100% !important;
}
I used this:
$('#twitter-widget-0').height($('#ID_SIMILAR HEIGHT').height());