In tinyMCE v.5 when changing table column width, as a functionality of table plugin, I have cursor: default, but on their website on example https://www.tiny.cloud/docs/demo/basic-example/# cursor is: col-resize. How can I change it to be col-resize also? :)
Could'n find on their website that that this is some customization option, it looks like default look, but in my project is showing different than on their example.
Here is the Screenshot https://prnt.sc/nlfza0
You seem to have some custom CSS in that screenshot - the toolbar should wrap, not scroll.
The cursor is set via a content stylesheet, which uses cursor: row-resize (or cursor: col-resize) when the cursor is over invisible div elements that line up with the table borders.
You can use a DOM inspector to find the elements (they're siblings of the body tag) and the element style information should tell you where the cursor is being overridden.
If that doesn't help, please create a replication example on our http://fiddle.tinymce.com website (or other fiddle/codepen type website) and we'll see if we can track it down.
Thank you #Spyder :)
I found them, you're right they are sibilings of body :)
They have classes:
"ephox-snooker-resizer-rows ephox-snooker-resizer-bar" - resize row
"ephox-snooker-resizer-cols ephox-snooker-resizer-bar" - resize column
and get additional class "ephox-snooker-resizer-bar-dragging" while in dragging mode.
I just added this properties in a "tinymce/css/mycontent.css" file:
/* TABLE RESIZE COLUMN - CURSOR TYPE */
.ephox-snooker-resizer-cols {
cursor: col-resize;
}
.ephox-snooker-resizer-rows {
cursor: ns-resize;
}
Related
I hope you're having a good day.
So I am using ag-grid in my project to transform a bunch of excel tools(files) in one unified web-application.
So far so good.
However, I couldn't find a way to make the grid cells show the whole input text with the ag-grid framework.
In Excel:
In ag-grid:
I hope I have made my point clear.
I have searched in the ag-grid documentation but with no result. This also seems to be the default input text cell rendering in all of their projects examples.
https://www.ag-grid.com/javascript-grid-cell-editing/
Any help is welcome :)
This one is similar to one I already answered: AG-Grid - How to increase row height dynamically?
Provide a CSS class for the column
{
header: 'Address',
field: 'address',
cellClass: "cell-wrap-text",
}
CSS class - keep it in your root level styles.
.cell-wrap-text {
white-space: normal !important;
}
I'm using custom cursors and it need to be differ in some components in my screen.
When I set the cursor for Accordion, it doesn't effects title headers but effects the body of each TitledPanes. I even tried to set the cursor for each TitledPane but it doesn't effect the title header. I'm using following way to change the cursor.
ImageCursor cursor_title = new ImageCursor(cursorImg_title,cursorImg_title.getWidth() / 2,cursorImg_title.getHeight() / 2);
accordionBody.setCursor(cursor_title);
Is there a way to change the cursor in title bar of a JavaFX Accordian?
More....
I have changed the padding of title bars using css as follows. Hope it doesn't have any relation to the problem.
.titled-pane > .title {
-fx-padding: 30;
}
A TitledPane is divided into two parts :
Title
Content
When you are setting the Cursor on the Accordion, it delegates it to the content of each TitledPane, but leaves the Title. This is by design.
To force your application to change the cursor on the title as well, we need to set it on each of these nodes. We can fetch all the nodes by using the lookupAll() on the accordion and passing the styleclass they use i.e. .title. Make sure you use this after the scene graph is visible.
accordion.lookupAll(".title").forEach(node -> node.setCursor(Cursor.CLOSED_HAND));
You can use your custom cursor in place of CLOSED_HAND.
I am using bootstrap in an Ruby on Rails app. I use Firefox. I find that the height of the dropdown field (select tag) is too small.However the height of the text fields are appropriate. I had too add the below code to application.css to fix it:
select {
height: 38px !important;
}
Now dropdown shows its content properly though its overall height (box) is a bit bigger that text fields. Is there a neater way to fix the issue?
I found it more appropriate to remove styling from application.scss and modify the app/assets/stylesheets/custom.css.scss instead. custom.css.scss is generated by Bootstrap. The padding for all FORM elements was set to 10px in that file. I set padding for SELECT element to 2px and left the rest intact.
I am using a Gwt DataGrid with multiple Columns. The default behavior of the columns is to wordwrap. I would like for one of the columns to not wordwrap and just cut off. Is this possible?
For example, currently this is displayed:
I am making a
sandwich
I would like it to display:
I am making a
In addition to overflow:hidden you may need white-space:nowrap and finally add a text-overflow: ellipsis so there is an indicator to the user that the incomplete text is being shown.
You can set overflow: hidden in the style of each Column.
You can use DataGrid.addColumnStyleName to set styles on individual columns, or just addStyleName to add a style to the whole widget.
In GWT, I am using CellTable.
When you mouse over the CellTable it highlights each row.
How do change the behavior of the highlighting from the mouse over? Specifically:
change the color of highlighting
disable/enable
make it highlight only the specific grid item at your cursor (instead of the entire row)
( The current hack I have is to create a bunch of 1 column wide CellTables and add them to a VerticalPanel layout... creating the illusion that there is one CellTable and it highlights each grid according to your cursor. Is this bad? Why? performance? )
You will notice the CellTable uses a ResourceBundle, which means all the css styles get obfuscated ... this makes it more difficult to override styles.
The CellTable constructor will actually allow you to override the default ResourceBundle. So first, you need to create your own resource bundle like this:
public interface CellTableResources extends Resources {
public CellTableResources INSTANCE =
GWT.create(CellTableResources.class);
/**
* The styles used in this widget.
*/
#Source("CellTable.css")
CellTable.Style cellTableStyle();
}
Then you need to create your own CSS file. I recommend copying the CellTable style directly into your project and use that as a starting point. You can find it here:
http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/cellview/client/CellTable.css
Make sure the style is injected first, and then you just feed it into the CellTable's constructor like this:
CellTableResources.INSTANCE.cellTableStyle().ensureInjected();
myCellTable = new CellTable<T>(Integer.MAX_VALUE,CellTableResources.INSTANCE);
Specifically, you'll want to tweak these styles:
cellTableKeyboardSelectedRow
cellTableKeyboardSelectedRowCell
cellTableSelectedRow
cellTableSelectedRowCell
cellTableKeyboardSelectedCell
It is important to note that the cell table differentiates between the 'selected row' and the 'keyboard selected row'. The selected row is the actual row selected (ie via SelectionModel). The keyboard selected row refers to what is highlighted when the user is pressing the up / down key, but does not mean the row is actually selected (if that makes sense).
I'll just add for number 2) on your list, you can simply do
cellList.setSkipRowHoverStyleUpdate(true)
That completely disables highlighting. There are also two more setSkip-functions on CellList related to hovering.
CellTable can be styled via CSS: How do I style a gwt 2.1 CellTables headers?
To disable highlighting just set the hover CSS property to nothing.
Possibly - try tweaking the .cellTableSelectedRow and .cellTableSelectedRowCell.
Here is the original CellTable.css: http://www.google.com/codesearch/p?hl=en#A1edwVHBClQ/user/src/com/google/gwt/user/cellview/client/CellTable.css&q=cellTableLastColumn&d=8