I have the below design to be created dynamically
I have this layout & wanted to convert this using HTML CSS. My requirement is that, when any column is deleted another column should increase the space in place of a deleted column.
Also, the same is needed when someone removes any row, the previous row should take place of that row.
To build the grid: You can archive this by using a loop inside a loop. For Styling i use flex box system.
const c = document.querySelector('div');
for (let i = 0; i < 4; i++) {
const row = document.createElement('div');
row.setAttribute('class','row')
for (let j = 0; j < 4; j++) {
const cell = document.createElement('div');
cell.setAttribute('class','cell')
cell.innerHTML = i + ' - ' +j
row.append(cell);
}
c.append(row)
}
.container {
background: yellow;
height:100vh;
}
.row {
display: flex;
}
.cell {
border: 1px solid black;
padding: 5px;
width:25%;
height: 25vh;
}
<div class="container"></div>
Related
I am trying to make playing cards using CSS. I followed a YouTube video to make them and they were fine, but now I want to draw multiple cards next to each other, drawing 1 every time I click a button (I am trying to make Blackjack for a school project). The problem is that the cards will be placed under the previous one, and I have tried fiddling with it a bit and I think I have solved one of the issues but I have created another one. Let me show you.
Before, card-container had position absolute which is why i think was a problem, but now the bottom right number and suit is not even inside the container, also it still doesn't place the cards next to each other.
JavaScript that is executed when I click a button
I know that there is a bunch of stuff that there are other problems mainly in the JavaScript like the index of all getClassName, I know how to solve that, this is what I just cant figure out.
var cardcon = document.createElement('div');
cardcon.className = "card-container";
document.getElementById('gugu').appendChild(cardcon);
//
var card = document.createElement('div');
card.className = "card";
document.getElementsByClassName('card-container')[0].appendChild(card);
//
var valuecon = document.createElement('div');
valuecon.className = "value-container container-top";
document.getElementsByClassName('card')[0].appendChild(valuecon);
//
var valuenumber = document.createElement('div');
valuenumber.className = "value-number";
valuenumber.textContent = "7";
document.getElementsByClassName('value-container container-top')[0].appendChild(valuenumber);
//
var valuesuit = document.createElement("div");
valuesuit.className = "value-suit";
valuesuit.innerHTML = "♥";
document.getElementsByClassName('value-number')[0].appendChild(valuesuit);
//
var valuedon = document.createElement("div");
valuedon.className = "value-container container-bottom";
document.getElementsByClassName('card')[0].appendChild(valuedon);
//
var valuenumber1 = document.createElement('div');
valuenumber1.className = "value-number";
valuenumber1.textContent = "7";
document.getElementsByClassName('value-container container-bottom')[0].appendChild(valuenumber1);
//
var valuesuit1 = document.createElement("div");
valuesuit1.className = "value-suit";
valuesuit1.innerHTML = "♥";
document.getElementsByClassName('value-number')[1].appendChild(valuesuit1);
.card-container {
position: relative;
}
.card {
width: 250px;
height: 350px;
border: 3.5px solid gray;
border-radius: 12.5px;
box-shadow: 10px 10px grey;
background-color: white;
}
.value-container {
position: absolute;
}
.value-number {
font-family: 'Abel', sans-serif;
font-size: 30px;
}
.value-suit {
font-size: 30px;
}
.container-bottom {
bottom: 8px;
right: 16px;
transform: rotate(180deg);
}
.container-top {
top: 20px;
left: 20px;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
<div id="gugu" class="grid-container"></div>
I have changed this part of your css to put down number inside your card
.card-container {width:250px;}
.card {width:100%;}
var cardcon = document.createElement('div');
cardcon.className = "card-container";
document.getElementById('gugu').appendChild(cardcon);
//
var card = document.createElement('div');
card.className = "card";
document.getElementsByClassName('card-container')[0].appendChild(card);
//
var valuecon = document.createElement('div');
valuecon.className = "value-container container-top";
document.getElementsByClassName('card')[0].appendChild(valuecon);
//
var valuenumber = document.createElement('div');
valuenumber.className = "value-number";
valuenumber.textContent = "7";
document.getElementsByClassName('value-container container-top')[0].appendChild(valuenumber);
//
var valuesuit = document.createElement("div");
valuesuit.className = "value-suit";
valuesuit.innerHTML = "♥";
document.getElementsByClassName('value-number')[0].appendChild(valuesuit);
//
var valuedon = document.createElement("div");
valuedon.className = "value-container container-bottom";
document.getElementsByClassName('card')[0].appendChild(valuedon);
//
var valuenumber1 = document.createElement('div');
valuenumber1.className = "value-number";
valuenumber1.textContent = "7";
document.getElementsByClassName('value-container container-bottom')[0].appendChild(valuenumber1);
//
var valuesuit1 = document.createElement("div");
valuesuit1.className = "value-suit";
valuesuit1.innerHTML = "♥";
document.getElementsByClassName('value-number')[1].appendChild(valuesuit1);
.card-container {
position: relative;
width:250px;
}
.card {
width:100%;
height:350px;
border:3.5px solid gray;
border-radius: 12.5px;
box-shadow: 10px 10px grey;
background-color: white;
}
.value-container {
position: absolute;
}
.value-number {
font-family: 'Abel', sans-serif;
font-size: 30px;
}
.value-suit{
font-size: 30px;
}
.container-bottom{
bottom: 8px;
right: 16px;
transform: rotate(180deg);
}
.container-top{
top:20px;
left:20px;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
<div id="gugu" class="grid-container">
</div>
I'm not sure if I understand your problem but this is my solution.
to card-container add {display : flex}.
&& to card add {position : relative} (this is to fix the numbers floating out of the card)
Use an Inline-Block
<div> tags use by default the css property display:block;. This means that they will automatically claim the entire row that you place them on. The simplest solution is to use an object with the display:inline-block; property. Inline-blocks have all of the same other properties as a block element, but there is no automatic line-break that happens after it. So, if you got your code working right in all other respects using <div>s doing this will fix your problem without having to get messy trying to manipulate your position attributes at all.
To really simplify your code, just use <span> tags instead of <div> tags for your cards since these are inline-blocks by default.
I am trying to dynamically add video element to a div with each video element has 50vh width. So technically after ever 2 video elements, 3rd video element would be below to the left of screen.
I have tried:
.views-container {
padding: 0;
margin: 0;
font-size: 0;
}
.video-inset {
outline: unset;
position: relative;
margin:0;
padding:0;
}
<div class="views-container background-black" id="container"></div>
And JS
// Current condition is for 3 video elements but could be more
// height width added dynamically and could be different depending on number of elements
// 3 video elements in a row (33.33vw width) if greater than 15 video elements
const container = document.getElementById('container')
const video = document.createElement('video');
video.style.height = 50+"vh"
video.style.width = 50+"vw"
container.append(video);
It works fine only until 2 containers. Please help.
You can use display: grid; on the .views-container. I have used a width and height of 50vw and 50vh. You need to change the 2 (the number of columns) in repeat(2, 1fr) to another number.
const container = document.getElementById('container');
let n = 20; //Total number of videos
for (var i = 1; i <= n; i++) {
const video = document.createElement('video');
if(n > 15){
container.style.gridTemplateColumns = "repeat(3, 1fr)";
video.style.height = "33.33vh";
video.style.width = "33.33vw";
} else{
video.style.height = "50vh";
video.style.width = "50vw";
}
video.src = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
container.append(video);
}
.views-container {
padding: 0;
margin: 0;
font-size: 0;
display: grid;
grid-template-columns: repeat(2, 1fr)
}
.video-inset {
outline: unset;
position: relative;
margin: 0;
padding: 0;
}
<div class="views-container background-black" id="container"></div>
I've dynamic table with fixed width and height. Using random function I get numbers of cells (3x3 - 7x7). Table is rendering well. On each cell I've click event which write one letter to pointed cell. There a problem, because row is expanding on height. How to stop it?
https://codepen.io/anon/pen/PdrNVM
let table = document.getElementById('table');
let tableSize = Math.floor((Math.random() * 5) + 3);
console.log(tableSize);
for (i = 0; i < tableSize; i++) {
let tr = document.createElement('tr');
for (j = 0; j < tableSize; j++) {
let td = document.createElement('td');
let content = document.createTextNode('');
td.appendChild(content);
tr.appendChild(td);
}
table.appendChild(tr);
}
let tds = document.querySelectorAll("td");
tds.forEach((td) => {
td.addEventListener("click", function() {
td.innerHTML = 'p';
});
});
table {
width: 200 px;
height: 200 px;
table-layout: fixed;
}
td {
background-color: green;
}
<h2>Click in cell</h2>
<table id='table'></table>
Just set a proper height and max-height like:
td {
background-color: green;
height: 50px;
max-height: 50px;
}
Set a fixed height for the tds. You don't need use the height for the table, let the child td make up the height.
table {
width: 200px;
table-layout: fixed;
}
td {
height: 60px;
background-color: green;
}
I've created a table that is contained within a section of my webpage and can scroll over the x and y axis to view everything. My problem so far is that the table can scroll along the y-axis when overflowing, but not the x-axis.
In my CSS, I've specified that on the overflow of both, they should both be able to scroll, but only the y-axis works. How would I ensure that the x-axis is scrollable also in order to see the rest of my table?
HTML:
<div id="table-wrapper-tasks">
<div id="table-scroll-tasks">
<script>
var rows = document.getElementById('dayRow').getElementsByTagName("td").length;
var cols = document.getElementById('employeeCol').getElementsByTagName("tr").length;
var rowT = null;
var drawTable = '<table class="tableTasks">';
for (let i = 0; i < rows; i++) {
drawTable += '<tr>';
for(let j = 0; j < cols; j++) {
drawTable += '<td>Testing</td>';
}
drawTable += '</tr>';
}
drawTable += '</table>';
document.write(drawTable);
</script>
</div>
</div>
CSS:
/* Settings for Tasks table */
.tableTasks {
float:right;
width:100%;
margin-top:5px;
empty-cells: show;
height:1000px;
line-height: 35px;
width: 100px;
}
#table-wrapper-tasks {
position: relative;
width:81%;
float:right;
}
#table-scroll-tasks {
overflow-x: scroll;
overflow-y: scroll;
max-height: 520px;
}
The problem is where you are specifying float property. If you remove it things should work fine.
.tableTasks {
width:100%;
margin-top:5px;
empty-cells: show;
height:1000px;
line-height: 35px;
width: 100px;
}
Is there a css / html way of truncating the from the start of a string? Showing the end characters instead?
For example:
string = "A0000000982091011328885"
truncated (show start) = "A000000098..."
truncated (show end) = "...1011328885"
I've tried changing the text direction but apart from that I'm out of ideas. I am completely capable of doing this in Javascript however it'd be nice not to.
I'm also doing this within a table td, so if there is some weird table specific <element> that'd be satisfactory.
Here is a "reverse ellipsis" pen made by Roman Komarov which does exactly what you want using just pure CSS. It just requires a specific HTML markup in order to work.
<div class="box ellipsis reverse-ellipsis">
<div class="ellipsis__content">Here is some long content that doesn't fit.</div>
</div>
It also uses pseudo-elements as the ellipsis and positioned them at the start of the text.
.reverse-ellipsis::after {
content: "…";
float: left;
width: 1em;
padding: 0 1px 0 1em;
margin: -1.35em -1em;
background: #FFF;
}
var rows = document.getElementById('container').childNodes;
for (var i=0, row; row = rows[i]; i++) {
trimLeft(row);
}
function trimLeft(row){
var trimContents = function(row, node){
while (row.scrollWidth > row.offsetWidth) {
var childNode = node.firstChild;
if (!childNode)
return true;
if (childNode.nodeType == document.TEXT_NODE){
trimText(row, node, childNode);
}
else {
var empty = trimContents(row, childNode);
if (empty){
node.removeChild(childNode);
}
}
}
}
var trimText = function(row, node, textNode){
var value = '...' + textNode.nodeValue;
do {
value = '...' + value.substr(4);
textNode.nodeValue = value;
if (value == '...'){
node.removeChild(textNode);
return;
}
}
while (row.scrollWidth > row.offsetWidth);
}
trimContents(row, row);
}
#container {
width: 200px;
border: 1px solid blue;
}
#container div {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
<div id="container" >
<div>A00000009sfsgsdfggdsf1011328885</div>
</div>