Allow HTML Content to Scale so Content isn't Bunched Up - html

I have HTML content that is both horizontally and vertically centered. It looks just how I want it to whenever my screen window is full size. However, if I shrink the window, the content gets bunched up together. What can I do so that the content will adjust with the shrinking of the window and not bunch together?
This the main CSS that I am using on the content that is horizontally and vertically centered...
#one {
#image {
height: auto;
width: 25%;
}
height: 5em;
margin: 0;
position: absolute;
top: 50%;
left: 40%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
#two {
height: 10em;
margin: 0;
position: absolute;
top: 50%;
left: 60%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
HTML:
<body>
<div id="my-div">
<div id="header">
</div>
<!-- Image and Table Name -->
<section id="one">
<img src="image.png" id="image"><br><br>
</section>
<section id="two">
<u id="text">Table Name:</u><br>
<input type="text" value="Stage_Rebate_Index" id="tableNameInput" readonly><br><br>
<div id="dialog-form" title="Add Supplier ID">
<p class="validateTips">All form fields are required.</p>
<!-- Dialog box displayed after add row button is clicked -->
<form >
<fieldset>
<label for="mr_id">MR_ID</label>
<select name="mr_id" id="mr_id_dialog" class="text ui-widget-content ui-corner-all" value="300">
<?php foreach($user1->fetchAll() as $user2) { ?>
<option>
<?php echo $user2['MR_ID'];?>
</option>
<?php } ?>
</select><br><br>
<label for="supplier_id">Supplier ID</label>
<input type="text" name="supp_id" id="supplier_id" class="text ui-widget-content ui-corner-all" value="99">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<!-- Form -->
<form name="myForm" action="">
<!-- Dropdown List -->
<select name="master_dropdown" id="mr_id">
<!-- Javascript that sets 2nd dropdown as the value of the selected value in first dropdown -->
<script>
document.querySelector('#mr_id').addEventListener('change', updateSelection, false);
document.querySelector('#mr_id').addEventListener('change', updateSelection, false);
function updateSelection(event) {
// Get the value from this select
var selectedValue = event.target.value;
// find the select object that you want to set the value for
var selectObjectToSet = document.querySelector('#mr_id_dialog');
selectObjectToSet.value = selectedValue;
// Call the function that was in the onChange listener
updatetable(this.form);
}
</script>
<option selected value="select">Choose a MR_ID</option>
<?php foreach($users->fetchAll() as $user) { ?>
<option data-name="<?php echo $user['MR_ID'];?>">
<?php echo $user ['MR_ID'];?>
</option>
<?php } ?>
</select>
</form>
<!-- Table -->
<p>
<div id="table_div">
<table border="1" id="index_table" class="ui-widget ui-widget-content" style="display: none">
<thead>
<tr class="ui-widget-header">
<td>MR ID</td>
<td>Supplier ID</td>
</tr>
</thead>
<?php foreach($users_one->fetchAll() as $supp) { ?>
<tr>
<td class="mr_id"><?php echo $supp['MR_ID'];?></td>
<td class="supp_id"><?php echo $supp['Supp_ID'];?></td>
</tr>
<?php } ?>
</table>
</div><br>
<button class="ui-button ui-corner-all ui-widget" id="insertButton">Add Supplier ID</button>
</section>
<div id="footer">
</div>
</div>
</body>

Read about Responsive Design.
You need to use a viewport for that purpose.
<meta name="viewport" content="width=device-width, initial-scale=1">

Related

Squish table to make it responsive css

