I am trying to override the style for antd autocomplete component. If the component is disabled I would like to change the cursor to be default on hover rather than antd red icon.
I am using styled components so I know I will have to override ant classes directly. This is currently what I have tried to no avail.
&.ant-select-disabled {
cursor: default !important;
}
Update***
I have found the class that should be changed and if I change it in inspect it gives the expected behavior but adding it in the styled components does not do anything on re-render.
.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector input {
cursor: not-allowed;
}
Related
I'm trying to figure out how to change the thick light blue border that appears while the mouse button is down when clicking on a pagination number. I have tried border-color on the a element but that doesn't do it.
ul.pagination a.page-link:active {
border-color: #f00;
}
Don't remove outlines (or their visual substitutes). They have an important purpose.
It's actually a box-shadow variable. But just restyle it. Don't remove it.
.page-link:focus {
box-shadow: var(--bs-pagination-focus-box-shadow);
}
You'll want to learn how to use your browser's document inspector to discover what CSS rule is styling an element. You can force states to find :active and :hover styles, for example.
I read the CSS styling section (https://vaadin.com/docs/v14/flow/styling/styling-components) and it mentions that global CSS doesnt affect the 'INPUT" field in the shadow DOM, So styling has to be added to shdaow DOM, But unfortunately no where does it explicitly say HOW to add the styling to the shadow DOM. Note. im using mainly Flow pure java with a bit of CSS.
I tried retrieving the elementt from component then retrieving the shadowRoot, then from root, retrieve the 'input' element to add styling to it, unfortunately that didnt work, shadowroot was null (this code executed from the onAttach() method in the view class)
private void setTextAlignCenterForTextFields(TextField textField) {
//find the internal 'Input' and set the styling to text-align=center, unfortunately
// you cant do that with global css, since the 'input' element is in shadow root
textField.getElement()
.getShadowRoot()
.get()
.getChildren()
.filter( elem -> "INPUT".equalsIgnoreCase(elem.getTag()))
.forEach(inputElem -> inputElem.getStyle().set("text-align", "center"));
}
Any ideas would be appreciated. I'm using Vaadin version 14.5.1.
There's already a theme variant to align the text
centerTextField.addThemeVariants(TextFieldVariant.LUMO_ALIGN_CENTER);
see https://vaadin.com/components/vaadin-text-field/java-examples/theme-variants
As for how to attach CSS to shadow root, basically use themeFor, see https://vaadin.com/docs/v14/flow/styling/importing-style-sheets/#component-styles
You can use CSS to target the value part:
.textfieldClass::part(value) {
text-align: center;
}
This video explains styling CSS parts: https://youtu.be/Y0uxb4ga44Y
I'm trying to override the odd/even colors and give the row a ":hover" background color, but I cannot override:
undefined .bwu-datagrid-row.odd,
.bwu-datagrid-row.odd:not([style-scope]):not(.style-scope) {
background: #fafafa;
}
Here is what I've tried on my Theme html with no results :
:host::content .bwu-datagrid-row.odd,
.bwu-datagrid-row.odd {
/* !important works, but it prevents me from doing a :hover */
background-color: lightskyblue;
background: lightskyblue;
}
Adding ":hover" to this last rule doesn't get trigger when the row is moused over. I'm hoping that this is possible, so when someone hovers on any cell in a row, the entire row changes background color.
in package:bwu_datagrid/datagrid/bwu_datagrid_default_them.* is the default theme style module. It is supposed to be used as a template for your own theme.
Create a style module with the same name (<dom-module id='bwu-datagrid-default-theme'>, copy what you want/need from the shipped default theme to your custom theme.
Then only import your custom theme instead of the one from package:bwu_datagrid/datagrid/ and only the styles from your style module will be applied.
This way you don't have to "fight" the default theme.
I have a link button with jQuery mobile.
I want to be able to set it to be constantly pressed or unpressed.
I tried this code for pressed:
$(this).css('background-color', '#e0e0e0');
and this code for unpressed:
$(this).css('background-color', '#f6f6f6');
But when hovering over the unpressed button it does not highlight anymore.
So I tried:
$(this).addClass('ui-button-active');
But the button gets a blue color and I want dark gray color.
Any suggestions?
In jQuery Mobile 1.4.2 CSS you can see that there are button styles for normal/hover/active states (for each theme), and an active style that changes the color of the button (to blue, in your case).
To simulate a "constantly pressed" button you have to add a class for each theme (a and b) based on the button :active class, and override background color:
.button-pressed-a { background-color: #e8e8e8 !important; }
.button-pressed-b { background-color: #404040 !important; }
Then, in your script, you can toggle the "pressed" state with:
$("#button").toggleClass('button-pressed-a');
Have you been to themeroller? There you can try out different styles.
Adding a Custom Theme
Another good way to customize a jQuery Mobile button is adding a custom theme.
<a data-role="button" data-theme="my-site">Button</a>
That will give you more control over the different elements and states of the button. For instance, you can target different states of the button in CSS by writing the code for the class associated with your custom theme name (they are automatically added to the button):
.ui-btn-up-my-site { /* your code here */ }
.ui-btn-hover-my-site { /* your code here */ }
.ui-btn-down-my-site { /* your code here */ }
Keep in mind that the default buttons are made out of borders, shadows, and of course the background gradient. In addition to this, there are other HTML elements inside the button that are automatically generated by the framework. Depending on what exactly you want to customize you might need to target other classes within the button (i.e. ui-icon, ui-btn-text, ui-btn-inner, etc).
Otherwise I could recommend you this site
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
I'm using the Accordion widget from jQuery UI.
Whenever I click a header to expand a section, that header (actually, the link inside the h3 element) is highlighted. In Chrome it has a blue highlight as if it were the currently selected field in a form.
I need to get rid of the blue highlight, so I hacked together the code below, and it seems to work so far.
However, I'm wondering if there's a better/cleaner way to do this in jQuery. Is this right??
$(function() {
$( "#mainnav" ).accordion().blur($('#mainnav'));
});
I didn't need jQuery to fix the problem after all (.blur() didn't seem to work).
jQuery was adding a class = "ui-state-focus" to the html, so I used CSS to indicate that this class shouldn't be outlined/highlighted, like so...
#mainnav .ui-state-focus {
outline: none;
}
For me works this for JQuery UI 1.9.2, Tabs widget:
#mainnav .ui-tabs-anchor {
outline: none;
}