I would like to use a flowPanel to contain a list of tags. The tag contain a name and a close button.
However, when I add HTML / Label to flowPanel, it will create a new line because it's a DIV element.
If the HTML / Label is a span element, there is no new line. However, I can't create spanElement on demand.
Does anyone has any suggestion? Thanks in advance.
Check out the InlineLabel and/or InlineHTML widgets.
set the css style of the Label like this : display: inline;
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 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...
Is there a way to programatically define and start a css animation? I'd like to animate a div from one absolute position to another. Something like:
FlowPanel fp = new FlowPanel();
fp.getElement().getStyle().setPosition(Position.ABSOLUTE);
fp.getElement().getStyle().setLeft(50, Style.Unit.PX);
fp.getElement().getStyle().setTop(50, Style.Unit.PX);
...
// something like:
fp.setAnimation("top: 300px");
I saw that we could define a css animation in our css file, and changing the name of the div's style will trigger the animation. But I don't know if we can programatically modify an animation defined in css. For example:
// css file
.testAnimation {
top: 500px;
transition-property: top;
transition-duration: 1s;
}
...
// But we can't modify the "top" attribute here depending on runtime needs?:
fp.setStyleName("testAnimation"); // I may want "top" to be some other value here.
Thanks
You have several approaches
1) GWT Animation - http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwAnimation
2) Jquery Approach - via GWTQuery - https://groups.google.com/forum/?fromgroups=#!topic/google-web-toolkit/6kOSm0HBP4A
3) JSNI In GWT - How to add CSS AnimationEnd event handler to GWT widget?
You can use getElement().getStyle().setProperty( property, value ) to set any css property. But this is not the right way of doing it. Suggested way is to do via css.
This Link might help you
I have a form that i have instantiated in the controller and now i want to render in the view.
Is there any way to render the fields without the label (only the input, select.. html tags)?
$formelement = new Zend_Form_Element_Text('Name'); // _Textarea etc.
$formElement->setDecorators(array('ViewHelper'));
This decorator will render only tag , etc
I have a well populated Object which has properties like color,size,weight etc.
I need to get these object properties and place them in a TextBox.
So i want to do something like
`textBox.getLine1.setText(Object.getColor());
textBox.getLine2.setText(Object.getWeight());`
That is i need a textBox in which i can edit individual lines.
I am planning to have a widget which has a FlexTable inside the TextBox but i am not sure how to work on it.
Can someone please help me on this?
Thanks
Probably you're looking for the RichTextArea widget
You can check the documentation here: RichTextArea
And an old, but nice tutorial here: Tutorial
I did something similar: I needed to let user select one or several text rows and let each row be clickable to perform an action.
So I used a VerticalPanel with Labels.
VerticalPanel labelPanel = new VerticalPanel();
For a given index Label:
Label selectedLabel = (Label) labelPanel.getWidget(index);
DOM.setElementAttribute(selectedLabel.getElement(), "id", "label-selected");
CSS code as you wish!
If you must use a TextArea, which is a standard <input type="text"> element, you would have to find line breaks and create a Selection, and then replace it with whatever you want. You could also read the entire text, change it, and then update the entire TextArea value again.
I would recommend splitting your widget into multiple single line TextBoxes.