I want to make my table responsive for the application i am using. I have tried all different approach like making it scroll as the window size decreases. But i want to have a approach where the table squeezes or squishes to fit the size of the window. Please find my code. hope i find an answer soon!
.buttonListContainer {
position: fixed;
top: 8.2%;
}
.buttonlistcontext {
position: fixed;
border: 0.1px solid #ddd;
margin-top: 1px;
background-color: transparent;
margin: 0;
padding: 0;
top: 0;
left: 0;
}
<div class="buttonListContainer" style="overflow:auto;margin-top:0;">
<table id="buttonList" class="buttonlistcontext" style="visibility:hidden;">
<tr>
<!-- the spike count -->
<td>
<font size="2">Eventcount</font>: <input type="text" id="EventCount" style="width:40px;text-align:center;" disabled></td>
<td><button style="cursor:pointer" onclick="reset()"><font size="2">Reset</font></button></td>
<!-- the jump to very beginning button -->
<td><input type="image" id="btn01" style="height:15px;width:15px;" src="images/play_first.png" onclick="jump_firstFrame();" />
<!-- the play back button -->
<input type="image" id="btn02" style="height:15px;width:15px;" src="images/play_back2.png" onclick="playBack();" />
<!-- the go back button -->
<input type="image" id="btn03" style="height:15px;width:15px;" src="images/play_back.png" onclick="go_back();" />
<!-- the stop button -->
<input type="image" id="btn07" style="height:15px;width:15px;" src="images/stop.png" onclick="animationFlag = 0; cancelAnimationFrame(myAnimation);" />
<!-- the go forward button -->
<input type="image" id="btn04" style="height:15px;width:15px;" src="images/play_fwd.png" onclick="go_forward();" />
<!-- the play forward button -->
<input type="image" id="btn05" style="height:15px;width:15px;" src="images/play_forward2.png" onclick="play();" />
<!-- the jump to last button -->
<input type="image" id="btn06" style="height:15px;width:15px;" src="images/play_last.png" onclick="jump_lastFrame();" /></td>
<!-- the speed buttons -->
<td>
<font size="2">Speed</font>: x<select name="PlaySpeed" id="PlaySpeed" onchange="Speed(this.value);">
<option value= "1">1</option>
<option value= "5">5</option>
<option value= "10" selected="selected">10</option>
<option value= "50">50</option>
<option value= "100">100</option>
<option value= "200">200</option>
</select>
</td>
<!-- Wall color drop-down list -->
<td>
<font size="2">Wall color</font>: <select id="WallColor" style="background-color: #CCFFCC" onchange="wallColor(this.value);">
<option value="1" style="background-color: #F0F0F0">Silver gray</option>
<option value="2" style="background-color: #CCFFCC" selected="selected">Mint green</option>
<option value="3" style="background-color: #FCFBE3">Vanilla cream</option>
<option value="4" style="background-color: #d5e8f4">Water blue</option>
</select>
</td>
<!-- the scale up button -->
<td>
<font size="2">Sensitivity</font>: </td>
<td><input type="image" id="btn08" style="height:15px;width:15px;" src="images/scale_up.png" onclick="sensitivity_Up();" /></td>
<td><input type="image" id="btn09" style="height:15px;width:15px;" src="images/scale_down.png" onclick="sensitivity_Down();" /></td>
<!-- the Montage buttons -->
<td>
<font size="2">Montage</font>: <select name="MontageSwap" id="MontageSwap" onchange="montageSwap(this.value);">
<option value= "1" selected="selected">Common Average</option>
<option value= "2">CII</option>
<option value= "3">Bipolar</option>
</select>
</td>
<td>
<!-- <button id="filterBtn" style = "cursor:pointer" onclick="filter()" ><font size="2">Filter</font></button> -->
<a href="javascript:void(0)" onclick="filter()">
<font size="2">Filter</font>
</a>
</td>
<!-- the line cursor -->
<td><input type="checkbox" id="LineCursor" onclick="lineCursorFlag=this.checked;draw_TeeChart()" checked/>
<font size="2">Line cursor</font>
</td>
<!-- the pink bars -->
<td><input type="checkbox" id="BGbar" onclick="BGbarFlag=this.checked;draw_TeeChart()" checked/>
<font size="2">Highlights</font>
</td>
<!-- the Time interval -->
<td>
<font size="2">Time interval</font>: <select name="TimeInterval" id="timeIntervalSelect" onchange="timeInterval=this.value*fs;draw_TeeChart()">
<option value= 5>5 sec</option>
<option value= 10 selected="selected">10 sec</option>
<option value= 20>20 sec</option>
</select>
</td>
<td>
<button id="modalBtn-pre" style="cursor:pointer" onclick="CGI()"><font size="2">Pre-annotation</font></button>
</td>
</tr>
</table>
</div>
You could take a look at adding bootstrap to your project. This could save you a lot of time and effort. Bootstrap is awesome for writing responsive code.
If you have added bootstrap, just do the following to achieve your table effect on mobile:
<div class="table-responsive">
<table class="table">
....
<table>
</div>
That will give you a scrollable table on mobile. If you do not want to go the bootstrap route, you could try the following with the HTML above:
<style>
#media screen and (max-width: 767px){
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
}
.table-responsive {
min-height: .01%;
overflow-x: auto;
}
.table{
width: 100%;
max-width: 100%;
}
</style>
That should do the trick. Check out this plunkr.
But really take a look at adding bootstrap.
Well, to make it responsive, you need to do major re-design, using bootstrap, or flexbox, or something else.
But you still can have a responsive table. Add the following code to your CSS, should work:
table {
display: block;
}
tr {
display: block;
}
td {
display: inline-block;
}
If you don't like how it looks like and still want to maintain the table layout for desktop and have something responsive for mobile, here's another trick. You have the normal table layout for desktop, and for mobiles and desktops with less than 900 pixels window width it will be stacked vertically:
#media (max-width: 900px) {
table {
display: block;
}
tr {
display: block;
}
td {
display: block;
}
}
EDIT: For "squish" effect, you can do it like this:
#media (max-width: 900px) {
table {
display: block;
}
tr {
display: block;
}
td {
display: inline-block;
width: 32%;/* to have 3 columns */
}
}
Edit 2: Here's a demo using the last edit. 2 things to notice:
Added box-sizing: border-box; to the "td".
Since we're using "display: inline-block;", for the inline-block to work as desired, all white-spaces between "td"s must be removed. Here's an example:
This:
<td>
cell1
</td>
<td>
cell2
</td>
Should be changed to:
<td>
cell1
</td><td>
cell2
</td>

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;
}

