I put form elements in a table so that column names and inputs are aligned to 2-columns.
And I put submit button and cancel button below the table.
The table width is not fixed.
I want to put the buttons center-aligned of the table width.
One simple way is to put the buttons in the table.
But I want to separate them from the table.
What's the most elegant way to do that?
Structure like this:
<div>
<!-- Your table -->
<table />
<!-- Your buttons -->
<div style="text-align:center;">
<input />
</div>
</div>
Since the buttons and table are related you could use a fieldset:
<fieldset>
<!-- Your table -->
<table />
<!-- Your buttons -->
<p style="text-align:center;">
<input />
</p>
</fieldset>
Related
I don't think I do, but I put it in every time anyway. This is what it looks like. Can I take the p out?
<div class="container" id="shortcuts">
<!-- All shortcut elements in div#shortcuts -->
<p>
<input type="button" class="int" id="bookmark" />
<br />
<br />
<input type="button" class="int" id="browser" />
<!-- Shourtcut elements defined -->
</p>
</div>
Nope you're right you don't need it at all. the tag will just give the text a certain default styling.
I have two forms on a page. Both I would like in the left column in a two-column layout, but the second form has input fields stretching onto the second column.
I could of course create two separate "rows". However, the design calls for the top position of the columns to be at the same height, like columns in a two-column layout typically display.
I don't believe this is necessarily related to Bootstrap because this might be solved with other methods, but I was wondering if Bootstrap had a quick solution for this
This following approach is obviously incorrect syntax and moves the form element in and out of flow, but this is basically what I'd like to accomplish:
<div class="container">
<div class="row">
<div class="col-md-6">
<form id="form1">
</form>
...
<form id="form2">
<!-- ... #form2 inputs ... -->
</div>
<div class="col-md-6">
<!-- ... #form2 inputs cont'd ... -->
</form> <!-- end of #form2 -->
</div>
</div>
</div>
I can already separate the forms on two separate rows, but of course, the right column is lower than the left column.
<div class="container">
<div class="row">
<div class="col-md-6">
<form id="form1">
</form>
</div>
</div> <!-- end of row -->
<div class="row">
<form id="form2">
<div class="col-md-6">
<!-- ... #form2 inputs ... -->
</div>
<div class="col-md-6">
<!-- ... #form2 inputs cont'd ... -->
</div>
</form> <!-- // end of #form2 -->
</div>
</div>
Is there any trick to "collapsing" the space above the right column if this is how the html should be structured, or is there a Bootstrap approach that I'm missing? Open to non-bootstrap methods if necessary.
Have you considered using just one form element to wrap the whole lot, and then separating the two forms using their name attributes? For example:
value="form1[field_name]"
value="form2[field_name]"
I am working on creating a form page.
I have broken the problem into three meta challenges:
Creating the navigation within the form
Producing all the various inputs for the form
Appropriately display items from #2 based on selections in #1.
Right now, I am working on item #2
I have attached the output of my code from within Coda 2
I'm using an accordion for #1 and it appears to work just fine.
When I add the first two items from #2, they also appear to work just fine, staying aligned expected next to the accordion.
Ideally, what I want to do is align the lower radio buttons as well as any subsequent form inputs so they are immediately below the radio button/text inputs that are outside the sidebar and do not wrap under the accordion and into the sidebar. That is what is happening now.
I'm obviously missing something about how to apply my content within the bootstrap grid appropriately using containers, rows and class=col-md-n.
Marston
Here is what I think is the relevant code:
<!-- standard document stuff + jumbotron --->
<div class="container-fluid">
<div class="sidebar">
<div class="col-md-2">
<div class="panel-group" id="accordion">
<!-- NAVIGATION ITEMS --->
<!-- lots of working code that produces the accordion --->
</div>
</div>
</div>
<hr/>
<!-- radio buttons --->
<form class="form-horizontal">
<fieldset>
<!-- bunch of working code here that produces radio buttons --->
</fieldset>
</form>
<hr/>
<!-- Text input --->
<div class="main Content active Content">
<form role="form">
<div class="col-md-3">
<!-- more code here that produces text input --->
</div>
<!-- repeats for each form group --->
<!-- more code that works --->
</form>
</div>
</div>
<!-- check box section _-->
<!-- Preferred Contact Time --->
<form role="form">
<fieldset>
<div class="form-group">
<label class="col-md-3 control-label" for="radios1">Available Weekdays</label>
<div class="col-md-3">
<!-- Lots of radio button code --->
</div>
</div>
<!-- Repeats for 2nd set --->
</fieldset>
</form>
For disclosure, I haven't tasted your code.
From a quick look I have noticed that you're not putting your "col"s into rows. This will cause your layout to act strange.
Standard way to structure your elements is to use col inside row inside container :
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
</div>
</div>
Hope that helps.
I have a table with two columns, the right one contains 3 buttons, those buttons change the content in the other column of the table. I want this table to be positioned at the center top of the page but I can't figure out how to do it.
Here is a screenshot of what I want (the image shows a header too, but it's not important for now)
If it is possible I want the buttons to don't move when the content on the other column changes, but it's not a priority.
I can also change the table with another structure if this will help.
Here is html code:
<div class='main'>
<table class="table">
<tr>
<td>
<input type="button" class="button" value="edit_menu"/><br><br>
<input type="button" class="button" value="edit_desc"/><br><br>
<input type="button" class="button" value="set_push"/>
</td>
<td>
<div id="content">
<div id="edit_menu" display="none" class="form">
here is a simple form
</div>
<div id="edit_desc" display="none" class="form">
here is a second form
</div>
<div id="set_push" display="none" class="form">
here is a third form
</div>
</div>
</td>
</tr>
</table>
</div>
The forms visibility is changed via Javascript when the buttons are pressed.
Try using the below code.
css :
body {margin:0; padding:0;}
.wrapper {width: 500px /* width of your table*/; margin:0 auto;}
html :
<div class="wrapper">
<!-- put your table here -->
</div>
When I resize this fiddle, the input box gets larger when I shrink the screen. Unfortunately on the iPhone, it's going off the screen in my app.
Here is the fiddle: http://jsfiddle.net/v6Bhx/5/embedded/result/ and here is the code:
<div class="row-fluid">
<div class="span6">
<table width="500">
<tr>
<td>
<div class="input-prepend">
<span class="add-on">$</span>
<input type="text" name="fee" value="" class="span6" />
</div>
</td>
</tr>
</table>
</div>
<div class="span6">Test</div>
</div>
Also yes, I realize I am using tables. I am not doing this to format data, it is actually being used for tabular data which happens to have input boxes in it.
Either set a width on slider :
<input style="width:125px;" type="text" name="fee" value="" class="span6" />
or use css
.span6 { width: 125px; }
The reason is the table is changing row widths on page resize
My suggestion is to use table width="100%" .
<div class="row-fluid">
<div class="span6">
<table width="100%">
<tr>
<td>
<div class="input-prepend"> <span class="add-on">$</span>
<input type="text" name="fee" value="" class="span6"
/>
</div>
</td>
</tr>
</table>
</div>
<div span="6">Test</div>
</div>
Setting the table width # 500px will likely cause a problem as the viewpoint shrinks to mobile size. Try removing the table width and see what happens.
Update
I can't picture exactly how you want the final page and table to look, but here are a few additional points you could check.
Regarding the iPhone display issue, make sure that in the head of your page you have:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I think that specifying a table width of 100% will be invalid HTML5. I doubt that this is the source of your problem, but try something like this in your CSS:
.span6 table{
width:100%;
}
I can see that having the form with an input prepend inside a table is going to be a challenge. If there is no way around this, you have a nesting problem at the moment -- the input.span6 is actually nested inside the another span6 column.
In general, the HTML for a nested grid with fluid rows is:
<div class="row-fluid">
<div class="span6">
<div class="row-fluid"> <!-- start nested grid -->
<div class="span12">
<!-- Form and table details here -->
</div> <!-- end nested span -->
</div> <!-- end nested row -->
</div> <!-- end span6 -->
<div class="span6">
test
</div>
</div>
See the fluid nesting section on http://twitter.github.com/bootstrap/scaffolding.html#gridSystem for full details.
Good luck!