I want expand/ unexpand feature and I use Vaadin Details for it.
Div contentDiv = new Div();
Label label = new Label("Expand");
Details details = new Details(label, contentDiv);
What it gives is following output:
But, what I want is the expand icon in right side. So for this I use ThemeVariants like this:
details.addThemeVariants(DetailsVariant.REVERSE);
What it gives is the following output:
There is huge gap between the text and Icon.
This is because of the below default css applied on it.
:host([theme~="reverse"]) [part="summary"] {
justify-content: space-between;
}
So, Now I need to override this css. And what I have done is added below css code in my css file and added themeFor="summary" in import. But it did not work.
:host([theme~="reverse"]) [part="summary"] {
justify-content: normal;
}
Expected Output:
So, is there any other way to do this in Vaadin? Or how can I override the default css of ThemeVariants.
Note: I am using Vaadin 14.
One of the problem, when css did not work is wrong import.
Check if your css import specified with themeFor.
Example of css import:
#CssImport(value = "./styles/vaadin-details.css", themeFor = "vaadin-details")
In vaadin-details.css:
:host([theme~="reverse"]) [part="summary"] {
justify-content: normal;
}
Link to Vaadin documentation about css styling.
This is the commit where I got your expected result. Please, look how I import css file.
Also, as you correctly noted, this defect is reproduced when working with Div, not with Vertical Layout.
Use themeFor="vaadin-details" instead of themeFor="summary" and it should work.
Also, use justify-content: start;. There’s no normal value for that property: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
Related
I have a react numpad component in my code and I need to change its size, but I cannot modify its CSS, theme or something like that properly.
I've already realized that some style like colors or fonts may be changed in node_modules\react-numpad\build, but omething like size or align I cannot change. Somebody help me, please , after looking to the following template code.
import NumPad from 'react-numpad';
<NumPad.Number
onChange={(value) => { console.log('value', value)}}
label={'Total'}
placeholder={'my placeholder'}
value={100}
decimal={2}
/>
When we click on the component, we get the numpad open. I need this numpad to be something much bigger than the standard one.
Your Numpad is dynamically added to the document.
You can change it's CSS. If you inspect it, you will get a element with MuiPaper-root class, using this class name you can change it's CSS.
.MuiPaper-root{
width: 500px;
height: 500px;
font-size: 25px;
}
If you want to change color of number being displayed you can do this,
.MuiPaper-root .MuiButtonBase-root{
color:blue;
}
Like this you can change CSS for whatever you want.
Note: Don't change any CSS directly in node_modules folder, instead you can override the CSS in your custom CSS file.
I am currently learning Django Framework with django-autocomplete-light 3.1.3 and i can't find any way to change the css of a input field.
In there documentation it is written that we can create our own HTML template de deal with the data but can we just change a little bit the css of an input box ?
I've try to add my own classes to the element before creation with widget-tweaks but every styling attribute is being cancel by the default of django-autocomplete-light.
I really just want to set the size of the box to 100% of the parent element and I've been stuck here for 2 days...
Thanks a lot
In my css file I had to overwrite the ccs class:
.select2-container {
min-width: 15em !important;
}
I am using my own style sheet in a .jsp with the following rule (which is not working as I intended):
label {
display: block;
}
The same CSS will be used by many jsps. My Application is configured with struts.ui.theme=simple.
The following s:radio displays radio buttons and their labels vertically:
<s:radio name="allowPartial" list="#{'true':'Yes','false':'No'}"/>
*
Yes
*
No
When I remove the following CSS rule:
label {
display: block;
}
It displays as I intend it (inline):
* Yes * No
How do I fix this at the tag level without changing the CSS file since it is being used by other jsps?
Using cssClass
Add an class to the s:radio, like cssClass="example", then create a new CSS entry:
.example label {
display: inline-block;
}
This will have greater specificity, and override the label selector. You said your description that you do not want to modify the stylesheet, so I give you another option.
Using cssStyle
The uglier (and simpler) way, is using the cssStyle="display: inline-block;" in the s:radio tag directly.
PS: If this does not work, please add a comment, and show the generated HTML, as it would help in diagnosing the problem.
My code:
myTextItem = new TextItem();
myTextItem.setHint("Some text");
myTextItem.setShowHintInField(true);
myTextItem.setHintStyle("myTextItemHint");
My css:
.myTextItemHint {
color: gray;
}
My Problem:
My issue is that I can have that setShowHintInField(true) set OR my css getting applied, but not both.
I found more info about this on the link: http://forums.smartclient.com/showthread.php?t=14463 but I cannot come up with a common style / place for it, that would make the trick while the hint is inside the field.
My question:
What kind of css would I need in this case and how I tell the field to use it?
What I have tried:
With that setShowHintInField(true) line and without. Both cases: half of the solution is there. Not both halves.
FormItem has method setCellStyle() to set the style of specific cell.
Use
myTextItem.setCellStyle("myTextItemHint");
your CSS will look like this:
.myTextItemHint, .myTextItemHint input {
color: gray;
}
Override other properties also if needed
.textItem,.textItemFocused,.textItemDisabled,.textItemDisabledHint,.textItemError,.textItemHint
For more information on CSS, Please have a look at skin_styles.css that is already shipped along with standard skins in SmartGWT.
I set a div style programicaly like below:
oDiv.Style.Add("text-align", "center");
it works in IE ,But not in FireFox,
for FireFox I must write this one:
oDiv.Style.Add("text-align", "-moz-center");
How could I have both?because if I write both ,just the second one works,
please help me.
Is the first CSS overwriten in you example? (I would think that ADD did overwrite, but I have not tested that). If so I would try doing this with pure CSS.
Create a CSS class with both CSS inside and then just change the CSS class of the oDiv to that class.
.newClas{
text-align: -moz-center;
text-align: center;
}
Class class like this:
oDiv.CssClass="newClass";
You could use conditional style sheets to target only IE?
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Set the normal value in your default style sheet, then override in IE version.
thanks All.finally I could solved it with this :
.newClas{
text-align: -moz-center;
#text-align: center;
}
the # sign must be before next line in the css class