Two buttons next to each other HTML CSS BOOTSTRAP [duplicate] - html

This question already has answers here:
Getting two buttons next to each other
(3 answers)
Closed 2 years ago.
I am having a problem with my design.
I have two buttons on my product page. However because one is in a form, they are on top of each other(see image ).
I want to get the two buttons next to each other. Can someone help me out, please ? Below I added my HTML and CSS code.
Thanks in advance!
HTML:
<!DOCTYPE HTML>
<div class="container text-center">
<div class="sale">
<h1>On Sale</h1>
<p class="text-secondary">
We have new sales promotions online for a short period of time every day. We offer products from
popular labels and luxury brands in the lifestyle segment up to 75% cheaper than the
recommended retail price.
</p>
</div>
</div>
<section class="on-sale">
<div class="container">
<div class="row">
<?php
for($i = 0; $i < $countProductItems && $i < 4; $i++){
?>
<div class="col-md-3">
<div class="product-top">
<img src="<?php echo ($saleProducts[$i]['imgProduct1']);?>" class="img-fluid" alt="Product1"/>
<div class="overlay-right text-center">
<button type="button" class="btn btn-secondary" title="Quick Shop">
<i class="fa fa-eye text-white"></i>
</button>
<form action="includes/shopping-cart.inc.php?action=add&id=<?php echo ($saleProducts[$i]['ID'])?>" method="post">
<input class="text-center" type="hidden" name="quantity" value="1"/>
<input type="hidden" name="index-page" value="index">
<input type="hidden" name="product-name" value="<?php echo ($saleProducts[$i]['strProductNaam']); ?>">
<input type="hidden" name="product-price" value="<?php echo ($saleProducts[$i]['strSalePrijs']); ?>">
<button type="submit" class="btn btn-secondary " title="Add to cart" name="add_to_cart"><i class="fa fa-shopping-cart"></i></button>
</form>
</div>
</div>
<div class="product-bottom text-center">
<p>
<?php rating_star(($saleProducts[$i]['RatingStar'])) ?>
</p>
<p><h3><?php echo ($saleProducts[$i]['strProductNaam']); ?></h3></p>
<?php sale_product(($saleProducts[$i]['intPrijs']), ($saleProducts[$i]['strSalePrijs']))?>
</div>
</div>
<?php
}
?>
</div>
</div>
</section>
</html>
CSS:
.container .sale{
padding: 3rem 0;
}
.container .sale{
font-family: var(--gugi);
}
.container .sale{
padding: 0.5% 25%;
font-size: 0.9em;
}
.on-sale{
margin: 50px 0;
}
.on-sale img{
width: 100%;
padding: 20px;
transition: 1s;
cursor: pointer;
}
.on-sale img:hover{
transform: scale(1.1);
}
.product-top{
width:100%;
display: inline-block;
}
.product-bottom .fa{
color: orange;
font-size: 10px;
}
.product-bottom h3{
font-size: 20px;
font-weight: bold;
}
.product-bottom h5{
font-size: 15px;
padding-bottom: 10px;
}
.make_red {
color: red;
}
// codefilling text[error] - nfnjsnfjsfnbjkdsnfdsfndjsfbjabsdjhbgdgabadsg


You can use flex to do it easily.
<div class="overlay-right d-flex justify-content-center">
<button type="button" class="btn btn-secondary"></button>
<form action="#" method="post">
<button type="submit" class="btn btn-secondary">
<i class="fa fa-shopping-cart"></i>
</button>
</form>
</div>


You could use a rule like...
form {
display: inline;
}
...though it'd be better to give your form a class and add the rule to that class.
That said, why are you using an anchor tag inside a button? You might want to use just the anchor and style it as a button.
Finally, for a future reference, you might want to post a trimmed down version of the code as a code snippet, containing just the relevant parts. I'll add here one for the solution just as an example. It makes it so much easier for us to understand the problem.
.inline-form {
display: inline;
}
<button>Left Button</button>
<form class='inline-form'>
<button>Right Buton</button>
</form>

Related

Keep div fixed only inside another div and dont let it go outside parent div

