Adding text fo a file input using CSS Grid

I've been playing with CSS grid, listening to some podcasts and running through a few courses/tutorials.

One of the things that struck me as really useful is the ability to overlay elements on top of each other without using absolute positioning. I seee that this could be particularly useful when you want to have styled content display as part of a file upload process. Using CSS Grid you can have CSS stylable text visible and user selectable text that when clicked on opens a file dialogue.

As you can see in the below CodePen I've simply made a div with a 1:1 grid to act as the container. Into this container I have placed a div with my desired text followed by a input element of type file.
I've then styled these two elements to place them both in the first column of the first row.
This places the second element over the first (the input over the div).
I've then set the opacity on the input to 0 so all the user sees in the div.

See the Pen Text on a file upload using CSS Grid by Klee Thomas (@kleeut) on CodePen.

A caveat on this post. I'm still learning about front end web development. What I have shown here is a way that I have been able to achieve this. There may well be better ways to some definition of better.  If there is, or there is a way that I should improve on what is here I'd love to hear from you.

Comments

  1. Unknown24 August 2018 at 03:54

    That is extremely fascinating blog. you are an exceptionally talented blogger. Thanks for sharing this useful post. Get more CFA Audit | CA Firms | Warehouse Audit

    ReplyDelete
  2. Sherin infanta26 October 2018 at 04:26

    Great Post! Thank you such a great amount for sharing. This pretty post, it was so great to peruse and helpful to enhance my insight as refreshed one, Keep in blogging... Duplicate Payment Audit
    Duplicate Invoice Audit
    Fraud Prevention

    ReplyDelete

Post a Comment

Popular posts from this blog

Testing functions that use local storage with Jest

Testing functions that use the browsers local storage API seems easy when you know how. Here's a quick run down on how to mock it out with Jest if, like me, you're not familiar with how to test it. In the end it's very little code. Consider the following TypeScript code. import { get, save, key } from "./storage"; describe(save, () => { let setItem: jest.Mock; beforeEach(() => { setItem = jest.fn(); Storage.prototype.setItem = setItem; }); it("should call set item with predefined key and json object", () => { const valueToStore = { value: "toStore" }; save(valueToStore); expect(setItem).toHaveBeenCalledWith(key, JSON.stringify(valueToStore)); }); }); The key lines are in the beforeEach call where the setItem function of the Storage prototype is assigned to an instance of jest.fn() . This allows us to make assertions on what is passed to the local storage setItem API.
Read more

Solving `Empty reply from server` in DotNet Core

tldr; If you’re getting  curl: (52) Empty reply from server  check that you’ve configured Kestrel correctly. Long version I’ve started playing with Dotnet Core and Docker and have had a few issues getting started. I’ve had a little bit of experience with Docker, though only a little. I’ve worked with DotNet previously but never with Core. Environment The setup I’m using is a Windows laptop running Vagrant. Via Vagrant I’m running an Ubuntu Virtual Machine with the Docker run time installed. Feels a litle like inception. Key Problem The key problem that I’ve had getting started was having my Docker container not responding correctly to my curl commands. I get this: curl: (56) Recv failure: Connection reset by peer curl: (52) Empty reply from server Given that I’m not all that familliar with Docker or Dotnet Core I decided to remove one of the variables and set up a simple Express app in a different docker container. This validated that the commmand I was usin...
Read more

Can't resolve DNS Aws

Image
I recently registered a domain for a joke website  saladsimulator.com .  I figured I could whip up the page in a couple of minutes and throw it up on AWS using S3 static site hosting.  All done in an hour or so. What I thought would take an hour ended up in a multi-day ordeal while I tried to get the DNS to resolve.  I went through what seem to be the typical problems. The bucket wasn't configured to be accessible as a website. My bucket wasn't named the same as the website; the bucket needed to be saladsimulator.com to match the domain saladsimulator.com . I got these fixed up and found that it still wasn't working.  I added extra routes in to see if I could Alias or CNAME to a known working site, but they didn't work either. So it seemed it was a problem with something to do with the DNS configuration. After searching around I found a mention in a thread that the name server records in the hosted zone needed to match those in the domain name registrat...
Read more