Website does not display properly

Hello, at the moment I am facing 2 problems with my website:
The fact that when I scroll down the text pops over the other topbar
The fact that I have 3 radio buttons and one of them is constantly selected, and I want for the user to able to select one of them at a time
This is the website http://www.onetechsearch.com/
<style type="text/css">
#picture-side {
display: block;
float:left;
z-index: 10;
top: 10px;
left: 10px;
}
input[type="radio"]:checked+label{ border-bottom: 5px solid lime; }
#picture-side1 {
display: block;
float:left;
z-index: 10;
top: 10px;
left: 10px;
}
.site-wrap {
display: none;
}
#picture-side2 {
display: block;
float:left;
z-index: 10;
top: 10px;
left: 10px;
}
#picture2 {
visibility: hidden;
}
#video {
visibility: hidden;
}
#picture {
visibility: hidden;
}
</style>
<script src="jquery-1.8.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var cat= ["Australia", "Bangladesh", "Denmark", "Hong Kong", "Indonesia", "Netherlands", "New Zealand", "South Africa", "C"];
$("#cat").select2({
data: cat
});
});
</script>
<div id="topbar">
<div class="width-container">
<h1><?php bloginfo('name'); ?></h1>
<div id="search">
<form action="<?php bloginfo('url');?>/recipes" method="GET" id="searchF">
<?php
$searched_term = get_query_var('recipe_search');
if (empty($searched_term)) {
$searched_term = isset($_GET["search"]) ? $_GET["search"] : "";
}
?>
<input id="sfield" type="text" name="search" placeholder="keywords" <?php if (!empty($searched_term)) {echo 'value="'.$searched_term.'"';} ?>>
<input type="submit" value="Search">
<div id="picture-side">
<input type="radio" name="images" value="1" id="picture"
<?php if(isset($_GET["images"]) && $_GET["images"]=='1'){ echo 'Checked';} ?>><label for="picture">With Pictures</label>
</div>
<div id="picture-side1">
<input type="radio" name="images" value="0" id="picture2"
<?php if(isset($_GET["images"]) && $_GET["images"]=='0'){ echo 'checked';} ?>><label for="picture2">Without Pictures</label>
</div>
<div id="picture-side2">
<input type="radio" name="video" value="0" id="video"
<?php if(isset($_GET["video"]) && $_GET["video"]=='0'){ echo 'checked';} ?>><label for="video">With video</label>
</div>
<div id="time-side">
<!--<small>Published time</small>-->
<input type="text" id="from-side" name="from" placeholder="Start date"
</div>
<select id="cat" name="cat">
<option value="all" selected>All categories</option>
<option value="HI">Hawaii</option>
<option value="C">Hawaji</option>
</select>
</div>
</div>
</form>
</div>
</div>
Your topbar's z-index is set to 999, "smtitle" also has the same z-index the only thing you need to do is to set "smtitle" z-index to 998 or lower if possible.
The link you provided has the 'images' GET variable set and it's set to empty which in php means 0. This makes your check $_GET["images"]=='0' to validate as TRUE.
Your Radio buttons must have the same name value to work as a group
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio

