Hidden input taking space in browser!

HTML & CSS
1

Hi,

Now I’ve finished designing a form I have a question to finalize it.

The form includes a lot of hidden inputs that are required to submit, though they are hidden they take empty space in browser where those inputs are located, how can make it totally hidden even their locations in browser.

Thanks

2

It is difficult to tell without seeing any code, but if you are using visibility: hidden then that does take up the same space as if the element was displayed. If you use display: none then the space the element would have taken up is no longer there.

3

Hi there kasperkyd,

the…

       <input type="hidden" value="somevalue">

…does not occupy any space whatsoever in the browser. :unhappy:

Check out this example…

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
body {
    background-color: #f0f0f0;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
form {
    border:1px solid #000;
    background-color: #fff;
 } 
</style>

</head>
<body> 
 <form action="#">
  <input type="hidden" value="A">
  <input type="hidden" value="B">
  <input type="hidden" value="C">
  <input type="hidden" value="D">
 </form>

</body>
</html>

coothead

3 Likes
4

This is part of the form I’m using

    <input id="RSType" name="RSType" type="hidden" value="2R">
    <input id="DelMethodROW" name="DelMethodROW" type="hidden" value="6A">

and another 15 rows, they all take space browser!! weird!

5

Are your sure it isn’t something else that adds the space?

Hard to say without seeing your code

6

Check out your example here:

http://scratchpad.io/nonchalant-carpenter-2696

1 Like
7

Hi again coothead,

I tried my code into your example and it works great, don’t know what I miss in my code :slight_smile:

Maybe it’s the style, i don’t know, I’ll keep checking, Thank you.

8

Updated:

http://scratchpad.io/nonchalant-carpenter-2696

Edit:
Can you edit the online version or does it create a new page?

1 Like
9

I did edit it and it works, not sure what’s wrong with my form, though I’m not using any CSS

10

There are other form elements that have default styles applied to them by the browser, even if your not using CSS.

It’s doubtful that your form consists of only hidden inputs, that’s why I said, “Are your sure it isn’t something else”.

1 Like
11

kasperkyd,

Per our posting guidelines:
Please post a URL to your test site OR post a “working page” that includes ALL of the relevent code (HTML and CSS) so we can demonstrate the problem on our computers and troubleshoot the code. Requiring us to guess is a waste of your time and ours.

<off topic>
I sent you two PMs during a previous thread. You acknowledged neither. Why?
</off topic>

EDIT: If you have not read our posting guidelines, please take a few minutes and familiarize youself with them:

Forum guidelines:
https://www.sitepoint.com/community/faq#civil

Forum POSTING BASICS:
Forum Posting Basics

2 Likes
12

@kasperkyd,

Thank you for replying to the PMs.

13

My mistake guys, it seems this issue from my wordpress template, when I open the code independently works fine.
Thank you all
Cheers

1 Like
14

Glad you were able to locate the problem. :slight_smile:

EDIT: Just to cover all bases, please allow me to mention that the problem that you found in the Wordpress template should be fixed by adding an override in your local stylesheet (aka. child theme) rather than changing the Wordpress master. Doing so should reduce the likelihood that a future revision of the Wordpress master template will damage your site.

2 Likes
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.