I have a text box within a table that is populated by a form on my website. This text box can also be edited/deleted and I'm having issues displaying the full text onto the text box from the form the user fills out. The issue is that the text box does not expand to fit text that the user inputs. It will display the message all the way to the end of the text box and anything after that will not be displayed as the text box does not expand.
My code:
<table>
<tr>
<th>Title</th>
<th>Description</th>
<th></th>
<th></th>
<th></th>
</tr>
<form action=findGroup.php method=post>
<tr>
<td><input type=text name=name value="John Doe" /> </td>
<td><input type=text name=description value="Column width does not automatically adjust itself to fit content" /></td>
<td><input type=hidden name=hidden value="" /></td>
<td><input type=submit name=update value="update" /></td>
<td><input type=submit name=delete value="delete" /> </td>
</tr>
</form>
</table>
CSS:
table {
width: 100%;
font: 17px/1.5 Arial, Helvetica, sans-serif;
text-align: centre;
}
input {
width: 100%;
font: 17px/1.5 Arial, Helvetica, sans-serif;
text-align: centre;
}
th {
text-align: centre;
background-color: #4D5960;
color: white;
}
tr {
background-color: #f2f2f2
}
Input field has it's limitation. So you can use contenteditable div to mimic an input field and copy the content from this div to the hidden input:
<?php
if (!EMPTY($_POST)) {
var_dump($_POST);
}
?>
<!DOCTYPE html>
<html>
<style>
table {
width: 100%;
font: 17px/1.5 Arial, Helvetica, sans-serif;
text-align: centre;
}
input {
width: 100%;
font: 17px/1.5 Arial, Helvetica, sans-serif;
text-align: centre;
}
.input {
margin: 8px 0;
background-color: #fff;
border: 1px solid grey;
}
th {
text-align: centre;
background-color: #4D5960;
color: white;
}
tr {
background-color: #f2f2f2
}
td {
vertical-align: top;
}
</style>
<body>
<table>
<tr>
<th>Title</th>
<th>Description</th>
<th></th>
<th></th>
</tr>
<form action="" method="POST">
<tr>
<td>
<!-- hide your input field with type hidden -->
<input type="hidden" name="name" value="Fetch you php value here" />
<!-- create div contenteditable with id same as the input name -->
<div class="input" contenteditable id="name">Fetch you php value here again
</div>
</td>
<td>
<!-- same as example above -->
<input type="hidden" name="description" value="Column width does not automatically adjust itself to fit content"/>
<div class="input" contenteditable id="description">Column width does not automatically adjust itself to fit content
</div>
<input type="hidden" name="hidden" value="some value" />
</td>
<td><input type="submit" name="update" value="update" /></td>
<td><input type="submit" name="delete" value="delete" /> </td>
</tr>
</form>
</table>
</body>
</html>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$('form').on('submit', function(e){
// stop the form from being submitted
e.preventDefault(e);
var form = $(this);
// find div with class name input and get their ids and text content
$('.input').each(function(){
// get the id from div
var name = $(this).attr('id');
// remove linebreak and trim excessive spaces
var value = $(this).text().replace('/\n/g', " ").replace('/\s+/g', " ");
// insert value to respective input name
$('input[name="' + name + '"]').val(value);
});
// submit the form
$(form)[0].submit();
});
</script>
Note: The above is just a sample and will post data to the same php file which you will have to change that to: action="findGroup.php" after testing.
DEMO: https://jsfiddle.net/michaelyuen/owv0eb7u/
Related
I have some HTML that creates a form enriched with access keys, combined with a stylesheet that adds the accesskey attribute value after it.
It works nicely for labels, but it does not work for radio buttons, check boxes and submit buttons.
Alternatively I have tried some scripting that produces the same effect (without causing any exception).
Can someone explain why it is like that, and more importantly how to fix that (easily)?
The solution does not have to be CSS (while actually being preferred); it could be JavaScript, too (e.g. like https://stackoverflow.com/a/7035862/6607497 or https://stackoverflow.com/a/32293101/6607497).
Sketch of my form code (the actual form has many more elements, but those follow the same pattern):
[accesskey]:after {
margin-left: 0.5em;
content: "[" attr(accesskey) "]";
font-family: monospace;
}
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-DE" xml:lang="de-DE">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form method="post" action="..." enctype="multipart/form-data" class="sf">
<fieldset class="sf-fset">
<legend class="sf-legend" accesskey="s">Suchkriterien</legend>
<table summary="Suchkriterien" class="sf">
<tbody>
<tr><td><label class="sf" for="srch-a-cn" accesskey="n">Name</label></td> <td><input type="text" name="srch-a-cn" size="30" maxlength="80" id="srch-a-cn" class="field" pattern=".*" /></td></tr>
<tr><td></td> <td><label class="sf" for="srch-match-cn" /><label><input type="radio" name="srch-match-cn" value="E" checked="checked" id="srch-match-cn-E" accesskey="1"/>genau</label> <label><input type="radio" name="srch-match-cn" value="M" id="srch-match-cn-M" accesskey="2"/>ähnlich</label></td></tr>
</tbody>
</table>
</fieldset>
<p />
<fieldset class="sf-fset"><legend class="sf-legend" accesskey="u">Suchmodus</legend>
<table class="sf" summary="Suchmodus">
<tbody>
<tr>
<td><label for="srch-mode" accesskey="m" class="sf-lab">Modus</label></td>
<td><label><input type="radio" name="srch-mode" value="telephoneNumber" checked="checked" id="srch-mode-telephoneNumber" accesskey="t" title="telephoneNumber"/>Telefon</label>
<label><input type="radio" name="srch-mode" value="pager" accesskey="f" title="pager" id="srch-mode-pager"/>Funk</label>
</td>
</tr>
</tbody>
</table>
</fieldset>
<p></p>
<input type="submit" name=".submit" value="Suchen" accesskey="c" />
</form>
</body>
</html>
Here is a partial screenshot that shows how it looks (with some extra styling applied):
(Ignore the underlined character; that's from the script I tried to highlight the accesskey, too (and it fails in the same cases). The important thing is that the individual radio buttons don't show the accesskey)
This answer is not complete yet, but due to lack of anything better, I'm summarizing what I found out:
Radio Buttons (<input type="radio">, CGI::radio_group())
It seems to be a "feature" of CGI.pm from perl 5.18.2 to create two nested label elements for a radio_group:
The outer label covers the whole button group (all buttons in the group)
The inner label covers the actual input element and the text label, and it is repeated for every button in the group.
Unfortunately any accesskey attribute as passed via -attributes is attached to the input element.
Playing with Firefox' Inspector, I found out that accesskey is displayed properly if the attribute is attached to the inner label instead.
However I found no way to do that with CGI.pm.
Submit Button (<input type="submit">)
Also with experimenting I found out that I can wrap the submit button in a label "for" the ID of the submit button, also moving the accesskey from the input element to the label element.
So the accesskey is being displayed and it still triggers the submit button.
Solution
This is the HTML after JavaScript mangling (I copied the code from the browser as snippets won't allow DOM modifications it seems).
Styling may be overly complicated, I know.
body { color: #000000; background-color: #ffffff }
label { font-family: sans-serif; font-weight: bolder }
legend { font-family: sans-serif; font-size: medium; font-weight: bolder }
.legend { font-family: sans-serif }
/* generic tables */
table { background-color: #ffffff; color: #000000; margin-top: 1ex; margin-bottom: 1ex }
td { padding-left: 1mm; padding-right: 1mm }
/* search form */
.sf { }
.sf-fset { }
.sf-legend { font-size: medium; font-family: sans-serif }
.sf-lab { font-family: sans-serif; font-weight: bolder }
.sf-lab2 { font-family: sans-serif; font-weight: bolder; font-size: small }
input.field { background-color: #fefee1 }
input:required { border-color: #9b1415 }
input:invalid { background-color: #fdc7c7 }
input:valid { border-color: #8bd88b }
/* generic styling */
div.vsp { height: 1em }
div.vsp[name="vsp-big"] { height: 1.5em }
#media screen {
span.ak { /* accesskey (key) */
text-decoration: underline;
}
span.akw { /* accesskey wrapper (includes span.ak) */
margin-left: 0.5em;
font-weight: normal; color: #228924
}
span.akw span.ak { /* accesskey (key) */
font-family: monospace; font-weight: bold
}
}
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-DE" xml:lang="de-DE">
<head>
<title>...</title>
<link rev="made" href="mailto:me" />
</head>
<body>
<script type="text/javascript">fix_CSS()</script>
<form method="post" action="/query/2" enctype="multipart/form-data" class="sf">
<fieldset class="sf-fset"><legend accesskey="s" data-i="0" class="sf-legend"><span class="ak">S</span>uchkriterien</legend>
<table class="sf" summary="Suchkriterien">
<tbody>
<tr>
<td><label data-i="0" class="sf" for="srch-a-cn" accesskey="n"><span class="ak">N</span>ame</label></td>
<td><input type="text" name="srch-a-cn" size="30" maxlength="80" pattern=".*" class="field" placeholder="Name" id="srch-a-cn" /></td>
</tr>
<tr>
<td></td>
<td><label class="sf" for="srch-match-cn" /><label><input type="radio" name="srch-match-cn" value="E" checked="checked" data-i="-1" id="srch-match-cn-E" accesskey="1"/>genau<span class="akw">[<span class="ak">1</span>]</span></label> <label><input type="radio" name="srch-match-cn" value="M" id="srch-match-cn-M" accesskey="2" data-i="-1"/>ähnlich<span class="akw">[<span class="ak">2</span>]</span></label></td>
</tr>
</tbody></table>
</fieldset>
<div class="vsp"></div>
<fieldset class="sf-fset"><legend class="sf-legend" data-i="1" accesskey="u">S<span class="ak">u</span>chmodus</legend>
<table summary="Suchmodus" class="sf">
<tbody>
<tr>
<td><label class="sf-lab" data-i="1" for="srch-mode" accesskey="o">M<span class="ak">o</span>dus</label></td>
<td><label><input type="radio" name="srch-mode" value="telephoneNumber" checked="checked" accesskey="t" title="telephoneNumber" id="srch-mode-telephoneNumber" data-i="0"/><span class="ak">T</span>elefon</label> <label><input type="radio" name="srch-mode" value="pager" title="pager" id="srch-mode-pager" accesskey="f" data-i="0"/><span class="ak">F</span>unk</label></td>
</tr>
</tbody></table>
</fieldset>
<div name="vsp-big" class="vsp"></div>
<label data-i="2" class="sf-lab" for="submit" accesskey="c"><input type="submit" name=".submit" value="Suchen" id="submit"><span class="akw">[<span class="ak">c</span>]</span></label>
</form>
</body>
</html>
I deliberately chose digits for the upper radio group as I wanted to preserver some letters and the same label will repeat a few times.
Also the form shown is reduced (other elements with an accesskey were omitted), so the choice of accesskeys may seem a bit odd without seeing the other elements.
I want the two buttons "Upload File" and "New Catalog" stand right above the text "Catalog path: Main", but stay in the right side of the search form (like it looks like in the picture).
Putting a "margin top: 11em" or something like that does make the buttons move below (this is what I have done currently). But this doesn't make website look better: when you add a lot of tags on the search form the buttons are on the same place. Or when you resize the window the buttons keep a "too much distance" from search.
These two buttons are placed inside a <div id="upload-buttons>. In HTML file that comes after <div class="search"> which is the search table standing at the right side. Right after "upload-buttons" comes <div class="overview>. Both "upload-buttons" and "search" are placed in <div id="container>.
This is what I have written in the HTML code (it's a Twig template, but that's not that different from HTML):
<div id="container">
<div class="search">
{# <p>Today's date is: {{ object.date|date("Y-m-d") }}</p>#}
<table id="search-form">
<form method = "get">
<tr>
<th colspan="2">
<label>Search in file database </label>
</th>
<th colspan="2">
<label>Search by tags</label>
</th>
</tr>
<tr>
<td>
<br><input type="search" name="query" placeholder="Search" maxlength="45">
<br><button type="submit" name="search" value="search">Search</button>
</td>
<td>
<label for="start">Start date range:</label>
<br><input type="date" id="from date" name="from-date"
value=""
min="2020-03-01" max="">
<br><label for="end">End date range:</label>
<br><input type="date" id="to date" name="to-date"
value=""
min="2020-03-01" max="">
</td>
<td>
</td>
</form>
<form method = "get">
<td>
<br><input type="text" name="tags" data-role="tagsinput" placeholder="tag1,tag2,tag3">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{{ rel }}js/dist/bootstrap-tagsinput.min.js"></script>
<br><button type="submit" name="search" value="tagssearch">Search</button>
</td>
<td>
<input type="checkbox" name="andcondition" value="1">
Check if you want each file to include all tags (AND condition)
</td>
</tr>
</form>
</table>
</div>
<div id="upload-buttons">
Upload File
New Catalog
</div>
</div>
<div class="overview">
<a id="catalogpath">
Catalog path: {{ catalogPath }}
</a>
And this is what I have written in CSS:
#container {
position: relative;
}
search {
float: right;
width: 45em;
height: fit-content;
background: midnightblue;
border-radius: 0.5em;
padding: 1em;
margin: 1em;
display: inline-block;
}
#search-form table {
vertical-align: top;
}
#search-form td, #search-form tr, #search-form th{
border-left: solid 0.5em transparent;
border-right: solid 0.5em transparent;
}
/*FILES AND OVERVIEW*/
#upload-buttons {
display: inline-block;
margin-top: 11em;
}
.overview {
clear: both;
}
#catalogpath {
font-size: 2em;
color: gold;
white-space: nowrap;
}
I have tried: to put "upload-buttons" inside "overview". It then appears right above the catalog path, but then they don't stay on the left side of the search forms.
I have tried vertical-alignment and vertical-align attributes on "upload-buttons" and "container" but they still stay on the same place.
How can I make the buttons stay right above (or almost right above the "catalog Path") but right side of the search forms without giving the button too big margin from any element above?
Try to make them position: absolute and write specific pixels from the top and left.
position: absolute;
top: ___px;
left: ___px;
I hope this helps.
I am trying to float the submit button to the right in the form but I am facing problem the float is not being applied on the submit button Login. I have added some of server-side generated code.
Code
#login-form{
width: 400px;
background-color: #6B0000;
color: white;
}
#loginButton{
color: #6B0000;
border: 1px solid;
padding: 5px 30px 5px 30px;
background-color: white;
border-radius: 3px;
/*This one here does not work */
float: right;
}
<body>
<header id="header">
<h1>
Google Maps & Yahoo Mashup
</h1>
</header>
<DIV id="content">
<form id="login-form" name="login-form" method="post" onSubmit='return false'>
<input type="hidden" name="login-form" value="login-form" />
<table>
<tbody>
<tr>
<td><label>Email</label></td>
<td><input id="login-form:email" type="text" name="login-form:email" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input id="login-form:pwd" type="text" name="login-form:pwd" /></td>
</tr>
<tr>
<td><input type="submit" value="Login" id="loginButton" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" />
</form>
</DIV>
</body>
Try this one. I set a colspan of 2 to the input button and gave its parent td a width of 100%, this along with the float right should shift it to the right.
#login-form{
width: 400px;
background-color: #6B0000;
color: white;
}
#loginButton{
color: #6B0000;
border: 1px solid;
padding: 5px 30px 5px 30px;
background-color: white;
border-radius: 3px;
/*This one here does not work */
float: right;
}
/* Make the input's parent td 100%, you may want
a class here instead for browser support */
td:last-child {
width: 100%;
}
<body>
<header id="header">
<h1>
Google Maps & Yahoo Mashup
</h1>
</header>
<DIV id="content">
<form id="login-form" name="login-form" method="post" >
<input type="hidden" name="login-form" value="login-form" />
<table>
<tbody>
<tr>
<td><label>Email</label></td>
<td><input id="login-form:email" type="text" name="login-form:email" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input id="login-form:pwd" type="text" name="login-form:pwd" /></td>
</tr>
<tr>
<!-- setting a colspan of two -->
<td colspan="2"><input type="submit" value="Login" id="loginButton" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" />
</form>
</DIV>
</body>
I created a login form in a div (I am preferring to use tables for this - please ignore the php in the values). The issue is that my 'submit' and 'Create a new account' table rows/data only center in relation to table data that is NOT an input field. I would like for the last two rows to center in relation to the entire username and password rows.
How can I get the last two rows to center? I've tried creating a new table with those specific rows and centering them, didn't make a difference. Any input would be appreciated.
Here is a link to the HTML/CSS and output: http://jsbin.com/sepipolohu/4/edit
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<h2>Please login below.</h2>
<h3>Don't have an account? Create one here.</h3>
<div class="formFormat">
<form name="loginForm" method="post" action="<?php? $_SERVER['PHP_SELF'];>" >
<table id="cssTable">
<tr>
<td>Username:</td><td><input type="text" id="user" name="user" value="<?php echo $user_name?>" /></td>
</tr>
<tr>
<td>Password:</td><td><input type="text" id="pass" name="pass" value="<?php echo $user_password?>"/></td>
</tr>
<tr>
<td><input type="submit" name="submitLogin"/></td>
</tr>
<tr>
<td id="createAccount">Create an account.</td>
</tr>
</table>
</form>
</div>
</body>
</html>
CSS:
body {
width: 100%;
height: 100%;
text-align:center;
font-family: helvetica;
font-color: white;
background-image: url(https://download.unsplash.com/phto-1429091967365-492aaa5accfe);
}
.formFormat{
padding: 10px;
height: 150px;
width:240px;
border: 1px black solid;
display:inline-block;
position: relative;
}
#createAccount {
font-style: italic;
}
Remove this
<tr>
<td><input type="submit" name="submitLogin"/></td>
</tr>
<tr>
<td id="createAccount">Create an account.</td>
</tr>
and put the code below after </table> and before </form>
<input type="submit" name="submitLogin"/>
<span id="createAccount">Create an account.</span>
put <br/> between <input type="submit" name="submitLogin"/> and
<span id="createAccount">Create an account.</span> if you want the text 'Create an account' under the button.
Look here
Change the width to auto in .formFormat
width:auto;
If you want the button and the "Create an account" text to center just wrap them in center tags. <center> </center>
I have this table:
<table>
<tr>
<td>
<input type="text" class="half"/>
<input type="text" class="half" />
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
</tr>
</table>
CSS:
table {
width: 100%;
border-spacing: 0;
}
.half {
float: left;
width: 50%;
}
How can I have two input fields next to each other each filling up 50% of the table cell's (natural / normal) width?
Right now, this doesn't work. The table cells containing the input fields of class half are far too wide and I can't see why this happens.
You need two things: DEMO
avoid the white-space in between inline-block element (you may then drop the float property).
include border size into width.
First, the easiest way is to remove white-space from html code and write it so :
<input ... /><input ... />
Second, is to switch to another box-model so :
box-sizing:border-box;
Add vendor-prefix whenever needed .
How about applying .half to the <td> parent?
<td class="half">
<input type="text" />
<input type="text" />
</td>
How about :
<table border="2px">
<tr>
<td>
<input type="text" class= "half"/>
<input type="text" class= "half"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
</tr>
</table>
.css
table {
width: 100%;
border-spacing: 0;
}
td{
padding-left: 5px;
}
.half {
float: left;
width: 49%;
margin: 2px;
}
A quick way to resolve this, wrap then inputs in a span tag. Set the span to inline-block 50%, and the inputs to 100%. Using a box model maintains the inputs in the td
http://jsfiddle.net/HgxFf/
<table>
<tr>
<td>
<span><input type="text" class="half"/></span>
<span><input type="text" class="half" /></span>
</td>
<td>
<input type="text"/><input type="text"/>
</td>
<td>
<span><input type="text"/></span>
</td>
</tr>
</table>
CSS
table {
width: 100%;
border-spacing: 0;
}
td{border:1px solid #000000;font-size:0px; }
span{
display:inline-block;
width:50%;
padding:0px
}
.half {
width: 100%;
}
input[type="text"]{
box-sizing:border-box;
}
}