Trying to figure out how to add the expand / collapse arrow images on Dojo's Accordion dijit.layout.AccordionContainer just like the dijitTitlePane / dojox.widget.TitleGroup has.
Did a bit of research to find out where the TitlePane was getting the arrow images from and found it was a sprite image. I've created some extra code that uses that same sprite image to add the expand and collapse arrows to the AccordionPane. Have to add some extra CSS to the theme in order to make this work:
Add the following near line 2625 in /themes/THEME_NAME/THEME_NAME.css:
.THEME_NAME .dijitAccordionArrow {
background:url("images/spriteArrows.png") no-repeat -14px top;
width:7px;
height:8px;
margin-top:-1px;
}
.THEME_NAME .dijitAccordionTitleSelected .dijitAccordionArrow {
background:url("images/spriteArrows.png") no-repeat;
margin-top:-1px;
}
Replace THEME_NAME with whatever the name of your stock theme (i.e. claro) or the name of your custom theme.
Related
In ag-Grid, I want to show action buttons when a row is hovered like in Gmail. The action buttons have to appear at the right end of grid irrespective of scroll position.
There is one approach mentioned at https://blog.ag-grid.com/build-email-client-with-ag-grid-like-gmail/. They have used a cellRenderer on the last column and showed buttons in it when "onCellMouseOver" happens. This approach would work only if the last column (which uses cellRenderer) is always in view. If that column goes out of view, action buttons will also go out of view.
I cannot use this approach since in my case, there are many columns and all columns in my grid do not fit on the screen at the same time. So, there can be any column at the right end depending on scroll position and thus we don't know which column to add cellRenderer on.
How will we achieve this?
Here is a plunk that demonstrates my solution: https://plnkr.co/edit/X4hCimLy6aL3j4eh
It turns out that this can be achieved using just CSS. Here is how I did it:
Add a column for showing action buttons. Use cellRenderer to render buttons in it. Pin it to right.
Using CSS,
absolute position the ag-pinned-right-cols-container to right
hide right header and spacer by setting their width 0
for rows which are not being hovered, hide action buttons cell in them by setting their padding & width 0
Here is complete CSS with explanation:
/* Hide right header and spacer */
.ag-pinned-right-header,
.ag-horizontal-right-spacer {
width: 0 !important;
min-width: 0 !important;
}
/* Add absolute position so that action buttons column will appear on top of other columns.
pointer-events: none to pass on mouse events to behind columns */
.ag-pinned-right-cols-container {
position: absolute !important;
right: 0;
pointer-events: none;
}
/* Reset pointer-events so that click can happen on action buttons */
.ag-pinned-right-cols-container * {
pointer-events: initial;
}
/* Hide border of right-cols-container */
.ag-pinned-right-cols-container .ag-cell {
border: none !important;
}
/* Show action buttons only for the row that is being hovered.
For rows which are not being hovered, hide them by setting their width and padding to 0. */
.ag-pinned-right-cols-container .ag-row:not(.ag-row-hover),
.ag-pinned-right-cols-container .ag-row:not(.ag-row-hover) .ag-cell {
width: 0 !important;
padding: 0 !important;
}
Ag-grid's default row hover and row selected colour has some transparency. Since our action buttons column is placed absolutely over other columns, its background looks darker because of the way those transparent colours blend.
So, it is better to use background colours with no transparency in this method like this:
.ag-theme-alpine {
--ag-row-hover-color: hsl(207, 90%, 94%);
--ag-selected-row-background-color: hsl(207, 87%, 86%);
}
Overall,
Pros:-
It's a drop-in solution. You can just drop above CSS in your code and you will get the button on hover functionality.
This approach is framework agnostic. I have tested it on React and Angular. (For Angular, you will have to use ng-deep to workaround style encapsulation)
Cons:-
This won't work if you already have one or more columns pinned to the right
A future version of ag-grid might use different class names. So this CSS might need to be updated while upgrading ag-grid
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;
}
I need to swap panels in a list. I've tried to reorder rows in a grid but I need to put a little more informations in the item so a panel will be nicely to show.
Must be the classic drag icon (four arrows) like here http://examples1.ext.net/#/DragDrop/Panel/Swap_Dropable_Panel/
This example is very close that I want. I need only vertical swap like this one http://tof2k.com/ext/sortable/ ( this could be just what I need but seems it don't use ExtJS themes and I don't know if I can put more information inside the items - and it is a little ugly too).
Some ideas?
Perhaps using a grid with a templatecolumn and drag and drop resolve your issue.
FIDDLE: https://fiddle.sencha.com/#fiddle/1i7l
Also, you can use CSS to change row.
.customRow .x-grid-cell-inner {
margin: 5px 5px 5px 5px;
background-color: yellow;
}
Remove de comment
//cls: 'customRow'
on fiddle (line 58).
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.
In menubar, normally submenu gets displayed on the right hand side. I want to change to Left hand side. Can anyone please let me know, how can I do it ?
Popup location of Sub menu is defined by CSS elements at rendering based on position of menu items.
Looking Via Firebug On Main Menu It produced:
element.style {
clip: rect(auto, auto, auto, auto);
left: 337px; // Change this to left:35px;
overflow: visible;
position: absolute;
top: 319px;
visibility: visible;
}
// This is main CSS for popup
.gwt-MenuBarPopup{
}
So, Give it a try by using setStyleName("css goes here") from code
I again advise you to override the default styles GWT:) I used this method on my project when I had to change some standard view of GWT-elements.
I was able to implement a solution by changing the css as well. Perhaps this isn't the most elegant way, but it works. Using a little help from GwtQuery's closest() method, here is a short example.
menuBar.addAttachHandler(new AttachEvent.Handler() {
#Override
public void onAttachOrDetach(AttachEvent event) {
if(event.isAttached()){
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
#Override
public void execute() {
Element e = $(menuBar).closest(".gwt-MenuBarPopup").get(0);
e.getStyle().setLeft(parentMenuBar.getAbsoluteLeft()-menuBar.getOffsetWidth() , Unit.PX);
}
});
}
}
});
So the idea being when the child sub menu is attached, you want to change the css. I use a deferred command so that it will change the css after GWT's default MenuBar implementation sets it.
This line, "$(menuBar).closest(".gwt-MenuBarPopup").get(0);" will search up the DOM tree until it finds the element with the class .gwt-MenuBarPopup, which is the one you want to change.
My solution is somewhat of a hybrid of those posted so far here, but I think it is cleaner/simpler than any of them.
Each vertical subMenu is itself a MenuBar, added as an item to the top-level
MenuBar. For whichever subMenu you want to drop to the left instead of the right, add a style class name to it using .addStyleName("myLeftDropDownStyleName") on that MenuBar Widget.
Define the selector rule for that style like this (these are the minimum attributes that were necessary for me to get the left dropping):
.myLeftDropDownStyleName{
position: absolute;
right: 0px;
}
Absolute positions relative to the first parent element with a position other than static; for my case at least, that parent position seemed to be horizontal place where the dropdown otherwise has its left edge without this solution. I wouldn't be suprised if Relative position might work better in some other people's cases.
The Right offset of 0px tells the absolute position's right to be at that horizontal place I mentioned above. And of course the pixel size can be > 0 to push further to the left by that much, or even < 0 to pull it back to the right by that much.
This works perfectly for me, is simple & clean, and does not force all of your MenuBars to have this style (as I think would be the case if you overrode one of the GWT MenuBar styles themself).