I have an application made in struts 1.2 and it will be accessed by Desktop browser as well as Android browser. The layout of the DEsktop browser is fine but having problems with the layout in Android browser. Somehow I managed to do the UI look and feel changes but stuck with the button font.
Below is the code I wrote for the button:
<html:submit property="action" value="Login" style="width: 150px;height: 80px;"></html:submit>
The button appearence is fine but the font of the button i.e. Login is very small. I tried adding the font: 100px; in the style attribute but it did not worked.
Any suggestions on how to increase the font size of the submit button text?
Please let me know about this.
Regards,
The font property value must be either a single keyword indicating a system font or contain at least font size and font family, as in font: 100% Calibri. If you wish to set the font size only, do not use the font shorthand but the specific property font-size, e.g. font-size: 30px.
font css attribute isn't what you want.. Use font-size: 100px instead.
In fact with font you can specify multiple font related attributes. Documentation
Related
For a while now I am looking for a solution to increase selected components font sizes in Eclipse IDE. This is due to the fact, that this IDE is completely unusable on high DPI monitor (unless one is a hawk).
In this answer ( Change Project Explorer tree view font size in Eclipse Oxygen ) I have found how to increase the font size of the project explorer and the outline:
.MPart Tree {
font-family: Consolas;
font-size: 14;
}
Now I am looking for a way to increase the font of context assist. This simple solution wont do:
* {
font-size: 14;
font-family: Hack;
}
It does increase all possible fonts in the editor, but it also forces this font size everywhere. For example, If I change the font of the editor (by doing ctrl - or ctrl shift +), then click away somewhere, the editor font will detrimentally go back to the set font in the css file. I believe this is somehow bugged. So the only way for me now is to increase the content assist font only. Is there a css tag for that? How to do this?
recently I was working on an app using Vuetify and had trouble to change the Vuetify default colors. So I finally ended with this:
https://github.com/vuetifyjs/vuetify/issues/299
Which as its says, I added the following code:
<style lang="stylus">
#require '../node_modules/vuetify/src/stylus/settings/_colors.styl'
$theme := {
primary: #009688
accent: #FFC107
secondary: #00796B
info: #B2DFDB
warning: $red.base
error: $red.base
success: $green.base
}
#require '../node_modules/vuetify/src/stylus/main.styl'
</style>
In App.vue
So when I tested changing colors in the app, it worked as expected, so far so good. Then I noticed that it changed the size of the icons, as pictured below:
Before
After
So, my question is:
Is there a way to solve this problem by not using CSS? If so, how? Or if there's no way, then, how should I solve it using CSS?
You can give icon size in px using size property in Vuetify icons.
<v-icon size="25">home</v-icon>
Or
you can use x-small, small, medium, large and x-large in v-icon tag
e.g.
<v-icon small>home</v-icon>
Unfortunately in the current version (0.17.6) you will need css to create a custom icon size.
If you wanted to set a custom default size of your icons across your app you will need to target it will css.
To target icons size you can use the following:
.icon {
font-size: 20px;
}
If you are using Vuetify v1.0.0-alpha.1 or later, <v-icon>
component has a size attribute which you can use to set an exact
size.
here is the sample inline css from v-icon
<v-icon style="font-size: 5px;">home</v-icon>
here is my sample pen
https://codepen.io/anon/pen/LdpgmY
I recommend just using an <i> tag and setting the icon classes yourself if you can. <v-icon> doesn't provide much advantage anyways and the v-icon class is the one that's setting a specific font-size when all you really want is font-size: inherit.
I'm not sure that the change of colors is giving you the issue with the change of icons size, but if you don't want to set the icon size each time, you can optionally pass in custom variables to overwrite the global defaults like this:
$icon-size: 20px;
You can find more information about this in the Vuetify Documentation
Is there an easy way to change font size for some none-header text with Semantic-UI, without make changes to the theme or use plain css?
I see for some elements, like button, one could use large, massive and so one. Perhaps something like this is possible for "normal text" also, but I cannot in the documentation see how, but I might be blind?
Semantic UI does not have that out of the box. You can write a CSS class that does it for you.
.large.text {
font-size: 2rem;
}
This would make <p class="large text">Hi there</p> have a size that is twice the size of the baseline text size.
You can also add your own CSS to component's .overrides file for the theme you are using and it will be available in your app.
For example, if you are using 'default' theme, you can add the following to button.overrides :
.large.text {
font-size: 12px;
}
site.variables contains the default font size of the page, it can be changed there as well if it's to be changed everywhere
It is possible to be done in Fomantic-UI from version 2.7.2.
Fomantic-UI is a fork of Semantic-UI with ongoing development.
<span class="ui large red text">example of large text</span>
docs: https://fomantic-ui.com/elements/text.html
I am using below css to change the font size of every component of primefaces
.ui-widget{
font-family:Arial,sans-serif;font-size: 90% !important;
}
But its look like something not working ,Wizard tab font size is very big,While Button very small. Can some please help me to resolve the issue.
Does anybody know what the default font family is in a table row element? I need this because I sometimes put a label in td and the label has a different font from the table column and this causes a visual problem. I want to set my label font the same as the default for the td it sits in.
There is no default font in HTML, if none of the font-families specified in CSS are available on the machine of whoever views your code, it will take the default font that person has set in his browser.
That said, you can't know what font it'll be unless you explicitly specify it in CSS. It's recommended to specify a few font-families the body tag of your pages to be certain of consistency, with the last one being one of the font-families that are always available in HTML. Your label shoud assume the font given in the CSS for the table row or any parent container, if not, give its CSS class property a value and do it that way.
I think the default font is not a stable solution for your problem, why you don't use CSS styling! something like this for both td and lable element..
td, label {
...
font-family: FONT-NAME;
...
}