I am new to vaadin. I have one button it should look like a link. I have created button like,
Button title = new Button(item.getSubmissionTitle());
title.setStyleName(BaseTheme.BUTTON_LINK);
I also tried using
title.setStyleName("link);
but still I am getting look and feel of button. Is there any way to change the button using css Or any alternative ways by wich the button should appear as a link.
EDIT
I just found out The button is getting css from Table. And overriding the button style.
For table, it has written
table.setDebugId("submissionsTable_id");
css for button in table is:
#submissionsTable_id .v-table-cell-wrapper .v-button-caption{white-space:normal !important;text-decoration:none;}
#submissionsTable_id .submission-content{width:350px;}
#submissionsTable_id .v-table-cell-wrapper .v-button-caption:hover
{
background:#3F1A7D;
color: #FFFFFF;
}
#submissionsTable_id .v-button-caption:hover
{
background:#3F1A7D;
color: #FFFFFF;
}
Now, How can i exclude my Link button to override the table's style or how can I add new style to button which should not inherit the style of the table.
A future reference for anyone else with this issue. According to the Book of Vaadin online:
https://vaadin.com/book/vaadin7/-/page/components.button.html#figure.component.button.basic
Some built-in themes contain a small style, which you can enable by adding Reindeer.BUTTON_SMALL, etc. The BaseTheme also has a BUTTON_LINK style, which makes the button look like a hyperlink.
If you are using the Reindeer theme the code would be:
title.setStyleName(Reindeer.BUTTON_LINK);
Apparently resetting styles for a particular element is not possible, according to this post. You have to selectively overwrite the css properties for that element in order to simulate the aspect of a link.
If it's any help, the following is some CSS I scrounged up that simulates to some degree the look and behaviour of a link:
a:link {
color: #0000FF;
background-color:#FFF;
text-decoration:underline;
}
a:visited {
color: #800080;
background-color:#FFF;
text-decoration:underline;
}
a:hover {
color: #0000FF;
background-color:#FFF;
text-decoration:none;
}
a:active {
color: #FF0000;
background-color:#FFF;
text-decoration:none;
}
Note that the default look and behavior of a vanilla link depends on the browser its viewed in.
No need to play with the Button; there is a Link component for this.
#Override
protected void init(VaadinRequest vaadinRequest) {
HorizontalLayout layout = new HorizontalLayout();
Link link = new Link("Go to stackoverflow.com",
new ExternalResource("https://stackoverflow.com/"));
layout.setMargin(true);
layout.addComponents(link);
setContent(layout);
}
Related
I'm trying to style my Tabs of the BottomNavigation but I'm not being able to do it because of a Nativescript Theme globally installed.
For example, my BottomNav Tab label is being filled with a Nativescript Theme global style, probably for titles, or labels... well, I don't know.
Here is my example... The "Home", because it's selected, should be black. But it's lime because of a globally installed Nativescript Theme.
How could I effectively set this to be black when selected?
I already tried to use CSS:
TabStrip {
background-color: $primary;
color: #FFFFFF;
}
TabStripItem {
color: white;
}
TabStripItem:active {
color: black;
}
TabStripItem Label {
font-size: 12;
}
But didn't worked.
Also, I tried to set the color to this TabStripItem Label and worked but only to be always black. I wish that it could be set dynamically.
I've found it.
I needed to just set this CSS:
TabStripItem:active Label {
color: black;
}
Having a small issue with tooltips in the editor, read the api but can't understand what it is saying and I can't seem to find examples anywhere that I can understand either.
I have set up a Classic Editor build, and all the buttons on the toolbar have tooltips with the default position below the button, I want to be able, just for this one instance of the editor, to change the tooltip position to above the buttons instead. The instance is set up like this:
ClassicEditor.create( document.querySelector( '#content' ) )
.then( editor => {
console.log( 'Editor was initialized', editor );
this.annEditorInstance = editor;
} )
.catch( err => {
console.error( err.stack );
} );
That creates an editor instance that is set up exactly as I want, except for the issue with the tooltip. How do I change this? Thanks in advance.
There are two approaches to the problem:
CSS
Tooltips elements have either .ck-tooltip_s or .ck-tooltip_n class. By default all CKEditor 5 tooltips have the former so you could override it in your styles and make it act like the later:
<style>
.ck.ck-tooltip.ck-tooltip_s {
bottom: auto;
top: calc(-1 * var(--ck-tooltip-arrow-size));
transform: translateY( -100% );
}
.ck.ck-tooltip.ck-tooltip_s .ck-tooltip__text::after {
top: auto;
bottom: calc(-1 * var(--ck-tooltip-arrow-size));
transform: translateX( -50% );
border-color: var(--ck-color-tooltip-background) transparent transparent transparent;
border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
}
</style>
JS
The UI of the editor is an MVC(VM) structure. The position of the tooltip can be controlled using the JS and the Button#tooltipPosition property ('s' or 'n').
E.g. you can access the toolbar UI elements using editor.ui.view.toolbar and change their properties:
editor.ui.view.toolbar.items.map( item => item.tooltipPosition = 'n' )
but note that not all toolbar items are buttons. Some, for instance, are dropdowns so you'd need to use item.buttonView.tooltipPosition = 'n' in that case. So unless you really want to use JS, I'd go with a simple CSS solution.
In Qt Designer, I've set a default print/preview stylesheet in the Preferences, to match the stylesheet of the application that will contain my UIs. When previewing, all of the contained widgets are styled correctly, but my top-level form isn't. Why? And what can I do?
For example, using this stylesheet:
MyFormBase
{ background: black; color: white; }
QLabel
{ background: transparent; color: yellow; }
and a UI structure like
MyForm form (subclass of MyFormBase)
QLabel label
The label has yellow text, but it's displayed on Designer's default (grey) background.
When the Designer creates a preview, it constructs a plain QWidget as the top level window. So any style applied using the class name of the top-level form doesn't match.
Examination of Designer's internals shows that it applies a property to mark the top-level window; we can select using that to style the top-level form:
[_q_custom_style_disabled="true"], /* for preview in Designer */
MyFormBase
{ background: black; color: white; }
QLabel
{ background: transparent; color: yellow; }
Note that the _q_custom_style_disabled property is not a documented feature of Designer, so it may be subject to change without warning.
If you have many selectors that depend on top widget (e.g. if you have MyFormBase > QLabel), or if you're concerned about the hack above, you might want to apply a custom property:
[role~=Page"]
{ background: black; color: white; }
[role~=Page"] > QLabel
{ background: transparent; color: yellow; }
Obviously, you then have to remember to apply the property to the topmost widget on each of your forms!
Pixate seems to be unable to style UISearchBar's UITextField. Neither the text, corner radius etc. is styled, no matter how broadly I select text-field.
Also, there is an annoying dark hairline at the top and bottom of the UISearchBar as soon as I try to style it (e.g. give it a background color) using Pixate.
Furthermore, the cancel button label suddenly has white text and I found no way to overwrite it to any other color.
So the question is: Am I missing something or does Pixate in fact not support this (yet)?
What I want it to look like:
What it looks like using Pixate.
The stylesheet:
table-view {
separator-style: single-line;
separator-color: #eeeeee;
background-color: #eeeeee;
}
table-view-cell {
background-color: white;
}
search-bar {
background-color: #eeeeee;
}
Treat it like you would a normal CSS selector.
search-bar button {
color: white;
}
I am new to jquery ui and I am trying to add a class to the selectmenu in jquery ui. I am trying this, but its not coming. Can somebody please help me in this
$('#dd1').change(function () {
var input = $(this);;
if (!input.val()) {
input.selectmenu().addClass("test");
}
else{
input.selectmenu().addClass("test1");
}
});
.test {border: 3px solid #FF0004;}
.test1 {border: 3px solid #28AF08;}
Is it the correct way to add class to select menu dynamically? Please guide me
Do you want to add a class to the original select element or to the generated elements?
You could add a class to button and menu by using:
input.selectmenu( "widget" ).addClass( "test" );
Use .filter() to add a class to button or menu only.