I need to disable slickgrid horizontal scrollbar. I have only one column and have forceFitColumns : true.
Is possible?
Thanks
You can do this with a little css. Try adding this to your page.
.slick-viewport {
overflow-x: hidden !important;
}
Note that the !important is important because the style gets inlined by the grid code so this overrides it...
HTH
Related
I’m trying to achieve a similar effect on a Code Mirror component that would be achieved by doing overflow: hidden on a div.
In practice this means:
No visible scroll bars
When “scroll action” takes place on the editor, the website body moves itself (i.e., impossible to scroll editor relative to the website)
How could I do that?
P.S.
A simple “overflow: hidden” didn’t work because it looks like CodeMirror creates a separate div for vertical scroll bar and horizontal scrollbar. My guess is that javascript is used to handle actual scrolling behavior. Do I need javascript to revert this?
P.S.S.
I'm using react-codemirror2, but looking for a general answer and happy to figure out how to execute it within react.
Updated Answer
CSS, where .editor is the div wrapping the textarea:
.editor .CodeMirror-scroll {
overflow: hidden !important;
}
/* hide the scrollbars */
.editor .CodeMirror-vscrollbar, .editor .CodeMirror-hscrollbar {
display: none !important;
}
JS, where editor is your codemirror instance:
// does not allow focus within codemirror editor:
editor.setOption('readOnly', 'nocursor');
Then you can set your scrollTop() position by another editor if need be.
Issues:
cannot copy from the editor.
when selecting content, moving the mouse up and down will cause scroll. ~ going to look for a fix for this.
Set scrollbarStyle: null which Completely hides the scroll
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
scrollbarStyle: null
});
I'm also using react-codemirror2, it accepts className prop and preventing scroll can be done via css easily. You should add max-height with height: auto.
<CodeMirror
...
className={isScrollable ? 'disable-scroll' : ''}
/>
// sample css
.disable-scroll .CodeMirror {
max-height: 10rem;
height: auto;
}
I am using jqgrids editgridrow function to add/edit records.How do I position the submit and cancel button on the popup to center and how do i reduce the fontsize of the labels in the popup.I couldnot find a way to do this as there are no inbuilt properties for this and I donot intend to use custom dialog box. Does anyone know a workaround?
Thanks,
Anita
If you don't use direction: "rtl" option in jqGrid then usage of CSS
.ui-jqdialog-content td.EditButton { text-align: center }
should solve the problem. See the demo which displays
I don't understand why you should reduce the fontsize of the labels. The font used per default in jqGrid is already very small on my taste. Nevertheless the CSS style like
.ui-jqdialog .ui-jqdialog-content .CaptionTD { font-size: 8px }
could be used. See the next demo which displays
I have set the attribute selectable: "multiple cell" of the kendo ui grid.
What actually happens is when I click any cell the cell background color changes to some different color.
I don't want to change the background color on click and want to keep the default color as it is when I click the cell or any where in the row. I am using default CSS and not done any changes in it.
How to do this.
Please help me on this.
You could address this issue by modifying Kendo colour template (http://demos.kendoui.com/themebuilder/web.html) or just overriding following css:
.k-grid .k-edit-cell .k-input{
background-color: pink;
}
I'm having this issue in IE7 with my drop down. Whenever I hover over my dropdown it goes up as soon as i hover over an element on top of the content. http://www.legrandconfectionary.com/gift-boxes/
I thought a position: relative on the header would solve the problem but on certain pages like the truffle flavors I have a tooltip effect that goes under the nav if done so. I'd really appreciate some help on this. Thanks!
There are several ways that you can fix this. Here's two:
Set the a tag to display: block, and then make your hover events based on the a instead of the li.
or
Specify a height other than auto or 100% for the li's
I want the node expand button (the +/- one) to highlight only when the mouse is over the button itself but not when it is over the node text. By default, the button is highlighted in both cases. Is there a simple way to achieve this?
I'm using YUI 2.7.0.
You can do that in a lot of ways, but I think it is more easy to edit CSS
.ygtvcell .ygtvtph
{
background-color:url(http://yui.yahooapis.com/2.7.0/build/treeview/assets/skins/sam/treeview-sprite.gif) no-repeat scroll 0 -6400px !important;
}