I use modal to show table:
<div class="modal-body">
<form class="form-horizontal">
<label><h5>dev</h5></label>
<input type="text" class="input-xlarge" id="dconDev">
<label><h5>speed</h5></label>
<input type="text" class="input-xlarge" id="dconSpeed">
<input type="button" class="btn" id="dconBut" onclick="$('#appBlock').fadeIn('normal'); $('#dcon').show(); addPort('dcon',$('#dconDev').val(),$('#dconSpeed').val())" value="Добавить">
<table class="table table-condensed">
<thead>
<th>lbl</th>
<th>edizm</th>
<th>id</th>
<th>a</th>
<th>b</th>
<th>en_spar</th>
<th>spar</th>
<th>en_period</th>
<th>peiod</th>
</thead>
<tbody id="dconTable">
<th><input type="text" id="lbld"></th>
<th><input type="text" id="edizmd"></th>
<th><input type="text" id="idd"></th>
<th><input type="text" id="ad"></th>
<th><input type="text" id="bd"></th>
<th><input type="text" id="en_spard"></th>
<th><input type="text" id="spard"></th>
<th><input type="text" id="en_periodd"></th>
<th><input type="text" id="periodd"></th>
</tbody>
</table>
</form>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
How can I make modal expand to table size, or fit the table to modal borders? I tried to edit modal section in bootstrap.css but new position of modal is not at center. Also I tried to add something like a class="span4 to tags inside table, which seems doesn't do anything.
Thanks.
Suppose the modal width is 600px. To position the modal in center , use
.modal {
left: 50%;
margin-left: -300px; (negative of half of it's width;)
}
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.
My issue is this piece of code:
<form method="post" name="myform" class="donate-form">
<table class="donate-table">
<input type="hidden" name="cpp_header_image" value="logo.png">
<input type="hidden" name="on0" value="Donation Amount">
<tr>
<th>
<div class="check">
<input name="os0" type="radio" value="5.00" id="radio">
<label for="$5" id="textBlock">$5.00</label>
</div>
</th>
<th>
<div class="checkboxgroup">
<input name="os0" type="radio" value="25.00" id="radio">
<label for="$25" id="textBlock">$25.00</label>
</div>
</th>
</tr>
<tr>
<th>
<div class="checkboxgroup">
<input name="os0" type="radio" value="10.00" id="radio">
<label for="$10" id="textBlock">$10.00</label>
</div>
</th>
<th>
<div class="checkboxgroup">
<input name="os0" type="radio" value="Other" id="radio">
<label for="other" id="textBlock">Custom</label>
</div>
</th>
</tr>
</table>
The issue is within the table "donate-table" closer to the bottom. I have 4 radio buttons, 5,10,25, and other, I want these radio-buttons to be displayed in 2 rows with 2 columns. On chrome (fullscreen) everything looks perfect no horizontal scroll bar and all radio buttons are looking okay but when I shrink the window to be as small as possible or when I use my mobile device the radio buttons get cut off and on my smartphone a horizontal scrollbar appears (I know the issue is because of a smaller screen size but I can't seem to fix it) When I delete 3 radio buttons and only have 1 the problem is gone. How can I fix this so I can display 4 radio buttons without a horizontal scrollbar appearing? I have looked and tried overflow-x:hidden; and some other suggested solutions but none work.
Anyone have a fix? Thank you in advance.
Here is my CSS code if needed:
.donations{
margin-top: 15%;
overflow: hidden;
}
.checkboxgroup {
text-align: center;
display: inline-block;
min-width: 150px;
}
.checkboxgroup label {
display: inline-block;
font-size: 20px;
}
Go through the code comments. Hope this will help you.
01. Replace all <th></th> with <td></td>
02. /* use .donate-table instead of .donations */
03. /* move min-height property to parent class (means .donate-table class) */
/* use .donate-table instead of .donations */
.donate-table{
margin-top: 15%;
overflow: hidden;
width:100%;
min-width:160px;
max-width:500px;
}
/* move min-height property to parent class (means .donate-table class) */
.checkboxgroup {
display: inline-block;
}
.checkboxgroup label {
display: inline-block;
}
<form method="post" name="myform" class="donate-form">
<table class="donate-table">
<input type="hidden" name="cpp_header_image" value="logo.png">
<input type="hidden" name="on0" value="Donation Amount">
<tr>
<td> <!-- Replace all <th></th> with <td></td> -->
<div class="check">
<input name="os0" type="radio" value="5.00" id="radio">
<label for="$5" id="textBlock">$5.00</label>
</div>
</td>
<td>
<div class="checkboxgroup">
<input name="os0" type="radio" value="25.00" id="radio">
<label for="$25" id="textBlock">$25.00</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkboxgroup">
<input name="os0" type="radio" value="10.00" id="radio">
<label for="$10" id="textBlock">$10.00</label>
</div>
</td>
<td>
<div class="checkboxgroup">
<input name="os0" type="radio" value="Other" id="radio">
<label for="other" id="textBlock">Custom</label>
</div>
</td>
</tr>
</table>
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've got following auto generated HTML, which I can not change.
This HTML displays the message in em before the input field, however I need to move it to the right side of the input field.
I have tried using float right to the em, but it does not work.
I'll appreciate any help.
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
CSS Only solution (which I don't recommend, but works)
The jsfiddle: http://jsfiddle.net/rLhTs/
HTML:
<table>
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
<tr class="form-field">
<th scope="row">
<label for="user_name">Name</label>
<em>Name is required.</em>
</th>
<td>
<input type="text" value="" id="name_email" name="name_email">
</td>
</tr>
</table>
CSS:
.form-field:nth-child(1):after {
content:"Email is required.";
}
.form-field:nth-child(2):after {
content:"Name is required.";
}
You'll just have to declare the :after content for nth-child and you'll need to know specifically what you're trying to replace.
This is a JavaScript solution:
Check out this jsFiddle: http://jsfiddle.net/E8dJ9/3/
I've expanded it to show you it could work for any number of rows. You may have to refine this a bit depending on your real specific use case.
And the code for completeness:
HTML:
<table>
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
<tr class="form-field">
<th scope="row">
<label for="user_name">Name</label>
<em>Name is required.</em>
</th>
<td>
<input type="text" value="" id="user_name" name="user_name">
</td>
</tr>
</table>
JavaScript (using jQuery):
$('th[scope="row"]').each(function(index, value) {
var em = $(this).find('em').text();
$(this).parent().find('td').append('<em>' + em + '</em>');
});
CSS:
.form-field th em {
display: none;
}
Try something like:
label {
float:left;
}
em {
float: right;
}
input {
float:left;
}
Although this will put the em on the farthest right spot of the parent container. Considering it is in a table it might work as is, can't test unless we have the full HTML with the opening table tags, etc.
If you are unable to do, use HTML5 validation for email in the input field
<input type="email" title="enter the email in correct format" required="true"/>
whenever the user clicks the submit button without entering the email or entered the email in wrong format, the form will not be submitted and error will be displayed.
I'd like to be able to do something like this in HTML. It isn't valid HTML, but the intent is there:
<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
<th> </th>
<th> </th>
</tr>
<tr>
<form action="/updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<td><input name="name" value="John"/></td>
<td><input name="favorite_color" value="Green"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
<tr>
<form action="/updatePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<td><input name="name" value="Sally"/></td>
<td><input name="favorite_color" value="Blue"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
</table>
Obviously, I can't do this because I must not have a form tag immediately inside of of a <tr> element. The only alternatives I can see are to use nasty javascript or to change the behavior of my program.
What might be a solution that would allow me to have a form that spans multiple columns like this?
One option is to combine the columns with colspans like this:
<table>
<tr>
<th>
Name
</th>
<th>
Favorite Color
</th>
<th>
</th>
<th>
</th>
</tr>
<tr>
<td colspan="4">
<form action="/updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input name="name" value="John"/>
<input name="favorite_color" value="Green"/>
<input type="submit" value="Edit Person"/>
</form>
<form action="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
<tr>
<td colspan="4">
<form action="/updatePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input name="name" value="Sally"/>
<input name="favorite_color" value="Blue"/>
<input type="submit" value="Edit Person"/>
</form>
<form action="deletePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
</table>
And style the form element's layout with CSS. Or you can go with a pure DIV based layout.
I'd vote for the nasty Javascript. It would allow to keep the layout as it is.
Use table-less design with Div's and CSS.
Eg.
<html>
<head>
<style type="text/css">
#wrapper
{
width: 600px;
}
#header
{
width: 600px;
height:30px;
}
#person
{
clear:both;
width:600px; }
.name
{
clear:both;
width: 200px;
float: left;
text-align: center;
}
.color
{
width: 200px;
float: left;
text-align: center;
}
.submit
{
width: 200px;
float: left;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="name">
<b>Name</b></div>
<div class="color">
<b>Favorite Color</b></div>
</div>
<div id="Person">
<form action="/updatePerson" method="post">
<div class="name">
<input name="name" value="John" /></div>
<div class="color">
<input name="favorite_color" value="Green" /></div>
<div class="submit">
<input type="submit" value="Edit Person" /></div>
</form>
</div>
</div>
</body>
</html>
Old posting I know, but for anyone else looking this up...
It seems to be that all responses to now are so determined to answer your question, that they're forgetting to consider there might be a much simpler way.
There may be that hidden behind your question, there's a reason you can't do this. But the "correct" HTML-valid way to do what you're trying to do is to place the entire table inside a single form. Why do you need one form to edit, and another to delete?
<form action="/updatePerson" method="post">
<table>
<thead>
<tr><th>Person Name</th><th>Fave Color</th><th> </th><th> </th></tr>
</thead>
<tbody>
<tr>
<td><input type="text" size="30" value="John" name="name_1"></td>
<td><input name="favorite_color_1" value="Green"/></td>
<td><input type="submit" value="Update" name="submit_update_1"></td>
<td><input type="submit" value="Delete" name="submit_delete_1"></td>
</tr><tr>
<td><input type="text" size="30" value="James" name="name_2"></td>
<td><input name="favorite_color_2" value="Orange"/></td>
<td><input type="submit" value="Update" name="submit_update_2"></td>
<td><input type="submit" value="Delete" name="submit_delete_2"></td>
</tr>
</tbody>
</table>
</form>
You need a bit of logic in your ASP/PHP/server-code to calculate which button-name was pushed, but you need that anyway using your proposed solution.
One solution would be if your multiple columns were actually created in DIVs instead of tables.
You could
a) combine entire table row in one form and handle it with one server-side script.
or
b) set form.action with javascript.
Nope, there isn't such form.
But, in many browsers, your usage is working like you expected, except for when you dynamicly creat DOM elements with such structure in FireFox.
Maybe you can throw away the <form> tag, use javascript to do the submit;
Or you can use <div> to do the table layout thing.
If you are using jQuery, you can do this:
<script type="text/javascript">
$(function() {
$('.rowForm').submit(function() {
//console.log($(':input',$(this).closest('tr')));
//Because u cant span a form across a table row, we need to take all the inputs, move it to hidden div and submit
var rowFormContent = $('.rowFormContent',$(this));
rowFormContent.html(''); //Clear out anything that may be in here
$(':input',$(this).closest('tr')).clone().appendTo(rowFormContent);
return true;
});
});
</script>
<tr>
...
<td>
<form action="/cool" method="post" class="rowForm" id="form_row_1">
<div class="rowFormContent" style="display: none;"></div>
<input type="submit" value="save">
</form>
</td>
</tr>
The side effect is you'll get an extra submit input type in your form, but it will be hidden and should not hurt anything. A subtle note here, is the use of ':input'. This is jQuery shorthand for all input types (select,textarea etc). Watch out for select vals not being copied. You'll have to do some trickery (hidden field) to submit the current selected val of a clone()d select.
I've tried numerous ways to solve the same issue; multiple forms within a single html table. FF & Chrome will automagically close if is placed before or within a or because its not semantically correct html. I appreciate based layout would solve the problem but if you 'need' to stick with the table based layout you'll need to use multiple tables and wrap the & immediately before and after the & tags. In my case I then made some small inline CSS adjustments to remove a border or two and then the table butts up against each other as if they were rows.
Example at: http://jsfiddle.net/chopstik/ve9FP/
I encountered the same issue, solved it using Javascript/jQuery.
The problem here is that form can't stretch across multiple columns in a table, however if the form has id <form id="unique_per_page"...></form> each of the stand-alone form elements like input, select or even textarea can be assigned to that form using form attribute <input type="text" name="userName" form="specific_form_id">
The jquery/javascript to assign these things will need to have a random string generator, which I grabbed from the following Stackoverflow answer
So overall the code will look like this:
$("table tr").each(function(i, el){
if(!$(el).find("form[name='updatePerson']").attr("id"))
{ //if the form does not have id attribute yet, assign a 10-character random string
var fname = (Math.random().toString(36)+'00000000000000000').slice(2, 10+2);
$(el).find("form[name='updatePerson']").attr("id",fname); //assign id to a chosen form
$(el).find("input").attr("form",fname); //assign form attribute to all inputs on this line
$(el).find("form[name='deletePerson'] > input").removeAttr("form"); //remove form attribute from inputs that are children of the other form
}
});
The HTML code you included will need to be updated with the proper name attributes for the forms
<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
<th> </th>
<th> </th>
</tr>
<tr>
<form action="/updatePerson" name="updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<td><input name="name" value="John"/></td>
<td><input name="favorite_color" value="Green"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" name="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
<tr>
<form action="/updatePerson" name="updatePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<td><input name="name" value="Sally"/></td>
<td><input name="favorite_color" value="Blue"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" name="deletePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
</table>
The way I've always done it is:
<tr>
<td><form><input name=1></td>
<td><input name=2></td>
<td><input type=submit></form></td>
</tr>
Include the form inside the first and last td, so it's in an actual text area. It's possible that really old browsers will close the form at the /td, but none today.
With your example:
<tr>
<td>
<form action="/updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
</td>
<td> <input name="name" value="John"/></td>
<td> <input name="favorite_color" value="Green"/></td>
<td>
<input type="submit" value="Edit Person"/>
</form>
</td>
<td>
<form action="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>