Here's the pickle. To resize checkboxes in html, it is usually recommended that you utilize js to force the browser to resize the elements.
However, in our case, we are using wkhtmltopdf (a command line converter that utilizes webkit to create the html output that is then converted into PDF,) which to my knowledge, does not execute js.
In this context we still need to shrink down some checkboxes and radio buttons (actually, 'some' is wrong - a whole heck of a lot of them!)
What is a possible method for doing this, and if there is more than one, the best practice?
I know this is pretty old thread, but I had the same problem and did not find a proper answer anywhere so I wanted to help other people with similar problem. I was dealing with size of checkboxes in generated pdf by mdpf. Only thing that worked was font-size. Try something like:
<input type='checkbox' style='font-size: 20pt;'>
Hope this helps somebody.
Have you tried to set a print stylesheet to see if it affects the output?
#media print { /* css code */ }
Have you tried using CSS to change their size? This works fine in Chrome which is a webkit based browser.
input.big{
height: 2em;
width: 2em;
}
input.small{
height: 0.5em;
width: 0.5em;
}
<input type="checkbox" id="small" class="small"/><label for="small">Small</label>
<input type="checkbox" id="big" class="big"/><label for="big">Big</label>
http://jsfiddle.net/Q8AzW/
Related
I am working on an electron app on macOS.
In the CSS file, I specified the input size to be 21px height.
CSS
input {
float: left;
margin-bottom: 10px;
height: 21px;
}
HTML
<input type="button" value="Choose a file" id="fileInput">
<br style = "clear:left">
But in the app, the button seems to be 18 px height.
I checked in dev tools. the element sizing looks like this.
Why is the input button size different from the height specified in the CSS file. Was it due to the "margin-bottom" properties I specified?
Update:
I tried to add the !important tag, did not work.
Checked CSS files, no 18px specified anywhere.
Are there any other possibilities the input button size affected/overwritten by other CSS attribute, float for example?
Update 2:
I tried the app on Windows system, the button has the right size of 21px.
The issue seems to be a macOS specified issue.
Check if it is getting overridden by any other height which is specified to 18px . and as people are suggesting use of "!important" try to avoid using it . Try with css selectors. to make it more specific to your input field.
You code perfectly sets the height in all major browsers.
Maybe a CSS framework overrides the default style. Try to add the !important tag behind the height attribute like so: height: 21px !important;. Please note, that this is not best practice explanation found here.
If you need further help, please let us know whether you use a CSS framework (maybe some JS code could also override it) and which browser you're using.
Sometimes you think you're going insane. This one of those times.
While working I had an issue that I couldn't change the font-size of a submit button. Then after going insane I boiled it down to this simple example:
https://jsfiddle.net/zf9sq2gx/
font-size: 100px;
I am sure this looks perfectly fine on your machine, but it does not on mine.
See:
I am working on a Mac here and this result is from Chrome.
- Firefox works as expected
- Other pages I made or visit online do work, however this basic example and the page I am working on right now, they exhibit this behavior.
It does not matter which number or unit of font size. Other values like padding are also ignored. WIDTH however is NOT ignored.
When changing the font-size in the chrome dev tools, the button flickers from its current font-size to a smaller one, but instantly jumps back. Even tho it should at least flicker to a big one in this case.
What if we change it to a different tag altogether? Now it works.
What if we just change the type from submit to text? It behaves as expected again.
What if we remove even the other tags like body and form and everything? Doesn't matter.
Updating meme. No change.
How could this possibly be a thing?
Not to mention that other pages may work with submit buttons. But I made this example in jsfiddle as simple as possible to go back to bare minimum, even using inline CSS (because !important did nothing).
Try to use
-webkit-appearance: none;
It will cancel default chrome styles for a button.
In addition to Petruk Dmitry's solution, you can solve this by setting -webkit-appearance: none, or by overwriting one of the vendor styles, if you don't want to add browser specific CSS. Appearantly, overwriting any of the vendor styles (see below for a list of tested styles) will remove the button styling completely. I've never had this problem before since I normally change the background and border when styling a button.
Examples:
<input type="submit" style="font-size: 60px;"><br />
<input type="submit" style="font-size: 60px; -webkit-appearance: none;" value="Webkit appearance"><br />
<input type="submit" style="font-size: 60px; background: blue;" value="background"><br />
<input type="submit" style="font-size: 60px; border: 1px solid green;" value="border">
EDIT: (some) More information on this behaviour can be found here, though it seems as if this "feature" isn't very well documented. For more reading on the subject however, you can check this page.
I'm having trouble adding padding to a submit button. I've created an ultra simple example in a JSFiddle:
http://jsfiddle.net/yxr197pa/1/
Here's the code for it:
HTML:
<input type="submit" value="Submit" />
CSS:
input {
padding: 20px;
}
I must just not be getting something really simple, and I'm kind of embarrassed I can't figure it out. It seems like no one else is having this problem, as I've searched quite extensively. I've even seen examples of people adding padding with no issues. Would really appreciate any help. Thank you!
Update
To clarify the problem for those who might be confused by what I'm asking: the code above doesn't alter the padding of the button in any way. It appears there's default padding applied to the button, but the padding I've specified simply doesn't show. Here's a picture depicting what I see when I enter the code above:
http://i.imgur.com/9RxGJUo.png
This issue has been fixed in an answer below, but the underlying cause is still a mystery to me. It appears to have something to do with my computer. I'm using a fully up to date Mac OS X. My PC, on the other hand, renders the example above completely normally. It doesn't matter what browser I use on my Mac either, it still doesn't render the padding that I'm specifying.
That's not the end of the story though, because after analyzing the source code on other websites, I found submit buttons that were rendering padding correctly on my Mac, with effectively identical code. See here:
http://htmlandcssbook.com/code-samples/chapter-14/styling-submit-buttons.html
So why is the padding being rendered sometimes and not others?
Based on the comments above, you said you're on a Mac (OS X)..
Therefore you need to set the the appearance property of the input element to none in order for the padding to work. I went ahead and added -webkit/-moz vendor prefixed properties too:
input {
padding: 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<input type="submit" value="Submit" />
This just seems to be one of those strange cross-browser inconsistencies, because this doesn't appear to be an issue on Windows.
It looks to me like you cannot add padding to an input.
I think the closest you can get is increasing the height and the width of the input.
We have an application that has a text field with a specified length - 4.
Chrome:
Firefox:
Is there a way force Firefox / IE to use fixed-width spacing? This is an issue in the case of ID numbers, where the field is actually accepting the full input, but by default not displaying the full width (potentially causing user error if they are typing the field from the screen rather than copy/pasting).
Instead try changing size attribute to 5. So in all browsers, it will fit.
<input size="5" maxlength="4" value="WWWW" id="txt">
Try this CSS sector rule
#elementId
{
letter-spacing: 5px;
}
.elementClass
{
letter-spacing: 5px;
}
Instead of using size attribute try pure CSS. E.g. this
<input type="text" value="WWWW" id="txt">
#txt{
font-family: Courier New;
font-size: 15px;
width:40px;
}
should look about the same in all browsers.
HTML
<input size="4" maxlength="4" value="WWWW" id="txt">
CSS
#txt{
font-family: Courier New;
font-size: 15px;
}
DEMO
http://jsfiddle.net/pePXB/1/
It's a "combination" of some of the things suggested by others... I played around in jsfiddle with this for a bit using Internet Explorer, Firefox, and Chrome, and this combo seems to work the best for me, and provides consistent results across browsers.
I would recommend the following code
No matter which font family you use, It will make the textbox of specified character width.
HTML Code
<input size="4" maxlength="4" value="WWWW" id="txt">
CSS Code
#txt{
width:4em;
}
This will always make the textbox equal to the width of 4 "M"s so it gives you safe room to use any 4 characters in the box.
For more clarification on using various systems to set width, follow the following link.
http://www.webmasterworld.com/forum83/5001.htm
you don't need to worry about the code, but please check with fonts that you have listed for
TEXTBOX are available in both browsers ?
I believe this is what making the difference.
Try to set the width of the input element and just retain the values for size and maxlength attributes. It will have the same length all throughout the different kinds of browsers but still have different rendering.
input {
width: 50px;
padding: 5px;
}
make some little bit of css in your input text like
HTML
<input type="text" class="blabla">
CSS
.blabla{
width: 100px;
}
Dont forget to add px after you type size on your CSS.
I'm designing a html page with strict doctype and there's a form element in my page.
What I want to do is to change background-color of inputbox when mouse touches my form. I've done this with css :hover selector on form tag, but problem is that IE only understands hover on "a" tag!
I've googled my problem and what I found is to:
using an htc file;
using javascript to create a hover class on elements;
creating a big "a" tag and put all elements inside it;
but I don't want to do any of these solutions!
Isn't there any better way to fix this problem in IE?
My HTML Code:
<form id="footer-search-form" title="Search" action="#action">
<fieldset>
<input type="text" class="footer-search-input" id="q" name="Search"></input>
<input type="button" class="footer-search-button" title="Search" value="Search"></input>
</fieldset>
</form>
My CSS Code:
#footer-search-form:hover .footer-search-button { background-color: #fff; }
#footer-search-form:hover .footer-search-input { background-color: #fff; }
Update: and after hours of searching I did it by using js:
onmouseover="this.setAttribute(document.all?'className':'class','footer-search-hovered');" onmouseout="this.removeAttribute(document.all?'className':'class','footer-search-hovered');"
and
.footer-search-hovered .footer-search-input, .footer-search-hovered .footer-search-button { background-color: #fff !important; } /* For IE6 compatibility */
I hate it, but it seems that there's no better way...
You're really only going to run into trouble if your users are using IE6. The majority of web developers nowadays don't even bother providing support for such an old browser, so I wouldn't worry about it.
IE has supported :hover on any element since IE8 (or even IE7? I don't remember), which has been released for over three years. Admittedly far too many people still use IE6 (mostly because IE doesn't have an auto-updater - it really needs one), but for something as simple as this aesthetic effect you really don't need to worry about support in old relics.