Positioning forms for different zoom levels - html

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.

Related

Shrunk Chrome extension popup

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.

How to get this search-results-div to show up on top of content, without interfering with nearby float elements?

I have a tricky layout that I'm trying to add type-to-search to. (The actual code uses Angular, but it looks like my problem is just the CSS.)
https://jsfiddle.net/dowxw1dz/2/
In a single TD, there are two floating bits off to the right (a descriptive label, and a button unrelated to the label). The main part of the TD is a text input, which takes up the remainder of the space. I'm trying to enhance the input by making it show a div with search results below it, overlaying the stuff below the input.
The problem I'm hitting is that the div containing the input is overflow:auto, so when the search results show up, they just add a scrollbar to the input div (with the search results visible if you scroll), rather than showing the search results on top of the other content. I could fix this by changing the overflow to something else, but then the two floating elements to the right decide to get out of the way of the input.
How can I get the search results to show over the lower content, rather than being trapped in the input div with a scrollbar? Ideally, I want the search results to be exactly as wide as the input (which is going to be variable), but my first problem is just to get the search results to show without either shoving around the floating elements or shoving the results behind a scrollbar.
HTML:
<div style="width:600px;">
<input type="button" value="Button!" style="float:right; width:100px;"/>
<span style="float:right"> Category </span>
<div class="inputRow">
<input type="text" id="input"/>
<div class="searchResults">
Results!
</div>
</div>
</div>
<div style="width:600px;">
There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.)
</div>
CSS:
.searchResults {
position:absolute;
top:100%;
background-color: white;
border: 1px solid black;
z-index: 50;
display: none;
}
.inputRow {
position:relative;
overflow:auto;
}
input {
width: 98%;
}
div {
z-index: 0;
}
JS:
$("#input").change(function() {
$(".searchResults").show();
});
It seems you need to use position fixed instead of position:absolute, and assign top:7% it will work. It's a way around. Still can't figure out why position:absolute is not working. I'm yet in the learning phase.
.searchResults {
position:fixed; /* instead of : position:absolute;*/
top:7%; /* instead of : top:100%;*/
background-color: white;
border: 1px solid black;
z-index: 50;
display: none;
}
Fiddle here : https://jsfiddle.net/nithin_krishnan/dowxw1dz/5/
The solution was simply to ignore the input element, and put the results in the content below the input, instead.
Unfortunately, that meant that setting the width had to be done in JavaScript instead of simply relying on CSS to do the right thing. I ended up using $(".searchResults").width($("input").width()) in order to make the width of the results match the width of the input. (And I removed the top: 100% from the .searchResults CSS class.)
https://jsfiddle.net/dowxw1dz/7/
<div style="width:600px;">
<input type="button" value="Button!" style="float:right; width:100px;"/>
<span style="float:right"> Category </span>
<div class="inputRow">
<input type="text" id="input"/>
</div>
</div>
<div style="width:600px; position:relative;">
<div class="searchResults">
Results!
</div>
There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.)
</div>

Square inline button based on element height

I'm trying to accomplish a dynamic button which is always square, and based on the height of the text it is with. Something like this:
Basically the icon stays the same, but the size of the box varies, based on what size of text it is next to. The icon should be centered vertically and horizontally. To get it to look like the image, I had to manually put in everything, but I want it to work whether the font-size is 20px, 70px, or anything else. Basically, I don't know the height, but it should work is the goal, and that seems to be what is different in this question from others around the site/web.
This is the HTML code:
<!-- This may be any font size, but the result should be like the image above. -->
<div id="name">
<!-- This holds the text -->
<span>Amy</span>
<!-- This holds the image, and the anchor is the box. -->
<img src="/images/edit.png" alt="Edit Name" />
</div>
I've tried following this tutorial, but I can't get it to work for some reason. Everything I've tried (which is too many things to enumerate here) either gives me the right height, but wrong width, the exact size of the image, or the image as the size of the square.
Is this possible with just CSS, or am I going to have to resort to JavaScript?
Thanks.
Something like this should do it. You may have to change the size a little depending on the font. Also, you may have to vertical-align it.
.edit {
display: inline-block;
width: 1em;
height: 1em;
}
.edit img {
display: block;
}
DEMO
HTML:
<button>
<h2 id="name">
<span>Amy<a href="#" class="edit">
<img src="/images/edit.png" alt="Edit Name" /></a></span>
</h2>
</button>
CSS:
button img {
vertical-align: middle;
}
h2 {
font-size:20pt;
}
Is this what you want?

