I have the following code:
<html>
<head>
<style>
input {
/* line-height: 1.6em; */ /* doesn't seem to make any difference */
height: 1.6em;
}
</style>
</head>
<body>
<form action="foo" method="POST" enctype="multipart/form-data">
<label>First Name:</label> <input type="text" value=""/>
</form>
</body>
</html>
When I place the code in a file in my filesystem or in a JBoss server and I navigate to it, Firefox 57.0.3 does not rendered the text input field tall enough resulting in the descenders of all letters being clipped:
Chrome renders it just fine.
Curiously, the jsfiddle is rendered properly from both Chrome and Firefox.
What am I doing wrong and why can't I reproduce this in the jsfiddle?
I would assume that height of even 1em should be sufficient, let alone 1.6em.
This is probably due to a combination of the font, and a smaller-than-default height value. On my system, the default font size is 13.3333px and the default (computed) height is 23px. This is a ratio of ~1.725, which is slightly higher than your 1.6em.
1em height isn't enough, because there is a border and padding involved to draw the input field. See the box model below:
You're not able to reproduce it in jsfiddle due to the CSS normalisation that is active by default.
Related
I created a popup for a Chrome extension. This is the popup source code:
<form>
<label for="email">Email</label>
<input type="email" id="email">
<input type="submit">
<p>Hello, world! This is a paragraph. And this is some text.</p>
</form>
This is how it looks:
And this is how it should look:
As you see, the elements aren't in the right position.
Why does it happen?
How can it be prevented?
Why
According to the source of Chromium on 1/3/23, the default minimum width and height is 25px by 25px:
https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/views/extensions/extension_popup.h;l=60
// The min/max height of popups.
// The minimum is just a little larger than the size of the button itself.
// The maximum is an arbitrary number and should be smaller than most screens.
static constexpr gfx::Size kMinSize = {25, 25};
static constexpr gfx::Size kMaxSize = {800, 600};
Your content appears to be out of position, because it's trying to fit within that width of 25px, but overflows instead.
Prevention
Therefore, at least one of the parent elements of your content needs to be styled with a width that will fit your content.
Determine the Parent Element to Style
In your case, the parent / container element <form> could be styled.
Choose a Style Approach
There is more than one way to force the parent element's width to be a certain length, percentage, or keyword value:
In-line CSS within HTML <form> tag
<form style="min-width: max-content !important">...</form>
Internal CSS:
<style> form { min-width: max-content !important; } </style>
External CSS:
form { min-width: max-content !important; }
Mobile
For mobile web development, I would recommend to not use height as another user suggested. Even though it's within a popup, please use min-height instead. Otherwise you might have overlapping container elements, like I did until I used min-height.
This is because the body of the popup is not wide enough to fit this. To change this, you can add super simple CSS to extend the width of the popup.
body {
width: 300px;
height: 300px;
}
You can change this to whatever you would like, just as long as it fits the form.
This happens because the default width of the extension popup is very small, and prefers to stay small. It is encouraged that you change it, to fit your content.
I'm using clarity ui framework for building the website. I have added some additional padding on top of the clarity ui input field. It's seems working in all browsers except in IE11 where I'm unable to see the entered text. What changes do I have to make in order for the text to appear in the input field?
Here is the stackblitz link to get access to the code
https://stackblitz.com/edit/clarity-forms-test-ea75jb?file=src%2Fapp%2Fapp.component.css
<div class="clr-control-container">
<div class="clr-input-wrapper">
<input type="text" id="example" placeholder="Example Input" class="clr-input">
</div>
</div>
Styles
input[type] {
background-color: grey;
padding: 21px 6px; //Adding padding is the reason causing the issue
color:white;
width: 100%;
margin-top: 5px;
}
Is there any workaround for this issue?
I try to check the code using developer tools and and I find that _ngcontent-c0 causing this issue.
If you remove it from the code than you can able to see the test in the text box in IE.
I've got a form, which has a legend and a set of fields. I'm using Bootstrap 2.x to style it. For some reason, space appears above the form, but in Chrome only (it renders fine in IE10 and Firefox). I've pared it back to just the basics to demonstrate the issue I'm having:
<form>
<fieldset>
<legend>Legend</legend>
<div class="control-group">
<!-- This div results in the space appearing above the form -->
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" />
</div>
</div>
</fieldset>
</form>
If I remove the class="control-group" from the div wrapping the input field, the space magically disappears, despite seemingly having nothing to do with this issue. I've checked all the margins and padding of everything in Chrome, and there's nothing, so I don't know where this spacing is coming from. I need to use this class on these field divs, as I'm implementing a horizontal form. I'm pulling my hair out trying to work out how to fix this issue - any ideas? Here's a jsfiddle to demonstrate: http://jsfiddle.net/christhecoder/kDrVH/3/
Any help would be much appreciated!
http://jsfiddle.net/kDrVH/10/
#import url("http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css");
legend+.control-group{
margin-top:0px;
}
you get 20 margin from this: legend+.control-group
This is because bootstrap CSS rules for <legend> has margin-bottom:20px
Just add a CSS rule:
legend {
margin-bottom: 0px;
}
Also you can add this only to your legend label:
<legend style="margin-bottom: 0px;">
// Whatever you want
</legend>
JSFIDDLE DEMO
Instead of
legend+.control-group {
margin-top: 20px;
}
Use this.
It will preserve your current layout and remove space above the form.
legend+.control-group {
padding-top: 20px;
}
Please help to correctly layout two forms. I use position approach but it fails when the browser Zoom level is changed. The second button is moved slightly up or down. Here is my code:
<div id="container">
<form id="form1">
<p>Some text here</p>
<p><input name="submitName1" class="button" id="input1_id" value="Submit1" type="submit" /></p>
</form>
<form id="form2"><input id="input2_id" value="Submit2" disabled="disabled" type="submit" /></form>
</div>
#form1
{
bottom: 15px;
position: relative;
}
#form2
{
bottom: 50px;
left: 73px;
position: relative;
}
Again, all is OK when user's browser has the same zoom level as mine, but if not user get wrong arranged button for the second form.
UPDATE: See this example. Even in JSFiddle rendering environment buttons positions are changed while Zoom level is changed at Firefox.
The actual problem is with the button, which is a browser/OS dependent element. And you do not supply a certain height/width to it in pixels.
Since your problem is specifically concerning the vertical placement, you will need to specify a height to your input elements: height: 24px;.
Thus my conclusion is that the more properties (border-width, height/width etc) you specify in specific amounts, thus percentages or pixels, the more consistent your layout will be for different zoom-levels in browsers.
You can specify a default height for all your inputs in CSS by using (as matter of an example):
input
{
height: 24px;
}
Of course you should add more properties here.
When doing forms try using Monospace fonts, otherwise zooming may do some elements go crazy.
I'm trying to make radio buttons look the same in both IE and Firefox.
I have the following example:
<head>
<style media="screen" type="text/css">
html, body, div, form {
margin: 0;
padding: 0;
}
input{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<span style="font-family:Arial; color:#000000; font-size:8pt;">
<input type="radio" name="blah" value="7">MyWord<br>
</span>
</body>
In IE the radio button has an extra white space where the margin should be 0. So the text, which should be really close to the radio, is not.
I know I that if I use the DOCTYPE statement it works, but due to other problems, I can't use it.
Is there any other way to fix this problem?
Set the width of the radio button element to a sufficiently small value:
<input type="radio" name="blah" value="7" style="width: 13px">
The spacing you see is neither padding nor margin but part of the rendering of the radio button (as you can see if you press F12 in IE, then find the element under “HTML” and look at the layout description—the element).
It seems that browsers generally implement radio buttons and checkboxes as 13 × 13 pixels (in total dimensions), except IE in Quirks Mode, which uses 20 × 20, unless the dimensions are set otherwise in CSS.