How do you increase the font size of a datagrid in ext-js?
I have tried changing the font-size property in both ext-all.css and in xtheme-blue.css but neither one seemed to work.
For example:
.x-grid3-row td, .x-grid3-summary-row td{
font:normal 21px/23px arial, tahoma, helvetica, sans-serif;
}
Why isn't this working?
Instead of altering the base CSS for ExtJS have you thought about altering the config of the editor/datagrid compontent itself?
bodyCssClass:'yourclass'
nb.see also
You may need to add !important to force your css to override extjs's css.
Related
I have a section of my website that I want the paragraph font size to be slightly bigger.
I have my body set at font:
body{color:#fff; font: 1em/1.6em 'Open Sans', sans-serif;}
and the paragraph in targeting I have:
.inner-container p{font-size: 1.3em/1.6em ;text-align: justify; padding-left: 20px; margin-bottom: 8px;}
but it is being overwritten by the body is there an easy way to fix this solution or do I have to take the overall font size out of the body?
Any help would be greatly appreciated :)
but it is being overwritten by the body
No, it is not.
You CSS is simply invalid - 1.3em/1.6em is not a valid font-size.
That format is only valid for the font shorthand property. You either need to use that one (careful, it must include at least size and family, and resets other properties you do not list to default values), or specify font-size and line-height separately.
I am trying to rebuild this website in Polymer: http://qprogrammers-mockup.webflow.io/. So I can extend it easily in the future. I have everything down and I am using the same font, font-weight, font-size and I checked this with a chrome extension whatfont?.
But the fonts seems different. The example website is still much sharper. I read the css, but I cannot find out why. I also added:
body {
background-color: e8e8e8;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:grayscale;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
Given your example, I cannot tell how much more CSS you have. But this may just be a case of you not invoking the webfont Open Sans and your browser is reverting to whichever sans-serif it is using. You could add the following line to the top of your CSS and see if it makes a difference:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
Finally, you are missing a '#' on your background color property:
background-color: #e8e8e8;
just a quickie...i am trying to change the colour of certain backgrounds within bootstrap.
i have removed the main background colour from the bootstrap css. So i am able to add my own. i have created a div with content and i want that background to be a different colour to the rest of the page. so assigning the background color to that div.
but its still white, even though i have removed the default background colour from the bootstrap
this is now the default body css for bootstrap
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
}
any ideas?
here is an an example of what I'm trying to say. even though i have added a id its not showing up
Think i have found the issue, but have no idea how or why they are here....most of my style sheets are in the 'other' folder??? any ideas why or how this happened?
Are you sure that main.css is being loaded? Is it listed in Chrome's Resources tab? If it is, is the latest footer definition in there? Your screenshot suggests that none of the footer properties are being applied, not just the BG colour.
Since the inspector screenshot references a copy of bootstrap.css that's on your production server I'm wondering if you're also loading this copy of your main.css file.
I'm using the bootstrap affix js plugin and it works great. The problem I'm having is when I change the body to use a custom font (Google: Lato) it throws the anchor positions completely off.
The affix links lead to bad positions on the page and the page no longer lines up with the affix sidebar when scrolling. It's always off by 100px or so.
ie.
body { font-family: 'Lato', helvetica, arial, sans-serif; color: #221e1e; font-weight: 300; line-height: 150%; }
I'm sure there's another way to compensate for the new smaller font or line-height, but I haven't found it.
If I raise the line-height on the entire body to say 300, it works ok, except that the spacing is horrible. So I tried to adjust the line height on only the titles holding the anchors.
h2 .mw-headline { line-height: 330%; }
And it almost works, except it's still off on the first link and it feels kind of hackish. I'm sure there's a proper way to handle this, I'm just not sure what that is.
You can probably fix this using Bootstrap's custom variables if you're using less or sass.
In your case it'd something like:
#baseFontFamily: 'Lato', helvetica, arial, sans-serif;
#textColor: #221e1e;
#baseLineHeight: 20px;
Find more variables here: http://twitter.github.com/bootstrap/customize.html
What is the usefulness of these 2 things in CSS reset?
What is the problem in resizing of input elements in IE and in which version?
and if legend color doesn't inherit in IE then how it can be solved adding color:#000;
/*to enable resizing for IE*/
input,
textarea,
select {
*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
color:#000;
}
The first rule actually doesn't apply on IE only, but on all webbrowsers. Normally you would like to define a global font in the body:
body {
font: 1.1em verdana, arial, sans-serif;
}
But this doesn't get applied (inherited) on the form controls in all webbrowsers. That rule would then apply (only) the font size on them as well. One way is to set the font to inherit on those elements:
input, select, textarea {
font: inherit;
}
But that doesn't work in IE6/7. Another way is to just explicitly include the elements in the rule:
body, input, select, textarea {
font: 1.1em verdana, arial, sans-serif;
}
That only the font-size is been set is probably because the YUI guys would like to keep the form controls their own browser-default font family (which is sans-serif for input and select and is monospace for textarea). The 100% is been used because IE6/7 doesn't support inherit.
As to the second rule: I am not sure what they meant here. I did a little test in IE6/7. The legend just inherits the color from its parent element. Maybe the actual problem lies somewhere else?