I have a div element inside another div called fixed. What I want is to keep div fixed scrollable. Here is a CSS for fixed div:
#fixed
{
overflow:scroll;
position:fixed;
height:450px;
}
HTML code:
<form name="myForm" class="formcss" method="POST" action="create3.php" id="reportform" enctype="multipart/form-data">
<fieldset>
<img src="img/stuff.png" style="margin-left:35%; width:320px;">
<div class="large-3 columns" style="margin-top:1.5%;" id="fixed">
<label>Choose username</label>
<input placeholder="Search Me" id="box" type="text" />
<select>
<option disabled selected>Sort By</option>
<option value="new">Free Artists</option>
<option value="asc">Artists with 1 project</option>
<option value="desc">Artists with 1+ projects</option>
</select>
<input type='checkbox' value="ft" onclick="getUsers('sort',this.value)">FT</input>
<input type='checkbox' value="ct" onclick="getUsers('sort',this.value)">CT</input>
<input type='checkbox' value="ap" onclick="getUsers('sort',this.value)">AP</input>
<input type='checkbox' value="ct3" onclick="getUsers('sort',this.value)">CT-3</input>
<input type='checkbox' value="ct6" onclick="getUsers('sort',this.value)">CT-6</input>
<div id="myAccordion">
<?php //for($i=321; $i<347; $i++)
//{
//echo "<h3>".chr($i)."</h3>";
echo "<h3>Names</h3>";
echo '<ul class="source">';
$sql = "SELECT username FROM user ";
$result = $conn->query($sql);
if ($result->num_rows > 0)
{
// output data of each row
while($row = $result->fetch_assoc())
{
$name= $row["username"];
echo"<li class='item'><span class='closer'>x</span>".$name."</li>";
}
}
else
{
echo "0 results";
}
echo '</ul>';
//}
?>
</div>
</div>
<label>Project <?php echo $code?></label>
<div class="rowone">
<div class="projLeader">
<label>Captain:</label>
<ol>
<li class="placeholder" name="projLeader"><div class="adding">Drop Here</div></li>
<input type="hidden" name="projLeader" class="hiddenListInput1" required/>
</ol>
</div>
<div class="info">
<label>Information:</label>
<ol>
<li class="totalinfo">Total: 0.</li>
<li class="leaderinfo">Process Leaders: 0.</li>
<li class="checkerinfo">Process Checkers: 0.</li>
<li class="staffinfo">Process Artists: 0.</li>
</ol>
</div>
<div class="projChecker">
<label>Coordinator:</label>
<ol>
<li class="placeholder" name="projChecker"><div class="adding">Drop Here</div></li>
<?php
//echo '<li class="dropClass" name="projChecker"> <span class="closer">x</span>'.$_SESSION['projChecker'].'</li>';
?>
<input type="hidden" name="projChecker" class="hiddenListInput2" required/>
</ol>
</div>
</div>
<div class="rowtwo">
<?php
for($y=0;$y<$len;$y++)
{
echo "<div class='proc'> <pre>";
echo "<h6 >Process: ".$proc[$y]." " ;
echo "People required: ".$num[$y].". ";
echo "<span class='assigned' name='assigned[]' >People Assigned: 0. </span> <input class='unchecked' id='unchecked' type='hidden' name='link[]' value='0'/><input class='checked' id='checked' type='checkbox' name='link[]' value='1'><i title='Activate Process' class='fi-link'></i>Link Process</input></h6></pre>";
?>
<div class="procLeader">
<label>Leader:</label>
<ol>
<li class="placeholder"><div class="adding">Drop Here</div></li>
</ol>
</div>
<div class="procChecker">
<label>Checker:</label>
<ol>
<li class="placeholder"><div class="adding" >Drop Here</div></li>
</ol>
</div>
<div class="procStaff">
<label>Artist:</label>
<ol>
<li class="placeholder"><div class="adding">Drop Here</div></li>
</ol>
</div>
<!--<div class="small-8 large-8 columns" style="margin-left: 15%;">
<div class="form-group">
<label>Studio: <small id="small">*</small>
<div class="multiselect">
<div class="selectBox">
<select onclick="showCheckboxes()" class="input input1 name">
<option>-- Select an option --</option>
</select>
<div class="overSelect"></div>
</div>
<div class="scrollable" id="checkboxes">
<?php
while ($row = mysqli_fetch_array($resultStudio))
{
$row[0] = cleanOutputData($row[0]);
if(isset($studio))
{
foreach($studio as $code)
{
if($row[0] == $code)
{
$match = 1;
break;
}
else
$match = 0;
}
}
?>
<div class="row">
<div class="small-12 large-12 columns">
<label style="height: 37px; width:70%; float:left;" >
<input type='checkbox' class="checkbox" style="margin-left:5%; width:15%;" name='studio[]' id=<?php echo $row[0] ?> value="<?php echo $row[0] ?>" /><?php echo $row[0] ?>
</label>
</div>
</div>
<?php
}
mysqli_free_result($result);
?>
</div>
</div>
</label>
</div>
</div>-->
<div class="small-8 large-8 columns" style="margin-left: 25%;">
<table class="multiselect">
<tr><td><label>Studio:</label> </td></tr>
<tr>
<td >
<select class="input input1 name">
<option> -- Select Studio --</option>
<?php echo $studio ?>
</select>
</td>
<td><input id="img" class='AddNew' type="image" src="img/add.png" alt="Submit" onClick="return false;"></td>
<td><input type='button' class='AddNew' value='Add new item'></td>
</tr>
</table>
</div>
<?php
echo "</div>";
}
?>
</div>
<div class="row">
<div class="small-6 large-6 columns">
<input type = "submit" style="margin-left:300px; width:150px;" id="savebutton" name ="submit" class="button" value = "Create Project" onclick="userSubmitted = true;"/>
</div>
</div>
<div class="output1"></div>
<div class="output2" ></div>
<div class="output3"></div>
</div>
</fieldset>
</form>
What I got when i use position: fixed. But I want it to stay inside white area when I scroll down. I want it to be like this. How it can be achieved?
EDIT
after proposed solutions I edited code like that:
.formcss{
position: relative;
margin-left:65px;
margin-right:470px;
margin-top:50px;
width:90%;
}
#fixed
{
overflow:scroll;
position: absolute;
height:450px;
}

