Tips for adjusting row height in a fluid table design using div elements

Question

Tips for adjusting row height in a fluid table design using div elements

I'm having trouble making a responsive table (a keyboard) where only the cells are resizing instead of the whole keyboard fitting on the screen without any scrolling required.

Here is the code I have so far: https://jsfiddle.net/723ar2f5/2/embedded/result/

#teclat {
    display: table;
    table-layout: fixed;
    border-spacing: 5px;
    position: absolute;
    height: 100%;
}
#lletra {
    font-family: Verdana;
    font-size: 9vw;
}
.fila {
    display: table-row;
}

.fila div {
    display: table-cell;
}
.tecla {
    width: 100%;
    height: 100%;
}

The keyboard looks good on larger screens, but not on mobile devices.

html css responsive-design

Answer 1

Answer №1

Consider trying this out.

.tecla {
    width: 100%;
    height: 13vw;
}

For the complete code and a demonstration, check out the jsfiddle DEMO.

 function deleteText(all) {
  var text = document.getElementById('text');
  if (all == "s")
   text.value = "";
  else
   text.value = text.value.slice(0,-1);
 }
 window.onload = function(e){
   setTimeout(window.scrollTo(0,1),10);

   var buttons = document.getElementsByClassName('tecla');
   for (var i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener('click', (function(i) {
        return function() {
          document.getElementById('text').value = document.getElementById('text').value + this.getElementById('letter').textContent;
        };
      })(i), false);
   }
 }

  body {
    height: 100%;
    width: 100%;
  }
  #keyboard {
    /* display: table; */
    /* table-layout: fixed; */
    /* border-spacing: 5px; */
    /* position: relative; */
    height: 100vh;
  }
  #letter {
    font-family: Verdana;
    font-size: 9vw;
  }
  .row {
    display: table-row;
  }

  .row div {
    display: table-cell;
  }
.tecla {
    width: 100%;
    height: 13vw;
}
  .tecla_marked {
    fill: red;
    stroke:black;
    stroke-width:5;
    opacity:0.5;
  }

<body>
<input type="text" id="text" style="width: 60%" readonly/><button type="button" onclick="deleteText('1')"></button><button type="button" onclick="deleteText('s')">Delete</button><br/>
<div id="keyboard">
<div class="row">
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marked" />
  <text id="letter" class="letter" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">A</text>
</svg>
</div>
...
...{/* Repeat SVG elements for all letters as required */}
...
</div>

Answer 2

Consider trying this out.

.tecla {
    width: 100%;
    height: 13vw;
}

For the complete code and a demonstration, check out the jsfiddle DEMO.

 function deleteText(all) {
  var text = document.getElementById('text');
  if (all == "s")
   text.value = "";
  else
   text.value = text.value.slice(0,-1);
 }
 window.onload = function(e){
   setTimeout(window.scrollTo(0,1),10);

   var buttons = document.getElementsByClassName('tecla');
   for (var i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener('click', (function(i) {
        return function() {
          document.getElementById('text').value = document.getElementById('text').value + this.getElementById('letter').textContent;
        };
      })(i), false);
   }
 }

  body {
    height: 100%;
    width: 100%;
  }
  #keyboard {
    /* display: table; */
    /* table-layout: fixed; */
    /* border-spacing: 5px; */
    /* position: relative; */
    height: 100vh;
  }
  #letter {
    font-family: Verdana;
    font-size: 9vw;
  }
  .row {
    display: table-row;
  }

  .row div {
    display: table-cell;
  }
.tecla {
    width: 100%;
    height: 13vw;
}
  .tecla_marked {
    fill: red;
    stroke:black;
    stroke-width:5;
    opacity:0.5;
  }

<body>
<input type="text" id="text" style="width: 60%" readonly/><button type="button" onclick="deleteText('1')"></button><button type="button" onclick="deleteText('s')">Delete</button><br/>
<div id="keyboard">
<div class="row">
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marked" />
  <text id="letter" class="letter" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">A</text>
</svg>
</div>
...
...{/* Repeat SVG elements for all letters as required */}
...
</div>

Tips for adjusting row height in a fluid table design using div elements

Answer №1

Similar questions

The equal height feature in Bootstrap 4's card-deck is not functioning as expected

How can I improve the empty space in HTML after PHP processing?

Modifying the background color using highcharts.js

Unable to insert a new module position within the vertex joomla framework

Creating Tailored Breakpoints with Bootstrap for a Unique Design

What is the process for deleting an animation using JavaScript, and how can the background color be altered?

unable to connect to the web service using webview

Issue with custom function not being triggered by datepicker onSelect in Internet Explorer with JQuery

In mobile view, the grid text should be positioned on top of the input field

What is the best way to eliminate the border around an image when including a hyperlink?

Linking various nodes together using the capabilities of the Web Audio API

Ajax insertion was successful, but the database records are empty

How to create a see-through background using three.js

"Encountering issues with calling a Node.js function upon clicking the button

Ways to remove content that exceeds the boundaries of a div element

Error: Unexpected syntax error occurred due to the use of '===' operator

Twofold Arrow Styling in CSS

Oops! Looks like we have encountered an issue with reading the property 'checked' of nothing

Nested scrolling bars within each other

Include a blank area on the right side and a duplicated image on the bottom right using Bootstrap