Chris Bolson
Chris Bolson
PostsComments
KPCKevin Powell - Community
Created by Myra on 3/26/2025 in #front-end
Digital clock
There may be a specific reason as to why you are doing it this way but, in my experience, most clocks get the time every second (or minimum unit of time of the clock). That way you don't have to do any calculations based on number of seconds or anything.
... but after 60 they aren't starting from 1 when the page refreshes than it happens
When you call clearInterval() you are stopping the interval so the clock is stopping.
at 10:28:60 the minutes should be updated to 29 and seconds
I can't see anything in your code which would increase the minutes (or hours) when the seconds reach 60.
15 replies
KPCKevin Powell - Community
Created by bonzo on 3/25/2025 in #front-end
Lining up table header borders with table body borders
If the table head and table body all form part of the same table, the borders will line up automatically. I notice in your code that you haven't defined a style or color for the thead th borders. You need to define these for the border to appear.
25 replies
KPCKevin Powell - Community
Created by mic on 3/24/2025 in #front-end
drag and drop but my text is in the way
The difference appears to be in the pug where you defined the draggable I have specifically defined li.draggable.label-content(draggable="true") whereas you defined li.draggable.label-content(draggable) So yours compiles to <li class="draggable label-content" draggable="draggable"> rather than <li class="draggable label-content" draggable="true"> If I modify your pug with draggable="true" they drag correctly.
68 replies
KPCKevin Powell - Community
Created by mic on 3/24/2025 in #front-end
drag and drop but my text is in the way
I was just comparing them - I can't see anything obvious.. https://codepen.io/cbolson/pen/QwWxzZ
68 replies
KPCKevin Powell - Community
Created by mic on 3/24/2025 in #front-end
drag and drop but my text is in the way
at least it did in my fork of your code 🤔
68 replies
KPCKevin Powell - Community
Created by mic on 3/24/2025 in #front-end
drag and drop but my text is in the way
If you add the draggable attribute to the draggble elements (li) and change the JS selector to [draggable] it resolves the issue.
68 replies
KPCKevin Powell - Community
Created by Cracleur on 3/24/2025 in #front-end
Firefox flexbox column wraps, but parent width doesn’t expand (works fine in Chrome)
I believe that this is a known browser issue that was present in most browsers for a long time. One "hack" that appears to work (just tested it on your code) is, rather than define the flex-direction you define the text direction , rotating it on the parent container and then rotating it back on the child elements 
.container {
  display: flex;
  /*flex-direction: column;*/
  writing-mode: vertical-lr;
  flex-wrap: wrap;
  ... other styles
}
.item {
  writing-mode: horizontal-tb;
  ... other styles
}
.container {
  display: flex;
  /*flex-direction: column;*/
  writing-mode: vertical-lr;
  flex-wrap: wrap;
  ... other styles
}
.item {
  writing-mode: horizontal-tb;
  ... other styles
}
You can see my test, forked from your code here (I will delete later). I added a resize handle on the container so you can see it in action.
4 replies
KPCKevin Powell - Community
Created by Nilesh Chandgude on 3/21/2025 in #front-end
Tailwind CSS
This should probably go in https://discord.com/channels/436251713830125568/1129121766531416084
4 replies
KPCKevin Powell - Community
Created by StainingLamb272 on 3/16/2025 in #front-end
Fixed Footer
Can someone tell me where I'v e gone wrong?
In your code you haven't done anything to place the footer at the bottom. Probably the simplest way to achieve what you want to do is to place the header, content and footer in a wrapper (or use the body itself though some people don't like doing that). Give the wrapper a min height of the viewport and display grid. Finally use grid-template-rows to let the main content area expand to fill the available space btween the header and footer. 
<div class="wrapper">
  <header></header>
  <main></main>
  <footer></footer>
</div>
<div class="wrapper">
  <header></header>
  <main></main>
  <footer></footer>
</div>
.wrapper{
  min-height: 100svh;  
  display: grid;
  grid-template-rows: auto 1fr auto:
}
.wrapper{
  min-height: 100svh;  
  display: grid;
  grid-template-rows: auto 1fr auto:
}
By defining "auto" for the header and footer rows they will automaticall take up the space required, leaving the rest of the viewport (minimum) for the content. If the content is longer than the viewport height, it will expand normally, pushing the footer down.
8 replies
KPCKevin Powell - Community
Created by Vito on 3/15/2025 in #front-end
Layout on mobile browsers breaks when grid-template-columns is not explicitly set.
It may be due to defining the aspect ratio 🤔 If you don't define a grid-column width (as is the case for the smaller viewport) the width will be "auto" and therefore defined by the content within it. As you have given both the figure and the image an aspect ratio, these are "forcing" the width and the height which is possibly causing the issue that you are having (I can't reproduce it with your code which is why I thought that it may be something else that you haven't included). By defining grid-template-columns: 1fr you are telling the column to have 100% width of the parent rather than the width of the children.
6 replies
KPCKevin Powell - Community
Created by Vito on 3/15/2025 in #front-end
Layout on mobile browsers breaks when grid-template-columns is not explicitly set.
You shouldn't need to add grid-cols-1 or remove the grid. Where do you expect the text to go? I have just a quick test based on your code and didn't have the same issue. I suspect that something else is going on that is affecting this. Can you create a minimal Codepen (or similar) to demonstrate the issue? Note - seeing as you are using the figure element, it would make sense to use the figcaption element for the accompanying text.
6 replies
KPCKevin Powell - Community
Created by Abdul Ahad⚡ on 3/13/2025 in #front-end
Position: fixed is not working as expected
In summary, you need to not use "transform" on the parent for the child element (the video in your case) to be fixed relative to the viewport.
10 replies
KPCKevin Powell - Community
Created by Abdul Ahad⚡ on 3/13/2025 in #front-end
Position: fixed is not working as expected
... transform creates a new local coordinate system, as per W3C spec: In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants. This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.
https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children
10 replies
KPCKevin Powell - Community
Created by Abdul Ahad⚡ on 3/13/2025 in #front-end
Position: fixed is not working as expected
My suggestion was that you remove those properties, not add anything
10 replies
KPCKevin Powell - Community
Created by roelof on 3/14/2025 in #front-end
Overlapping css grid problem
What size do you want it be?
17 replies
KPCKevin Powell - Community
Created by Abdul Ahad⚡ on 3/13/2025 in #front-end
Position: fixed is not working as expected
If you don't add these styles to the parent the video/images are being placed as you would expect with "fixed". 
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
  transform-style: preserve-3d;
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
  transform-style: preserve-3d;
There is too much going on in the code for me to be able to debug it further right now (though knowing me I will keep at it). I am not sure what those styles are actually supposed to be adding to the effect as they all appear to have default values - could you try without them?
10 replies
KPCKevin Powell - Community
Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
yes, that won't work in FF yet
116 replies
KPCKevin Powell - Community
Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
Try adding top: 0; to the dialog
116 replies
KPCKevin Powell - Community
Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
It could be the timing function that you are using. Try something simpler to see if that resolves the jumping issue.
116 replies
KPCKevin Powell - Community
Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
Why don't you translate the whole dialog rather than just the contents?
116 replies