I have a TextField styled by changing styleClass when its value is valid/invalid but there is a great problem. When the value becomes valid I still should change the TextField once more to make the styleClass be applied. I tried with applyCss() method just after, but it didn't work :(.
if(!valid){
field.getStyleClass().add("invalid-field");//Works excellent
} else {
field.getStyleClass().remove("invalid-field");//Doesn't work up to the time textProperty doesn't change once again
field.applyCss();
One common cause of these bugs is that you may have added the "invalid-field" style class more than once. (Remember, getStyleClass() returns a List<String>, not a Set<String>.) So you should probably take steps to make sure the style class is only added once, or take steps to remove all occurrences when you remove it.
I like to do both (where I come from, we call this a "belt and braces approach").
ObservableList<String> styleClasses = field.getStyleClass();
if(!valid)
if( ! styleClass.contains("invalid-field")){
styleClass.add("invalid-field");
}
} else {
// remove all occurrences:
styleClass.removeAll(Collections.singleton("invalid-field"));
}
Related
I have a problem with TextField that is hiding under the keyboard, I've found the answers for the similar question here, but they are not helping me in my case. I have a LazyColumn with the list of different composables in it, and when I have not enough elements in the window for scroll to be activated, focusing on TextField is not lifting up focused TextField above keyboard. Keyboard just hides it.
My code:
val listState = rememberLazyListState()
typealias ComposableType = #Composable (Int) -> Unit
val uiList = listOf<ComposableType>( {IconButton}, {Text}, {CustomTextField(listState,it)}, {CustomTextField(listState,it)})
LazyColumn() {
itemsIndexed(uiList) { index, ui ->
ui.invoke(index)
}
}
val scope = rememberCoroutineScope()
#Composable
CustomTextField(scrollState: LazyListState, position: Int) {
OutlinedTextField(
modifier = Modifier.onFocusEvent { focusState ->
if (focusState.isFocused) {
scope.launch {
scrollState.animateScrollToItem(position)
}
}
)
}
So, for example if i have 10 CustomTextFields in my uiList, scroll works when one of TextField is focused. But when there are only 2 TextFields in the uiList, focusing on either of them does not lift up them above keyboard.
Also I tried using RelocationRequester() and used Column with scroll instead of LazyColumn, none of it helped.
It's a combination of things...
You need to add this in your activity's declaration in Android.xml
android:windowSoftInputMode="adjustResize"
Use BringIntoViewRequester as modifier in your TextField as you mentioned.
.bringIntoViewRequester(yourBringIntoViewRequester)
The steps above worked for me when the component gain focus programatically (using FocusRequester). However, when the user taps on the TextField, it didn't work for me. So I implemented a workaround (which I'm not very proud of): when the TextField gain focus, I wait a bit to use the RelocationRequester. So I added this modifier to my TextField.
.onFocusEvent {
if (it.isFocused) {
coroutineScope.launch {
delay(200)
yourBringIntoViewRequester.bringIntoView()
}
}
}
These three things worked for me.
You need to add this in your activity's declaration in AndroidManifest.xml
android:windowSoftInputMode="adjustResize"
You have to set wrapContentHeight().navigationBarsWithImePadding() to the modifier of parent composable
Column(modifier = Modifier.wrapContentHeight().navigationBarsWithImePadding()){}
This solution worked for me.
Add this to your activity in manifest file
android:windowSoftInputMode="adjustResize"
And in the column for example use :
Column (horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.navigationBarsPadding().imePadding()
.verticalScroll(rememberScrollState())
.fillMaxHeight()
.padding(top = 20.dp))
works for me , happy coding ..
I'm trying to implement a TinyMCE button that will apply the style of the selection to the entire box. I'm having trouble, though, reading the style of the selection when the selection is buried in a span in a span in a paragraph. Let's consider 'color' for example. Below I have a box with some text and I've selected "here" in the paragraph and made it red.
The HTML for the paragraph is now:
The code behind my button to apply the style of the selection to the box is
var selected_color = $(ed.selection.getNode()).css('color');
console.log("color pulled is ", selected_color);
$(ed.bodyElement).css('color', selected_color);
It doesn't work because the color pulled is black, not red, so the third line just re-applies the black that's already there. (If I replace selected_color in the third line with 'blue' everything goes blue.) So the problem is pulling the color of the current selection.
Does anyone know how I can do this reliably, no matter how buried the selection is?
Thanks for any help.
I also noticed somewhat a strange behavior up and there, with selections of nested span's and div's, but honestly i'm not able to recognize if this is a bug of TinyMCE, a browser issue or a combination of both (most probably).
So, waiting for some more information from you (maybe also your plugin code) in the meanwhile i realized two proposal to achieve what you want: the first plugin behaves like the format painter in word, the second is simply applying the current detected foreground color to the whole paragraph.
As you move throug the editor with the keyboard or mouse, you will see the current detected foreground color highlighted and applied as background to the second plugin button.
Key point here are two functions to get the styles back from the cursor position:
function findStyle(el, attr) {
var styles, style, color;
try {
styles = $(el).attr('style');
if(typeof styles !== typeof undefined && styles !== false) {
styles.split(";").forEach(function(e) {
style = e.split(":");
if($.trim(style[0]) === attr) {
color = $(el).css(attr);
}
});
}
} catch (err) {}
return color;
}
function findForeColor(node) {
var $el = $(node), color;
while ($el.prop("tagName").toUpperCase() != "BODY") {
color = findStyle($el, "color");
if (color) break;
$el = $el.parent();
}
return color;
}
The try...catch block is needed to avoid some occasional errors when a selected text is restyled. If you look at the TinyMCE sorce code you will notice a plenty of timing events, this is a unavoidable and common practice when dealing with styles and css, even more with user interaction. There was a great job done by the authors of TinyMCE to make the editor cross-browser.
You can try out the first plugin in the Fiddle below. The second plugin is simpler as the first one. lastForeColor is determined in ed.on('NodeChange'), so the code in button click is very easy.
tinymce.PluginManager.add('example2', function(ed, url) {
// Add a button that opens a window
ed.addButton('example2', {
text: '',
icon: "apply-forecolor",
onclick: function() {
if(lastForeColor) {
var applyColor = lastForeColor;
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
ed.selection.collapse(false);
ed.fire('SelectionChange');
}
return false;
}
});
});
Moreover: i think there is a potential issue with your piece of code here:
$(ed.bodyElement).css('color', selected_color);
i guess the style should be applied in a different way, so in my example i'm using standard TinyMCE commands to apply the foreground color to all, as i wasn't able to exactly convert your screenshot to code. Please share your thoughts in a comment.
Fiddle with both plugins: https://jsfiddle.net/ufp0Lvow/
deblocker,
Amazing work! Thank you!
Your jsfiddle did the trick. I replaced the HTML with what was in my example and changed the selector in tinymce.init from a textarea to a div and it pulls the color out perfectly from my example. The modified jsfiddle is at https://jsfiddle.net/79r3vkyq/3/ . I'll be studying and learning from your code for a long time.
Regarding your question about
$(ed.bodyElement).css('color', selected_color);
the divs I attach tinymce to all have ids and the one the editor is currently attached to is reported in ed.bodyElement. I haven't had any trouble using this but I have no problem using your
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
Thanks again! Great job!
I've created a small text editor window that allows the user to change some basic properties of a text area included within the screen. Two of the options available to change the properties of the textArea are font color and font color fill, which are both handled by separate color pickers.
I ran into an issue when testing these buttons using the setStyle method that only one property could be saved at a time. Example, if text color was set to BLUE, and afterwards fill color was set to YELLOW, text color would not remain blue, but instead revert back to its default defined in the stylesheet (black).
To fix this problem, I have created the following method;
private void updateTheSyle()
{
this.textArea.setStyle("-fx-control-inner-background: " + toRgbString(this.colorPickerFill.getValue()) +
"; -fx-text-fill: " + toRgbString(this.colorPickerFont.getValue()) + ";");
}
The toRgbString() method is also called, this is simply passing the user input from the color picker into a string such that the setStyle method can pass the correct parameters to the stylesheet.
This solution does work, as it enables me to change both the fill and the font color without reverting back to default upon selection. However, my program includes more than just fill and font color, which will contribute to a far longer setStyle statement as these options are added.
TLDR: Is there a way to edit a single style included in a CSS stylesheet without affecting the other styles in a given class?
For your first question (longer setStyle statement), If we take into account that the style is defined by a String, and it takes a whole set of details to provide for a single Style, so why not use a List<String> :
List<String> example = new ArrayList<>();
String style = "";
//For example if you use 2 textField to get the (value) and (type):
example.add("-fx-"+textFieldType+":"+textFieldValue + "; ");
//To gather all the properties in a single string
for(String property: example){
style += example;
}
yourNode.setStyle(style);
I do not know if there is a better approach but it works, good luck !
Edit :
I think this tip answers your second question:
private void Update(String type,String newValue){
for(int i = 0; i < example.size(); i++){
if(example.get(i).contains(type)){
example.set(i, "-fx-"+type+":"+newValue + "; ");
//Here you add a (break;) to not alter the other similar styles !
}
}
//Here you use a loop to update the new elements changed
}
I hope this will help you solve your problem !
I have a bunch of QLineEdit boxes that I want to remove the borders from. Ideally I want to just do this with one line of code, rather than having to set no border for each QLineEdit box. I am trying to use QLineEdit::setFrame(false); but this returns illegal call of non-static member function. Suggestions?
You can set the style sheet for the application, or for the parent of those line edits:
window()->setStyleSheet("QLineEdit { border: none }");
or
window()->setStyleSheet("QLineEdit { qproperty-frame: false }");
The latter is equivalent to executing the following code:
for(auto ed : window()->findChildren<QLineEdit*>())
ed->setFrame(false);
The window() refers to QWidget * QWidget::window() const.
Since you want to do it application-wide, you can simply set the style sheet on the application:
qApp->setStyleSheet("QLineEdit { qproperty-frame: false }");
You can further use CSS selectors to override the frame on certain objects. You've got the power of CSS at your disposal.
Use QLineEdit::setFrame() for that. But yes, it isn't a static method. So, you have to call it on an object : myLineEdit->setFrame( false );
I'm new to vaadin. I came across with a bug that full name is not visible in twin-column component's values. I have very long names inside the left side of the twin-column. I increased the width of the component much as I can. But still some lines are there that not visible full name.
I tried to add some css, even that didn't work.
.v-select-twincol-options .v-select-twincol-break-word{word-wrap: break-word;}
I tried with this css line. Any wrong in here? Or any idea to solve this. Please help me on this..
Thank you in advance.
private TwinColSelect createTemplateSelectTwinColumn()
{
TwinColSelect twinColSelect = new TwinColSelect("Related Templates");
twinColSelect.setNullSelectionAllowed(true);
twinColSelect.setMultiSelect(true);
twinColSelect.setImmediate(true);
twinColSelect.setSizeFull();
Collection<File> templates = getTemplates();
Collections.sort((List<File>) templates, new Comparator<File>()
{
#Override
public int compare(final File f1, final File f2)
{
return f1.getName().compareTo(f2.getName());
}
});
for (File file : templates)
{
twinColSelect.addItem(file.getNodeId());
twinColSelect.setItemCaption(file.getNodeId(), file.getName());
}
return twinColSelect;
}
Method where I'm creating the twinColumn inside a FormLayout
Vaadin's TwinColSelect eventually results in two standard HTML option list controls in the DOM; see the DOM of this example: http://demo.vaadin.com/book-examples/book/#component.select.twincolselect.basic
word-wrap is, however, not possible on option list items.
Consider creating your "own" TwinColSelect from two Vaadin tables. Vaadin tables are much more flexible regarding CSS styling.