I have a search input and then an html table like this:
<form action="/providers/search" method="get">
<div class="field has-addons">
<div class="control">
<input class="input" name="q" type="text" placeholder="Search for every columns">
</div>
<div class="control">
<button type="submit" class="button is-primary">Search</button>
</div>
</div>
</form>
<table class="table is-bordered is-striped is-narrow is-fullwidth" >
<thead>
<tr>
<th>Name</th>
<th>Website</th>
<th>Login</th>
<th>Password</th>
<th>Email</th>
<th>Description</th>
<th></th>
</tr>
</thead>
...
</table>
the problem is the search input is stack directly on the html table, i think the .field class doesn't create the margin between input and table.
here is what i'm getting:
is there something wrong?
Are you perhaps using float on the elements inside the form? That could be the reason why the form/container element isn't having the correct height.
Quickfix is using overflow: hidden on the form/container element.
Cleaner fix is using clearfix see What is a clearfix?
Other option is to use flexbox instead of float elements depending on your which browser you need to support.
If I'm going to the wrong direction please provide the CSS you use.
Related
I know almost nothing about CSS.
This is my table:
<tbody>
<tr>
<td class="onefield acyfield_1 acyfield_text">
<label class="cell margin-top-1">
<div class="acym__users__creation__fields__title">Name</div>
<input name="user[name]" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Name"}" type="text" class="cell ">
</label>
<div class="acym__field__error__block" data-acym-field-id="1"></div>
</td>
<td class="onefield acyfield_2 acyfield_text">
<label class="cell margin-top-1">
<div class="acym__users__creation__fields__title">Email</div>
<input id="email_field_403" name="user[email]" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Email"}" required="" type="email" class="cell acym__user__edit__email ">
</label>
<div class="acym__field__error__block" data-acym-field-id="2"></div>
</td>
<td class="acysubbuttons">
<noscript>
<div class="onefield fieldacycaptcha">
Please enable the javascript to submit this form
</div>
</noscript>
<input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit" onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
</td>
</tr>
</tbody>
The button isn't aligned with the input fields:
I have tried like a million things, like:
vertical-align: bottom
As per documentation here.
And position: absolute margin 0;
Etc. etc.
It doesn't matter: the button is always on the middle.
Can anyone help?
Thanks!
In the code submitted, HTML table is not used properly.
If you want to create the form using a table, the labels for inputs should be declared as column headers, in the thead section of the table, not in tbody. This way, your table row will contain only the inputs and the submit button and they will have the same height by default.
th {
text-align:left;
}
<table>
<thead>
<th class="acym__users__creation__fields__title">Name</th>
<th class="acym__users__creation__fields__title">Email</th>
</thead>
<tbody>
<tr>
<td class="onefield acyfield_1 acyfield_text">
<input name="user[name]" value=""
data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Name"}"
type="text" class="cell ">
<div class="acym__field__error__block" data-acym-field-id="1"></div>
</td>
<td class="onefield acyfield_2 acyfield_text">
<input id="email_field_403" name="user[email]" value=""
data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Email"}"
required="" type="email" class="cell acym__user__edit__email ">
<div class="acym__field__error__block" data-acym-field-id="2"></div>
</td>
<td class="acysubbuttons">
<noscript>
<div class="onefield fieldacycaptcha">
Please enable the javascript to submit this form
</div>
</noscript>
<input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit"
onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
</td>
</tr>
</tbody>
</table>
Instead use
position: absolute;
bottom: 0px;
and also add bottom:0px;
Have you tried the margin-top attribute? It essentially puts a space on top of your subscribe button.
Basically in the css block of your button, add
margin-top: 10px;
Note that this value is fixed so it's probably not the best solution but it's a quick and easy one. Also play around with the value until its the right spot.
So I'm currently having issues putting an HTML table inside a form within a jQuery Mobile environment.
The error I get is as follows: Uncaught TypeError: Cannot read property 'not' of undefined
And here's the line that it points me to within jquery.mobile-1.4.5.js:13906 in the Chrome debugger:
Lastly here is the code for the table and form I am attempting to create:
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" data-ajax="false" enctype="multipart/form-data" method="post">
<table data-role='table'>
<tr>
<td>
<input type="text" name="company" form="my_form"></td>
<button type="button" form="my_form">ok</button>
</td>
</tr>
</table>
</form>
I've also noticed that this particular error is only triggering once the td element is placed inside the table, therefore if I were to comment out the td tags and content and keep the table and tr elements, no error is triggered.
Please help.
I got it to work by including the thead. See working example: http://jsfiddle.net/Twisty/whwmsp2c/5/
<div data-role="page">
<div data-role="header"><h2>Test Form</h2></div>
<div role="main" class="ui-content">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" data-ajax="false" enctype="multipart/form-data" method="post" id="myForm">
<table id="myTable" data-role="table" data-mode="reflow">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="html" form="myForm" />
</td>
<td>
<button type="button" form="myForm" >ok</button>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
When I reviewed all the docs and looked at the error, I could see that your HTML did not have a header for the table, and JQM was looking for this. By adding it, the table renders fully.
See more: http://api.jquerymobile.com/table/
I need to align the labels on the left hand side properly, so that the textbox and text area at the same place..I have added a class to set the width but that does not work properly.
FIDDLE
Code:
<div id="feedbackdialogbox">
<div>
<h3>Feedback</h3>
</div>
<ul>
<li>
<label for="feedback_nm" class="feedback-label-len">(Optional) tell us who you are</label>
<input type="text" id="feedback_name">
<br>
</li>
<li>
<label for="feedback_msg" class="feedback-label-len">How can we do better?</label>
<textarea rows="5" id="feedback_msg" placeholder="Go ahead, type your feedback her..."></textarea>
<br>
</li>
<li>
<div id="radio_button_list_title_wrapper">
<div id="radio_button_list_title" class="feedback-label-len">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</div>
</div>
<br>
</li>
</ul>
<button id="feedback_submit">Send</button>
</div>
css
.feedback-label-len {
width:600px;
}
I think if I were in your place, I'd just add two </br> below the labels.
They are:
On the left hand side
They are left-aligned as well.
This obviously shall give you the same effect as
label {display:block;}
Adding display: block to the labels would be a fine solution for a simple form. If you're set on putting them side by side...
label {display: block; float: left}
li {overflow: hidden
.feedback-label-len {
display: block;
}
JSFIDDLE
I would use a table.
JSFIDDLE
<form method="post" action="feedback.php">
<table id="feedbackTable">
<tr>
<th><label for="txtName">(Optional) tell us who you are</label></th>
<td><input type="text" id="txtName" style="color:#000000" title="Enter your name" name="txtName" placeholder="Enter Your Name" /></td>
</tr>
<tr>
<th class="message"><label for="">How can we do better?</label></th>
<td><textarea title="Enter your message" name="txtMessage" rows="5" id="txtMessage" placeholder="Go ahead, type your feedback her..."></textarea></td>
</tr>
<tr>
<th><label for="txtEmail">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</label></th>
<td><input type="text" id="txtEmail" title="Enter your email address" name="txtEmail" value=""/></td>
</tr>
<tr>
<th><label title="Send"></label></th>
<td><input type="submit" style="color:#000000" value="Send" /></td>
</tr>
</table>
</form>
One approach you can try using is using tables in order to format the data. Using the table, tr (table row), and td (table data) html tags we can format the data in so that they are spaced correctly without using CSS!!!
<DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="feedbackdialogbox">
<div>
<h3>Feedback</h3>
</div>
<table>
<ul>
<tr>
<td>
<li><label for="feedback_nm" class="feedback-label-len">(Optional) tell us who you are</label></li></td>
<td><input type="text" id="feedback_name"></td>
</tr>
<tr>
<td><li><label for="feedback_msg" class="feedback-label-len">How can we do better?</label></li></td>
<td><textarea rows="5" id="feedback_msg" placeholder="Go ahead, type your feedback her..."></textarea></td>
</li></tr>
<li>
<div id="radio_button_list_title_wrapper">
<div id="radio_button_list_title" class="feedback-label-len">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</div>
</div>
<br>
</li>
</ul>
</table>
<button id="feedback_submit">Send</button>
</div>
</body>
</html>
Just so you know this method may upset html purists. The tag was designed to actually display table data and using it for other purposes such as formatting is sometimes considered improper by old school web coders. However it I have not been able to find an actual problem caused by formatting data like this and doing so is the easiest way for you to make pages such as the one you are asking about.
I hope this answered your question, if you need me to expand on this just ask but when I ran the code above it gave me something much like you described.
I´m facing a problem with the new release of bootstrap 3.
Why vertical margin are lost between some elements in the new version?
I´m migrating from v2.3, and now, a lot of things are going wrong.
In the example below, there is no margin between the panel and the form
This works fine in v2. Is there a workaround for this in v3?
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<input class="form-control" id="search" name="search" placeHolder="Search" type="text" />
</div>
<input type="submit" class="btn btn-primary" value="Search" />
</form>
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>Item No</th>
</tr>
</thead>
<tbody>
<tr>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</div>
The Result:
I don't know why but you can fix this with :
.form-inline+.panel {
margin-top: 10px;
}
I want to create a table where each td is a form field. What is the best way of approaching that? Should I create a regular table and apply css styles on the form fields to resemble the size of the td fields? Hmmm... what do you suggest?
You can place tags inside of a form easily, so I would recommend nesting a table in the form:
<form>
<table>
<tr>
<td>Name: <input type="text" name="name" /></td>
<td>Age: <input type="text" name="age" /></td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
Which would give you a one row, two column table with a labeled text box in each column. Be careful about nesting your HTML tags, this could get confusing fast if you made a large table/form.
One way is to use contenteditable
<html>
<table>
<tr>
<td>
<div contenteditable="true"></div>
</td>
</tr>
</table>
</html
People seem to be forgetting about display: table, display: table-row and display: table-cell!
Here's a demo jsFiddle.