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
Related
Im trying to have some backend code generate some styling for me, and it prints the css class and style just fine.
following style is printed at the top of the page.
.655c6933-5ae9-4089-a576-df528bf6c823 {
background-color:#f2f2f2;
}
and as you can see in the image below the class on the html is identical, but the style issent applied, and when I add a custom style in chrome the css selector is article.\36 55c6933-5ae9-4089-a576-df528bf6c823.
this is quid confusing and I can't figure out where this /36 space is comming from ?
here you can see and test the problem as well:
https://jsfiddle.net/569r1p7x/
See this answer in regards to classes that start with numbers.
To get around this, the following works for me;
<style>
.\36 55c6933-5ae9-4089-a576-df528bf6c823 {
background-color: #f2f2f2;
}
</style>
And...
<article class="655c6933-5ae9-4089-a576-df528bf6c823">Hello World</article>
The \36 represents the number 6 which is the first character in your CSS class. The number 6 is removed from the CSS declaration in replacement for the escaped version.
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
i have tried to write css for the “item-native” class in ion-item but it was not applied how can i write custom css for the “item-native” class
Use this:
ion-item::part(native) {
/* Custom CSS here */
}
If your style does not working that means either your other styles are overwriting your custom css or you have written your styles at wrong place.
Just try writing first at the root css, just for the testing whether it works or not.
.item-native {
// Add your custom css here, write important at the end like this
color: red !important;
}
I'm having trouble changing the font of the PasswordStrength control. I even tried creating a CSS class for it, like so:
.PassWordFont {
font-size:12px;
font-family:Verdana;
}
and then putting it in the markup like this
<asp:PasswordStrength ID="PasswordStrength1" runat="server"
TargetControlID="txtPassword1" DisplayPosition="RightSide"
StrengthIndicatorType="Text"
PreferredPasswordLength="15"
PrefixText="Strength:"
HelpStatusLabelID="lblLenIndicator"
TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent"
TextCssClass="PassWordFont"
StrengthStyles="PWSSVeryPoor; PWSSWeak; PWSSAverage; PWSSStrong; PWSSExcellent"
MinimumNumericCharacters="1"
MinimumSymbolCharacters="0"
RequiresUpperAndLowerCaseCharacters="false">
</asp:PasswordStrength>
What am I doing wrong?
Instead of TextCssClass, I have previously just used CssClass.
From FireBug check the css class that you have applied is loaded and having your mentioned font-size.
Verify the CSS class for that input is correct.
Also It might be the case your CSS is overridden from some where else.
Make sure your CSS is added last or after all default CSS are loaded.
Also try font-size:12px !important;
I have a CSS in a third party css file:
.gallery li > a{
background-image:url(images/loading.gif);
}
I want to override this so that a different background image is used instead. I have achieved this by using an inline style on the a tag itself and this works but I don't like inline styles.
I don't want to change the third party css file in case we one day use an updated version of the css file and lose our changes. I added a new CSS class on the a tag itself and put my new background-image css in a new css file associated with the new css class. For some reason this does not work. Anyone have any idea how to solve this?
Thanks,
Sachin
Specifying higher priority css selector than old one should help
.gallery li > a.my-custom-class {
background-image:url(myCustomImage);
}
Creat your custom class in your new CSS file and use this one may it'll help you
.myClass {background-image:(image/path.png) !important;}