I'm trying to remove the underline that shows in a TextField in codenameone.
'''
TextField username = new TextField("", "", 20, TextArea.USERNAME);
'''
What you're seeing there is the platform look and feel. So on iOS theme this will look different. Technically this is the border so you can just override it e.g. in CSS with:
border: none;
But this is the WRONG SOLUTION!
The right solution would be:
username.setUIID("MyTextField");
Which will let you explicitly specify in the theme how the component will look and give you 100% full control over the look of the component.
Related
I am a creating a screen where a user can input any text without constraints.
I tried using NativeBase TextArea and it should work. But when pressed, the border changes color. My expected behavior is that the TextArea's borders should never display any color.
Here is a screenshot of my screen:
Here is a code snippet in creating the textArea:
<TextArea
borderColor="transparent"
h={'98%'}
textAlignVertical="top"
placeholder="| Add Notes"
/>
I tried changing borderColor to 'transparent' but it seems like it is not what I am looking for. That property only changes the borderColor when it is not active.
Maybe there is a way to remove validation of the textArea so that borderColor will not update? Or is there a more suitable property for this kind of feature?
did u try
borderWidth:0,
not sure if it can work tho
I would like to change the appearance of the autocomplete component provided by MaterialUi when it is disabled.
They propose, I imagine, borderBottom: dotted. I would like it to look like the select, also disabled, that I show in the following example.
https://codesandbox.io/s/xenodochial-shtern-7icn9?file=/src/playground.js
I don't know how is the correct way to overwrite the property proposed by MaterialUi.
Any ideas will be welcome.
Add in your main css (for overwrite a rule it must be imported after mui):
.MuiInput-underline.Mui-disabled:before {
border-bottom: 0;
}
I created a demo using react+materialUI and I'm using the Table Component with a custom theme applied.
I'm testing if the correct color (the one from my theme) is appplied, but the 'toHaveStyle' is getting the first class applied (the default from MaterialUI), not the one my theme overrides. The output:
Expected
-- color: rgb(3, 64, 187);
++ color: rgba(0, 0, 0, 0.87);
Here's the demo:
https://codesandbox.io/s/quizzical-wozniak-c62l0
Any help would be much appreciated, thanks!
It's seems that you are applying your theme colour correctly. Your class header is override the main colour from TableCell component. Do you want all table content colour with the primary one?
I have an Antd checkbox that I'm trying to make larger, alter the thickness of the box itself and change the color to black but every style I apply creates a second square that sits over the checkbox and doesn't change the checkbox itself. Does anyone have any ideas on how to do this?
Figured this out by using &&&{border: 2px solid ${({ theme }) => theme.colors.black} the triple ampersand allows you to add more specificity when working with mixed styled components like mine.
My users are complaining that the change in color for md-buttons on focus is too subtle.
What is the right way to make an adjustment to this for the default color palettes?
Append: I am looking on how to adjust the button styling when the button has focus, not looking for how to create my own theme.
Also, I am using Angular-Material 1, NOT 2
OK, for anyone else looking for this, I found the answer in angular-material.modules.closure.button and angular-material.modules.js.button
.md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]):hover {
background-color: '{{primary-600}}'; }
.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]).md-focused {
background-color: '{{primary-600}}'; }
This tells me what I needed, which is that focused buttons get primary-600.
NOW I can customized the theme palletes as recommended in the first comment