position: fixed; makes element's position relative to the browser window (so it scrolls along with it), not any other DOM element. So in your case it should be something like:
#fixed
{
overflow:scroll;
position:fixed;
left: 1rem; // your distance from left edge of the window
top: 1rem; // your distance from top edge of the window
height:450px;
}
If what you want to achieve is to make your #fixed attached to the specific area of your website and not the window, you what you are looking for is position: absolute; on the #fixed and position: relative; on it's parent, like:
.parent {
position: relative;
}
#fixed {
overflow:scroll;
position: absolute;
top: 1rem; // your distance from top edge of the parent
left: 1rem; // your distance from left edge of the parent
height:450px;
}
You can always play around with positions to understand them better.
EDIT
Compare fixed with absolute. Only difference between those two examples is second line of CSS section: position.
I couldn't recreate this example on the code provided as it contains many bugs
(like closing <input></input>), so make sure to validate it.
I hope you can achieve your desired effect following examples of code I provided for both cases.

Instead of position: fixed use position: absolute and position: relative on parent, that way element will be fixed to parent element position.
// !ONLY FOR DEMO!
$(document).ready(function() {
$('div').animate({
left: '80%',
top: '80%',
}, 5000);
});
.wrapper div {
position: relative;
background: #aaa;
width: 100px;
height: 100px;
}
.wrapper div:after {
position: absolute;
left: 10px;
bottom: 10px;
width: 15px;
height: 15px;
background: red;
content: '-^-';
}
.wrapper {
width: 100%;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div></div>
</div>

Here is preview
.parent {
width: 100%;
height: 500px;
background-color: #fff;
border: 1px solid gray;
position: relative;
}
.child {
box-sizing:border-box;
position: absolute;
top:0;
left:0;
color: #252525;
padding: 15px;
height: 100%;
width: 40%;
overflow-y: scroll;
background: #fff5f1;
}

How do I get my cart total to float to the right of my header?

I have a header in my Wordpress site, and on left side I have a logo image and a login button floating to the right. I've just added a cart totals link and I want it to float to the right next to the login button but I cant get it to move. Can anyone help?
CSS:
.cart-contents {
float: right;
display: inline-block;
}
a.login_button {
float: right;
padding: 7px;
margin-right: 130px;
margin-top: 30px;
display: inline-block;
color: #fd0e35;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
text-shadow: none;
box-shadow: none;
background-color: #fff;
border-radius: 4px;
border: 2px solid #fd0e35;
}
HTML:
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php
if ( is_front_page() && is_home() ) : ?>
<img src="http://localhost:8888/devo-wordpress/wp-content/uploads/2016/04/DEVO2.png">
<!-- if ( $cart_contents_count > 0 ) {
if ($cart_contents_count == 0) {
$menu_item = '<li class="right"><a class="wcmenucart-contents" href="'. $shop_page_url .'" title="'. $start_shopping .'">';
} else {
$menu_item = '<li class="right"><a class="wcmenucart-contents" href="'. $cart_url .'" title="'. $viewing_cart .'">';
}
$menu_item .= '<i class="fa fa-shopping-cart"></i> ';
$menu_item .= $cart_contents.' - '. $cart_total;
$menu_item .= '</a></li>';
Uncomment the line below to hide nav menu cart item when there are no items in the cart
= } -->
<div id="basket"><a class"cart-contents"><?php echo WC()->cart->get_cart_total(); ?></a></div>
<form id="login" action="login" method="post">
<h1><img src="http://localhost:8888/devo-wordpress/wp-content/uploads/2016/04/DEVO2.png" class="login-logo" width="80" height="auto"></h1>
<p class="status"></p>
<label for="username">Email</label>
<input id="username" type="text" name="username">
<label for="password">Password</label>
<input id="password" type="password" name="password">
<a class="lost" href="<?php echo wp_lostpassword_url(); ?>">Forgotten your password?<br><br></a>
<input class="submit_button" type="submit" value="Login" name="submit">
<a class="close" href=""><span class="glyphicon glyphicon-remove"></span></a>
<?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
</form>

Your missing an equals sign declaring your class for cart-contents.
Change
<a class"cart-contents">
To
<a class="cart-contents">
That should do it for you.

set background image for a state/template in angularjs?

I tried putting a div tag around the whole template and styling it with css like
<div ng-style="{'background-image': 'url(/images/food.png)', 'background-repeat': 'repeat-y'}">
<img src="/images/final.png" class="brandImg center-block">
<h3 class="text-center"> Please Enter your Registered Mobile Number to Login</h3>
<form novalidate name="CSloginForm" ng-submit="loginCustomer()" role="form" class="csLoginForm col-xs-6 col-xs-offset-3">
<div class="form-group col-xs-offset-1">
<label for="phno" style="font: 22px sans-serif;">Mobile No</label>
<input type="tel" name="phno" id="phno" style="margin-left: 60px; width: 300px; margin-top: 50px; margin-bottom: 20px" class="phInput" ng-maxlength="10" ng-minlength="10" ng-model="csNumber" required />
</div>
<div class="form-actions">
<button type="submit" ng-disabled="CSloginForm.$invalid" class="btn btn-primary btn-lg col-xs-offset-9" ng-click="csLookUp()" style="margin-bottom: 10px">Start</button>
</div>
</form>
</div>
but this only puts background in a header part of the Page not the whole page?

You can use $rootScope for this. Object in the root scope are propagated to all child scopes.
angular.module('app').run(function($rootScope) {
$rootScope.app = { background-image: 'url(/images/default.png)' };
});
Now in your base HTML template you add the background to the body (not a div).
<html ng-app="app">
<head>
...
</head>
<body ng-style="{'background-image': app.background, 'background-repeat': 'repeat-y'}">
...
</body>
Given that the view has a controller
<div ng-controller="PageCtrl">
..
</div>
You can access app and set the background from the controller
angular.module('app').controller('PageCtrl', function($scope) {
$scope.app.background = 'url(/images/food.png)';
});
You can set the background in a view without a controller using ng-init, but this is discouraged.

Center search field using Twitter Bootstrap

As most people seem to have this problem I've gone through a lot of answers, but none have worked for me yet.
I'm looking to center the search box and search button
<div class="hero-unit">
<div class="main-top-container">
<%= simple_form_for(#search, :url => search_properties_path, :method => :post, :html=> { class: 'input-height', id: 'main_search_form' }) do |f| %>
<div class="row main-top-search-row">
<div class="container">
<div class="row">
<h1 class="col-sm-12 search-title">Find magic</h1>
<div class="main-top-searchfield col-sm-4">
<%= f.input :location, :required => false, label: false, input_html: {id: "search_query", class: "form-control typeahead"}, :placeholder => "Search..." %>
</div>
<%= button_tag( :class => "btn btn-primary btn-custom-red col-md-1", :id => "search_button") do %>
Search
<% end %>
<!-- <div class="col-sm-3 col-sm-offset-1">
<a class="how-it-works" href="/faq">How It works</a>
</div> -->
</div>
</div>
</div>
<% end %>
</div>
</div>
I have tried to use CSS on each element, but for some reason it does not allow me to align center.....

DEMO: https://jsbin.com/piwefi/
CSS:
html,
body {
height: 100% /* not necessary if you have a fixed height on the feature area */
}
/* ------ featurette */
.featurette {
display: table;
width: 100%;
height: 30%; /* set a pixel height and then remove the body,html height */
vertical-align: middle;
background: #555;
color: #fff;
}
.featurette-inner {
display: table-cell;
vertical-align: middle;
}
.featurette .search {
padding: 3%;
max-width: 980px; /*max width of search*/
margin: 0 auto;
}
.no-margin-top {
margin-top: 0
}
/* ------ form-control-lg */
.form-control-lg {
min-height: 46px;
border-radius: 6px;
font-size: 18px;
line-height: normal;
}
/* ------ disjointed form group custom */
.featurette .search.has-button .btn {
margin-top: 5px;
width: 100%;
}
#media (min-width:480px) {
.featurette .search.has-button .form-group {
position: relative;
padding-right: 99px; /*space for button*/
}
.featurette .search.has-button .btn {
position: absolute;
top: 0;
right: 0;
width: auto;
margin: 0;
}
}
HTML
<!-- example 1 -->
<div class="featurette">
<div class="featurette-inner text-center">
<form role="form" class="search">
<h3 class="no-margin-top h1">Search Me.</h3>
<div class="input-group input-group-lg">
<input type="search" placeholder="search" class="form-control">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">Search</button>
</span>
</div>
<!-- /input-group -->
</form>
<!-- /.max-width on this form -->
</div>
<!-- /.featurette-inner (display:table-cell) -->
</div>
<!-- /.featurette (display:table) -->
<hr>
<!-- example 2 -->
<div class="featurette">
<div class="featurette-inner text-center">
<form role="form" class="search has-button">
<h3 class="no-margin-top h1">Search Me.</h3>
<div class="form-group">
<input type="search" placeholder="search" class="form-control form-control-lg">
<button class="btn btn-lg btn-warning" type="button">Search</button>
</div>
<!-- /form-group -->
</form>
<!-- /.max-width on this form -->
</div>
<!-- /.featurette-inner (display:table-cell) -->
</div>
<!-- /.featurette (display:table) -->

Working Mootools Drag-Drop and Sort after drop. Need ID replace after sort to track input order

Description:
Drag and drop form elements to build a form that will be displayed later.
Needed:
- input and textarea formfields need to have id's in order after they have been sorted. I need to reference the answer to the questions and the instructions. Right now if they are sorted, I would not know what order to display them in later when viewing the record. there may be a better way, but Im stuck now.
Sort issue: The sortable area does not work until after the drag drop event. There are default fields that need to be sorted right away.
Here is the fiddle: http://jsfiddle.net/htscraig/vhkGD/3/
<div class="vf">
<div id="edit_menu">
<p style="text-align: center; margin: -5px 5px 5px;">Form Elements Menu</p>
<button href="#" id="questions_toggle" style="margin-left: 9px;">Questions<span id="questions_status"> show</span>
</button>
<button id="answers_toggle" href="#">Answer Type<span id="answers_status"> show</span>
</button>
<button id="instructions_toggle" href="#">Instructions<span id="instructions_status"> show</span>
</button>
<div id="questions">
<div style="text-align: center;">
<h3>VF-300 Questions<h3></div>
<div class="item">
<li style="float:left, height:40px, width:200px">
<textarea class="" cols="43" rows="3"style="border: medium none; width: 240px;" name="vf300-Q1" form="GeneralVerdict">Did <? echo $all_pla;?> and <? echo $all_def;?> enter into a contract?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item">
<li style="float:left, height:40px, width:200px">
<textarea class="mooeditable" cols="43" rows="4" style="border: medium none; width: 240px;" name="vf300-Q2" form="GeneralVerdict">[Did <? echo $all_pla;?> do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item">
<textarea class="mooeditable" cols="43" rows="6" style="border: medium none; width: 240px;" name="vf300-Q3" form="GeneralVerdict">[or]
[Was <? echo $all_pla;?> excused from having to do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<hr>
</div>
<div id="answers">
<div style="text-align: center;"><h3>VF-300 Answer Formats<h3></div>
<div class="item">
<input type="radio" value="Yes" name="yes-no" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="yes-no" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item"><span>Answer 222222</span>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item"><span>Answer 333333</span>
<span class="delete"><button>Delete Line</button></span>
</div><hr>
</div>
<div id="instructions">
<div style="text-align: center;"><h3>Juror Instructions<h3></div>
<div class="item"><textarea class="" cols="43" rows="5" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i2" form="GeneralVerdict">If your answer to [either option for] question 2 is yes, then answer question 3. If you answered no [to both options], stop here, answer no further questions, and have the presiding juror sign and date this form.]</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item"><textarea class="" cols="43" rows="4" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i3" form="GeneralVerdict">If your answer to question 3 is yes, then answer question 4. If you answered no, stop here, answer no further questions, and have the presiding juror sign and date this form.]</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item"><textarea class="" cols="43" rows="5" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i4" form="GeneralVerdict">If your answer to [either option for] question 4 is yes, then answer question 5. If you answered no [to both options], stop here, answer no further questions, and have the presiding juror sign and date this form.</textarea>
<span class="delete"><button>Delete Line</button></span>
</div><hr>
</div>
</div>
<div id="edit_right">
<div class="info"><h1>CoPO Verdict Builder</h1>Drag and drop form elements in box. Drag elements into position to sort</div>
<ol>
<div id="edit_area">
<div class="item_dz" id="1">
<li style="float:left, height:40px, width:200px">
<textarea class="" cols="43" rows="3"style="border: medium none; width: 240px;" name="vf300-Q1" form="GeneralVerdict">Did <? echo $all_pla;?> and <? echo $all_def;?> enter into a contract?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<input type="radio" value="Yes" name="yes-a1" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="no-a1" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<li style="float:left, height:40px, width:200px">
<textarea class="" cols="43" rows="4" style="border: medium none; width: 240px;" name="vf300-Q2" form="GeneralVerdict">[Did <? echo $all_pla;?> do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<input type="radio" value="Yes" name="yes-a2" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="no-a2" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<textarea class="" cols="43" rows="6" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-Q3" form="GeneralVerdict">[or]
[Was <? echo $all_pla;?> excused from having to do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<input type="radio" value="Yes" name="yes-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="no-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item_dz"><textarea class="" cols="43" rows="5" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i2" form="GeneralVerdict">If your answer to [either option for] question 2 is yes, then answer question 3. If you answered no [to both options], stop here, answer no further questions, and have the presiding juror sign and date this form.]</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
</div>
</div>
</ol>
</div>
window.addEvent('domready', function () {
$$('.item').addEvent('mousedown', function (event) {
if (event.target == this.getParent().getElement('.delete button')) return;
event.stop();
// `this` refers to the element with the .item class
var item = this;
var clone = item.clone().setStyles(item.getCoordinates()).setStyles({
opacity: 0.7,
position: 'absolute'
}).inject(document.body);
var drag = new Drag.Move(clone, {
droppables: $('edit_area'),
onDrop: function (element, droppable) {
if (!droppable) {
item.removeClass('item_dz');
item.addClass('item');
item.tween('background-color', '#c0c0c0', '#fff');
} else {
item.removeClass('item');
item.addClass('item_dz');
item.clone().inject(edit_area);
edit_area.highlight('#4679BD', '#AFD2FF');
item.removeClass('item_dz');
item.addClass('item');
var mySortables = new Sortables('', {
clone: true,
opacity: 0.4,
});
setTimeout(function () {
mySortables.addLists(edit_area);
}, 1);
}
element.dispose();
},
onEnter: function (dragging, edit_area) {
edit_area.tween('background-color', '#9FFF8F');
},
onLeave: function (dragging, edit_area) {
edit_area.tween('background-color', '#fff');
},
onCancel: function (dragging) {
dragging.destroy();
edit_area.tween('background-color', '#fff');
}
});
drag.start(event);
});
$$('.delete').addEvents({
mouseover: function () {
this.tween('opacity', '1');
this.getParent(['.item_dz']).fade(0.3);
this.getParent(['.item_dz']).tween('background-color', '#fff', '#FF9F9F');
},
mouseleave: function () {
this.tween('opacity', '0.7');
this.getParent(['.item_dz']).fade(1);
this.getParent(['.item_dz']).tween('background-color', '#FF9F9F', '#fff');
}
});
// start delegation relays
window.addEvent('click:relay(.delete)', function () {
if (confirm('Delete this line item?')) {
this.getParent(['.item_dz']).destroy();
this.destroy();
} else {
// Do nothing
}
})
window.addEvent('mouseover:relay(.delete)', function () {
this.tween('opacity', '1');
this.getParent(['.item_dz']).fade(0.3);
this.getParent(['.item_dz']).tween('background-color', '#fff', '#FF9F9F');
})
window.addEvent('mouseleave:relay(.delete)', function () {
this.tween('opacity', '0.7');
this.getParent(['.item_dz']).fade(1);
this.getParent(['.item_dz']).tween('background-color', '#FF9F9F', '#fff');
})
//end delegation relays
// menu toggle menus start
var status = {
'true': ' show',
'false': ' hide'
};
// questions slide start
var questionsSlide = new Fx.Slide('questions');
// set default slide as hidden
questionsSlide.hide();
$('questions_toggle').addEvent('click', function (event) {
event.stop();
questionsSlide.toggle();
$('questions_status').set('text', status[questionsSlide.open]);
});
// questions slide end
// answers slide start
var answersSlide = new Fx.Slide('answers');
// set default slide as hidden
answersSlide.hide();
$('answers_toggle').addEvent('click', function (event) {
event.stop();
answersSlide.toggle();
$('answers_status').set('text', status[answersSlide.open]);
});
// answers slide end
// instructions slide start
var instructionsSlide = new Fx.Slide('instructions');
// set default slide as hidden
instructionsSlide.hide();
$('instructions_toggle').addEvent('click', function (event) {
event.stop();
instructionsSlide.toggle();
$('instructions_status').set('text', status[instructionsSlide.open]);
});
// instructions slide end
// menu toggle menus end
$('textarea').mooEditable();
});

The sortables is only added after the first drop event. To have the .item_dz sortable from the beggining you can add this line directly after the domeready function opening: http://jsfiddle.net/ke7nq/
var sortableItem_dz = new Sortables().addItems($$('.item_dz'));
I would suggest you change the HTML for .item_dz a bit so it would include both the question and the Yes/No element. Something like the exmple under so each block would be inside a item_dz:
<div class="item_dz">
<textarea class="" cols="43" rows="6" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-Q3" form="GeneralVerdict">[or] [Was <? echo $all_pla;?> excused from having to do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
<span class="delete"><button>Delete Line</button></span>
<input type="radio" value="Yes" name="yes-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;" />Yes
<input type="radio" value="No" name="no-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No<span class="delete" style="opacity: 0.7;" />
<button>Delete Line</button>
</span>
</div>
To get all the elements after you are done dropping/sorting you can do
var questions = document.getElements('.item_dz');
// or to get just the ID's:
// var questions = document.getElements('.item_dz').map(function(el){ return el.get('id'); });
or use the .serialize() method: http://mootools.net/docs/more/Drag/Sortables#Sortables:serialize