I Would like to move the sorting arrow from left to right side in the cell table header which is shown in below image
Any Suggestion?
It took me a while to find, but the solution is very easy. Cell table uses default header builder which has an option to render sort icon on left or right side.
DefaultHeaderOrFooterBuilder<Contact> headerBuilder = new DefaultHeaderOrFooterBuilder<>(table, false);
headerBuilder.setSortIconStartOfLine(false);
table.setHeaderBuilder(headerBuilder);
Cheers!
I think I have some raw ideas you could play with and see if they help:
Get a handle on the div containing the arrow img, to add a style classname that will be used in a CSS selector [2. below] that styles the right-alignment you want... Maybe something like this would work:
CellTable.getTableHeadElement().addClassName( "myTableHeadersClassname" );
If 1. succeeded in getting "myTableHeadersClassname" classname on the CellTable's thead element, then I think we are in good shape. I think this CSS selector will then work:
.myTableHeadersClassName div div:nth-child(1){
left: auto;
right: 0 px;
}
I'm not sure if 1. will work, so that might be the hard part. But the idea is to add a classname somewhere in the CellTable DOM hierarchy to then create the CSS selector out of. As long as you can apply that classname and make the selector, you should be just faced with fiddling with that selector's style (although I think the style inside the selector in 2. should work at that point). If 1. doesn't work, I think you could always just put a classname on the top-level CellTable itself, and then have this slightly more complex selector:
.myCellTableClassname thead div div:nth-child(1)
Whichever selector route you go, the left style should be overriding CellTable's inlined style; if what I wrote does not do that, then just add more specificity to the selector until it does.
Hope some of this helps...
Related
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'm using a layout panel with some layers. One of the layers is quite simple but I want it to have a float: right on the element. But this is actually not working because subwidgets are styled with style="postition: absolute; left: 0px; ..." which overrides the styling and so the subpanels/widgets will always be placed on the left. Any workaround for this?
After adding your element to your layout container, did you try setWidgetHorizontalPosition ?
If above method does not work and you want to use float right, maybe you can use a non-layout system with FlowPanel maybe. Otherwise you will have to fix the position and width/height of your components but you may loose responsive design.
Last trick : If you really need to change the absolute style. In your component do something like this (do this after your component has been added to the dom)
this.getElement().getParent().getStyle().set.....
You can reset whatever property you want but this might break your layout
I would like to print a GWT widget which extends Composite. This widget is composed of a grid whose cells are built with a ListDataProvider. When the user clic on a button print, the widget to print is built. Once this is done, I launch the print:
Element element = widgetToPrint.getElement();
String content = element.getInnerHTML();
print(content);
public static native boolean print(String content)
/*-{
var mywindow = window.open('', 'Printing', '');
mywindow.document.write('<html><head><title>Test</title>');
mywindow.document.write('<link rel="stylesheet" href="/public/stylesheets/ToPrintWidget.css" type="text/css" media="all"/></head><body>');
mywindow.document.write(content);
mywindow.document.write('</body></html>');
mywindow.print();
return true;
}-*/;
So, here is my problem:
The window which is opened by this method contains the core of the widget (built by the UI Binder), but some children are missing...
If I look inside the ListDataProvider and its related FlowPanel, the data are consistent, i.e. I've got several item in my list and in the flowPanel.
Consequently, it should be visible on the printing window...
I thought that maybe the problem was related to the method used to print the widget, so I also tried to add this widget into a dialogbox just before launching the print, to see if the widget was properly built... and it was.
So my widget displays well on a dialogbox, but if I try to give its innerHTML to the print method, by using getElement(), some widgets are missing... I've the feeling that the widgets which should have been built when the ListDataProvider changes are not properly set in the DOM... Somehow it works when I add the widget to a regular component, but it doesn't work when I have to give directly its innerHTML...
Do you have any idea ?
Thanks in advance.
Widgets are not just the sum of their elements, and DOM elements are not just the string that they are serialized to. Widgets are the element, and all events sunk to the dom to listen for any changes or interactions by the user. Elements then have callback functions or handlers they invoke when the user interacts with them.
By serializing the element (i.e. invoking getInnerHTML()), you are only reading out the structure of the dom, not the callbacks, and additionally not the styles set by CSS. This probably shouldn't be expected to work correctly, and as your experience is demonstrating, it doesn't.
As this is just a print window you are trying to create, event handling is probably not a concern. You just want the ability to see, but not interact with, the content that would be in that set of widgets. Styles are probably the main problem here then (though your question doesn't specify 'some children are missing' doesn't tell us what is missing, or give us any more clues as to why...) - you are adding one stylesheet in your JSNI code, but CellTable (which I assume you are using since you reference ListDataProvider) needs additional CssResource instances to appear correctly. I'm not sure how you can hijack those to draw in a new window.
Are you only using this to print content, not to let the user directly interact with the data? If so, consider another approach - use a SafeHtmlBuilder to create a giant, properly escaped string of content to draw in the new window.
String content = element.toString();
This will include all hierarchy elements in the node.
Just a reminder, all the GWT handlers will not work, and you have to sink all the events using DOM.
You might want to grab the outer HTML rather than the inner one.
GWT unfortunately has no getOuterHTML, but it's relatively easy to emulate.
If your widget is the only child within an element, then simply get the inner HTML of the parent element (w.getElement().getParentElement().getInnerHTML())
Otherwise, clone your widget's node add it to a newly created parent element, from which you'll be able to get the inner HTML:
DivElement temp = Document.get().createDivElement();
temp.appendChild(w.getElement().cloneNode(true));
return temp.getInnerHTML();
First thank you for your answers, it helped me to work out this problem.
I've almost solve the problem:
First, I do not use ListDataProvider anymore, because it wasn't clear for me when and how the view was refreshed. Instead I add my widgets by hand, which makes sense since, they are not going to move anyway.
Then, I define the style of my widgets using a common CSS stylesheet. However, in order to do it, I can't rely on CssResource, which was the way I was used to do it with GWT. I think that this comes from the JS method which gets lost by this kind of styles... Instead, I have to specify everything in a static CSS stylesheet, and to give it to the JS.
It works perfectly well, ie, I have my widgets, with thei styles, and I can print it.
But...
The color of some widgets depends on the color of the object that they represent. Consequently, I cannot write a generic CSS stylesheet... And as I said, I can't add a style using CssResource... Do you have any ideas on the way to handle that ?
To make sure I'm clear on the way I'm adding styles, here is an example:
Label l = new Label("Here is a cell in my grid to be printed");
l.addStyleName("PrintLineCell-kind_1");
With, in a public CSS stylesheet:
.PrintLineCell-kind_1{
background-color: red;
}
I hope there is a better way than to write 300 styles to cover 300 different colors...
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).
I've got a problem with the css nth-child selector.
I have a grid of 3x3 elemtens inside a container. Those elements have a class called .square.
With .square:nth-child(3n+1) I select every first element of the row and color it green.
With .square:nth-child(3n+3) I select every last element of the row and color it red.
This works fine, until there is any element(<br> for example) that is outputted before the grid. With every new <br>, the order moves up by one, as is the <br> was considered a .square.
As I understand the .nth-child, it should select every third element of the .square class. Why does it apply that to any element, and how can I achieve my inital goal?
Thanks in advance
http://www.hier-krieg-ich-alles.de/shop.php?cat=26491127728
The problem occurs on the boxes in the middle.
Sounds like you want nth-of-type.
Related selectors which you may find useful are :first-of-type, :last-of-type, :nth-last-of-type and :only-of-type.
nth-child working only with html element, nth-child css don't know class and id, if you want set nth-child for class, add some custom attribute for that class using jquery..
like
jQuery('.square:nth-child(3n+3)').attr("act","dummy");
then use css
div[act='dummy']{
border : 1px solid red;}