Scaling html page for mobile

I want to make my html page scale with the mobile screen it is opened on. This is my code I have. I have added the initial scale 1 line but it doesn't seem to work. I want the images the input box and the radio button to scale with the width and height of the device the page is opened on. I am using html/css and bootstrap to make the page and some JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345">
<script>
function myFunc() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corendon WI-FI</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
H1 { text-align: center }
.bs-example{
margin: 20px;
}
body {
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -35%);
}
input, textarea {
max-width:100%
};
img {
max-width: 100%
};
</style>
</head>
<body onload="myFunc();">
<div class="bs-example">
<div class="bs-example">
<form>
<div class="form-group">
<label for="inputticketnummer">Ticketnummer</label>
<input type="ticketnummer" class="form-control" id="inputticketnummer" maxlength="20" placeholder="ticketnummer" size="" required>
</div>
<input type="checkbox" id="checkme"/> Ik heb de voorwaarden gelezen </label>
<br><br>
<input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
</form></div></form>
</div>
</div>
</body>
</html>
In order to get proper page scaling using Bootstrap, you must set up a grid system for the page. Right now, Bootstrap can't tie into anything and therefore not scale it.
Have a look at the documentation: http://getbootstrap.com/css/#grid
Correct your code like the following code :
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function myFunc() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corendon WI-FI</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
H1 { text-align: center }
.bs-example{
margin: 20px;
}
/*body{
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -35%);
}*/
input, textarea {
max-width:100%;
}
img {
max-width: 100%;
}
</style>
</head>
<body onload="myFunc();">
<div class="container">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345">
</div><!--col-sm-12-->
</div><!-- row -->
<div class="row">
<div class="col-sm-12" onload="myFunc();"></div>
</div><!-- row -->
<div class="row">
<div class="col-sm-12 bs-example">
<div class="col-sm-12">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
</div><!-- col-sm-12 -->
<div class="col-sm-12">
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
</div><!-- col-sm-12 -->
<div class="col-sm-12">
<div class="form-group">
<input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
</div>
</div><!-- col-sm-12 -->
</div><!-- col-sm-12 bs-example -->
</div><!-- row -->
</div><!-- container -->
</body>
</html>
Firstly, while using bootstrap always use bootstrap classes. Secondly, dont use transform property in your css and position fixed in your css.
Your markup has several errors.
You can use the bootstrap classes to address this issue, but also can become free and use them as needed.
Repalce your CSS code for that:
.form{
max-width: 400px;
padding: 15px;
margin: 0 auto;
}
img{
margin: 0 auto;
}
.row{
margin-bottom:10px
}
And replace your markup, for that:
<body onload="myFunc();">
<div class="container">
<div class="form">
<div class="row">
<img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345">
</div>
</div>
<form class="form">
<div class="row">
<label for="inputticketnummer">Ticketnummer</label>
<input type="ticketnummer" class="form-control" id="inputticketnummer" maxlength="20" placeholder="ticketnummer" size="" required>
</div>
<div class="row">
<input type="checkbox" id="checkme"/> Ik heb de voorwaarden gelezen
</div>
<div class="row">
<input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
</div>
</form>
</div>
</body>
See my fiddle HERE!

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