I'm using keyboard shortcuts in my Vaadin application. So i want to highlight one letter in button caption. The underline might be for first or second or third letter of the caption.
I am able to underline the first letter by using the "first-letter" property of CSS. How to underline second or third letter?
NativeButton btn = new NativeButton("Edit");
btn.addStyleName("myunderline");
.mytheme .myunderline.v-nativebutton::first-letter {
text-decoration: underline;
}
Is there any solution?
Thankyou!!!
So I want to highlight one letter in button caption...
You have not specified the vaadin version you are using. But latest vaadin 7 (> 7.4) versions support HTML in Button caption.
NativeButton nb = new NativeButton("<u>E</u>dit");
nb.setCaptionAsHtml(true);
Is posible to indicate it using & symbol during shortcut listener creation.
According Vaadin docs:
https://vaadin.com/docs/-/part/framework/advanced/advanced-shortcuts.html
// A field with Alt+A bound to it, using shorthand notation
TextField address = new TextField("Address (Alt+A)");
address.addShortcutListener(
new AbstractField.FocusShortcut(address, "&Address"));
Hope it helps.
Looks like there's no simple CSS solution, based on This Answer where someone is trying to do the same, and This Answer from the Vaadin forums.
Basically, your simplest option is to wrap the letter you want to underline in its own element which applies the underline:
<button ...>Te<span class=underline>x</span>t</button>
... Or something along those lines. The first link above has an answer which references a number of other JS libraries (lettering.js, nth-everything-css) which might be able to help you out.
Related
Is there any solution to change the font color of QTableWidget's heads and items separately using Qt Designer? I want to make a complete design in Qt Designer without using code to set any styles
I wanted to add this as a comment but unfortunately my reputation is too low.
This should be possible by using a Stylesheet in the property editor. I can't test it right now but I assume it should look like these:
QTableWidget {
color: red;
}
QHeaderView {
color: blue;
}
Edit: I saw later that you asked without using code to set any styles. This is as far as I know not possible. But you can set the Style in property editor as I suggested, s.t. you can see the changes in the Qt Designer directly.
this is my first question here, hope I am doing this right :)
I am trying to change the colours of the calendar on this page:
https://realsailing3.vanbruben.de/dehler-41-shelter.
But the classes are as long as
.monthly-fluid .ext_month_day_nox, .monthly-fluid .ext_month_day_nox_r, .ext_month_day_nox.morning_occ_nox
or
ext_month_day_nox no_start nocuscol
or
.monthly-fluid .cur_month_day_nox.arrival_day
I have tried to separate them with a dot but i get the message "dont use adjoining classes"
Any idea of how I can change these colours?
Thank you very much!!
code picture
try to add !important with that property.
.monthly-fluid td.reserved_nox {
background-color: #f0c2c2 !important;
}
It shouldn't matter how long the classes are. If you've used an email client such as Outlook before, classes act the same way as tags do in Outlook. You can "categorize" each element as cur_month_day_nox or no_start or nocuscol, or any combination of them. Then when the element is styled using CSS, the file will describe how elements will appear based on their categorizations. Each description is called a "rule."
We want to look for a rule which modifies the background-color, since our objective is to change it the color of the day. While the element is selected in the Inspector, If you look on the right pane called Styles and scroll enough, you'll find the following CSS rule:
.monthly-fluid .cur_month_day_nox {
background-color: #c2dfd0;
}
This style "selects" any elements which have the class .cur_month_day_nox, which is all the green days with the exception of today (at the time of writing, that's February 1st). So, you can double click the color value and change it. You should see all the green days change instantly.
Edit: For a weird reason, the class names are different on your end, but regardless the approach is the same.
I'm trying to modify the css style of the word (button) "All" in Post Grid filter of Wordpress plugin Visual Composer...I'm able to do it for all the words of filtered categories but not for the specified one "All"...Firebug show me that style: <span data-vc-grid-filter-value="*">All</span> where I suppose the symbol * define all the words of categories...Anyone knows how can I modify that style?
Without example code it is always hard to answer.
Maybe this helps:
span[data-vc-grid-filter-value]:first-child {
font-weight: 700; /* just an example adjustment */
}
I assumed that "All" is the first element in a series of elements. If this selector does not work, try to go more specific (e.g. li > span[data-vc-grid-filter-value]).
If you can provide a sample of the page, where this element is located, and the corresponding CSS, then the answer may be more helpful.
I'm facing this problem when styling an editable QComboBox:
I'm unable to change the color of the grey box inside the QComboBox...
Any idea how to change it just with a stylesheet?
Thank you
What about
QComboBox:editable {
background: white;
}
? I did not test it, but the reference seems good to me.
Edit
As of using Qt version 5.6.2 the provided change works as desired. No differently colored box inside the currently edited QComboBox.
This shoud work
YourCombobox->findChild<QLineEdit*>()->setStyleSheet("QLineEdit {background: green;}");
Previous line get the reference to the QLineEdit which is part of the QComboBox widget and applies the style sheet to it, not to the combobox.
I don't know if this could also work, if you want to try it and give a feedback..
YourCombobox->setStyleSheet("QLineEdit {background: green;}");
I have an ExtJS form that uses hbox-layout containers to create sentences that contain form inputs and there is a requirement to disable the form under certain conditions. The hbox-layout containers have a series of radio, text, checkbox, and textfield components. You can see an example on jsfiddle.
This is an answered question here on SO that doesn't fully work for me because if you disable something that isn't a field (like the text component I'm using) the disable style is different - it appears to mask the component instead of just graying out the text. When nested components are disabled, the mask gradients stack. Examples of this scenario are illustrated on this jsfiddle.
Is there a way to override how text handles its styling when it becomes disabled? I think that may be the easiest solution.
You'll have to handpick each style fix, but yes that's completely possible. Just addCls to give a hook for your CSS...
For example, using the following CSS:
.my-disabled-ct text {
opacity: .3;
}
You can give a similar disabled look both to fields and text items with the following code:
var rootCt = Ext.getCmp('lotsOfItems');
rootCt.query('field').forEach(function(field) {
field.disable();
});
rootCt.query('container').forEach(function(ct) {
ct.addCls('my-disabled-ct');
});
You should probably avoid using disable on field since Ext put a mask over them then (though you could probably hide it with CSS).
You could add the class and target the CSS directly to text items however, why not? In this case, you would query for 'text' and use addCls on them, with this kind of CSS:
text.my-disabled-cls {opacity: .3;}
That goes without saying that you'll restore your components look to "not disabled" by removing the CSS class with the same query and the removeCls method.