Creating a custom html button with background Image and Text

I would like to know how I can create a custom HTML button which has a background Image and I can show a custom text over that image.
For example, I would like to show a submit button for which I have a background image for that button and the text "Submit" comes on top of that Image.
I tried this -
<input type="button" value="Submit" style="background-image: url(pages/images/ButtonBackground.png);">
However, it does not work properly. I just see the test submit and the button but the image does not show up.
I recommend that you use <button> instead of <input type='submit' /> or <input type='button' />. The reason is that you can embed HTML elements (nest elements) into the <button> element. This way, you can make a much more flexible button, which can be customized even more.
<button>
<span class='image'></span>
<span class='text'>Click Me!</span>
</button>
<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;">
you have to specify the width and height of the image so it covers your button and yes check the path of the image
this is exactly what I have in one of my css and usually what I do in this situation:
html
<input type="submit" value="" name="commit" id="message_submit" class="registerbtn"/>
css
.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;}
The simplest way is probably to use a button element with a background. Use e.g. padding properties to make the button suitably large. It is a useful precaution to set a background color for the button, for use when the background image is not shown for some reason, using a color that has sufficient contrast with the text (so it should be similar in color usage to the background image). Example:
<button type=submit style="background: #ccc url(test.jpg); padding: 0.5em 1em">Go!</button>
Caveat: In old versions of IE, there are several bugs in the implementation of button elements. The bugs bite most seriously if a form has several submit buttons.
The reason for the failure when using an input type=submit element is that they are commonly implemented by browsers using built-in routines that are rather immune to CSS.
Here's how I created buttons with actual pics on them along with text. In CSS I put:
button {
display: inline-block;
height: 200px;
padding: 2px;
margin: 2px;
vertical-align: top;
width: 400px;
}
#alldogs-close-CSS {
background-image: url( All_dogs.jpg );
/*background-size: 100px 130px;*/
height: 150px;
width: 300px;
}
The button controls my height and width and #alldogs-close-CSS is the pic I wanted to show on the button.
In my Index.html page I just put:
<button id="alldogs-close-CSS">All Dogs</button>
Now the text isn't very pretty at the moment, but I haven't played with it yet. It does work, though.

Positioning in a three pane (header/body/footer) page

Below is an exceedingly simple HTML page.
1) I would like to add a menu across the top, which means that the position of that edit box may have to change(?) or must it? Is the text box positioned relative to its enclosing div (which will follw the menu's div)?
2) I want to add more form elements, and position them precisely, with coords relative to the start of the form, just after the menu (I am generating the HTML programatically, if it helps to know that; for instance, I can add a fudge factor).
3) and after the last of those I want a submit button, which is always guaranteed to be at the bottom of the page, no matter how many input elements I add in the middle (so, perhaps wrap the form's controls in a div?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<form action="HTTP://localhost/b/submitted.php" method="post">
<div class="TEdit" id="TextEditBox1" style="position: absolute; top:56px; left: 72px; width: 121px; height: 21px;">
<input type="text" name="TextEditBox1">
</div>
<div class"submit_button" style="position:absolute; top:102px; left:132px;"><input type="submit" name="submitButton" value="Submit"></div>
</form>
</body>
</html>
For the most part, if you just put the page elements in the code in the order you wish to see them, flow of the page will lay them out as you've described.
For pixel perfect positioning, you can use absolute positioning as you have in there, but that's not that "best" way to do it.
I think the best thing for you to do would be to read up on CSS positioning over at w3schools if you want a good understanding of how to layout page elements.