CODEWITHSUNDEEP
javascripthtmlcss
Perplexityy
Perplexityy

Reputation: 569

position css object next to form text

I have this html table that can be added to and sorted by column, ascending or descending, via the corresponding arrows. How do I position the arrows such that the up arrow is above the down arrow, with both positioned to the right of the column text? I want to add the arrows both relative to the right of the column text and relative to each other. How do I do this?

Javascript:

function add_post() {
    var table = document.getElementById("myTable"),
        elements = document.forms['myForm'].elements,
        my_values = [elements['pickup'].value, elements['delivery'].value, elements['price'].value,
                    elements['pickup-distance'].value, elements['delivery-distance'].value]

    if ((my_values.filter(x => is_not_null(x))).length == 5){
        insert_row(table, my_values)
    }
}

function insert_row(table, values){
    var row = table.insertRow(-1),
        cells = new Array(values.length)

    for (i = 0; i < values.length; i++) { 
        cells[i] = row.insertCell(i)
        cells[i].innerHTML = values[i]

    }
    reset_form()


}

function is_not_null(val){
    return val != ""
}

function reset_form(){
    document.getElementById("myForm").reset();
}

function table_to_array(){
    var tableInfo = Array.prototype.map.call(document.querySelectorAll('#myTable tr'), function(tr){
        return Array.prototype.map.call(tr.querySelectorAll('td'), function(td){
          return td.innerHTML;
          });
        });
    return tableInfo.slice(1);
}

function sort_table(i, v){
    var a = table_to_array();
    a.sort(function(a,b) {
        return a[i]-b[i]
    });
    reset_table();
    if (v == 0){
        table_from_matrix(a);
    }
    else{
        table_from_matrix(reverse_array(a))
    }
}

function reverse_array(arr){
    arr.reverse()
    return arr
}


function reset_table(){
    var x = document.getElementById("myTable").rows.length;
    for (i = 1; i < x; i++) {
        document.getElementById("myTable").deleteRow(1);
    }

}

function table_from_matrix(matrix){
    var table = document.getElementById("myTable");
    matrix.forEach(e => insert_row(table, e))

}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Courier app</title>
    <style>
      table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }

      td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
      }

      tr:nth-child(even) {
        background-color: #dddddd;
      }
      body {background-color: powderblue;}
      h1 {color: red;}
      p {color: blue;}

      i {
          border: solid black;
          border-width: 0 3px 3px 0;
          display: inline-block;
          padding: 3px;
        }

        .right {
          transform: rotate(-45deg);
          -webkit-transform: rotate(-45deg);
        }

        .left {
          transform: rotate(135deg);
          -webkit-transform: rotate(135deg);
        }

        .up {
          transform: rotate(-135deg);
          -webkit-transform: rotate(-135deg);
        }

        .down {
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
        }
    </style>
  </head>
  <body>
  <table style="width:100%"
         id="myTable">
      <tr>
        <th>Pickup Address</th>
        <th>Delivery Address</th> 
        <th>Price</th>
        <th>Distance to Pickup</th>
        <th>Delivery Distance</th>
      </tr>
  </table>

  <form style="border:1px solid #ccc" id="myForm">
    <div class="container">

      <p>Please fill in this form to post a job for our drivers.</p>
      <hr>

      <label for="pickup-address"><b>Pickup Address</b></label>
      <input type="text" placeholder="Enter Address" name="pickup" required>

      <label for="delivery-address"><b>Delivery Address</b></label>
      <input type="text" placeholder="Enter Address" name="delivery" required>

      <label for="price"><b>Price</b></label>
      <input type="text" placeholder="Enter Price" name="price" required>

      <label for="distance-to-pickup"><b>Distance to Pickup</b></label>
      <input type="text" placeholder="Enter distance" name="pickup-distance" required>

      <label for="distance-to-delivery"><b>Distance to Delivery</b></label>
      <input type="text" placeholder="Enter distance" name="delivery-distance" required>

      <button onclick="add_post()" type="button">Post</button>

    </div>
  </form> 
  <i class="up" onclick="sort_table(0, 0)"></i>
  <i class="down" onclick="sort_table(0, 1)"></i>

  <i class="up" onclick="sort_table(1, 0)"></i>
  <i class="down" onclick="sort_table(1, 1)"></i>

  <i class="up" onclick="sort_table(2, 0)"></i>
  <i class="down" onclick="sort_table(2, 1)"></i>

  <i class="up" onclick="sort_table(3, 0)"></i>
  <i class="down" onclick="sort_table(3, 1)"></i>

  <i class="up" onclick="sort_table(4, 0)"></i>
  <i class="down" onclick="sort_table(4, 1)"></i>

  <script src="main.js"></script>
  </body>
</html>

Upvotes: 0

Views: 74

Answers (3)

Rhut Virani
Rhut Virani

Reputation: 46

Rather than trying to make the arrows on top of each other why not add them on each side of the table heading like this.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Courier app</title>
  </head>
  <body>
  <table style="width:100%"
         id="myTable">
      <tr>
        <th><i class="up" onclick="sort_table(0, 0)"></i> Pickup Address 
  <i class="down" onclick="sort_table(0, 1)"></i></th>

        <th><i class="up" onclick="sort_table(1, 0)"></i> Delivery Address
  <i class="down" onclick="sort_table(1, 1)"></i>
</th> 
        <th>  
  <i class="up" onclick="sort_table(2, 0)"></i> Price
  <i class="down" onclick="sort_table(2, 1)"></i></th>
        <th>  <i class="up" onclick="sort_table(3, 0)"></i> Distance to Pickup
  <i class="down" onclick="sort_table(3, 1)"></i></th>
        <th>

  <i class="up" onclick="sort_table(4, 0)"></i> Delivery Distance
  <i class="down" onclick="sort_table(4, 1)"></i></th>
      </tr>
  </table>

  <form style="border:1px solid #ccc" id="myForm">
    <div class="container">

      <p>Please fill in this form to post a job for our drivers.</p>
      <hr>

      <label for="pickup-address"><b>Pickup Address</b></label>
      <input type="text" placeholder="Enter Address" name="pickup" required>

      <label for="delivery-address"><b>Delivery Address</b></label>
      <input type="text" placeholder="Enter Address" name="delivery" required>

      <label for="price"><b>Price</b></label>
      <input type="text" placeholder="Enter Price" name="price" required>

      <label for="distance-to-pickup"><b>Distance to Pickup</b></label>
      <input type="text" placeholder="Enter distance" name="pickup-distance" required>

      <label for="distance-to-delivery"><b>Distance to Delivery</b></label>
      <input type="text" placeholder="Enter distance" name="delivery-distance" required>

      <button onclick="add_post()" type="button">Post</button>

    </div>
  </form> 



  <script src="main.js"></script>
  </body>
</html>

https://codepen.io/rhut-virani/pen/bJEdZp

Upvotes: 3

bobjoe
bobjoe

Reputation: 673

Make the up arrow position: absolute; This will take it out of the flow. The down arrow will end up right below the top arrow. Then you can move them with equal margins

    .up {
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
      position: absolute;
    }

Upvotes: 0

Chagai Wild
Chagai Wild

Reputation: 2163

This worked for me:

    .down {
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      position: relative;
      top: 5px;
      right: 13px;

It just relocate the icon in relative to its initial position, you can use rem for instead of px to have a more responsive page.

here's a fiddle: https://jsfiddle.net/d3uovkq9/

Upvotes: 0

Related Questions