Skip to main content

Easily Get A Computed Element Style in JavaScript

Problem
I had an assignment to build a dynamic form in vanilla JavaScript / CSS for a landing page. Specifically, I made the label z-indexed over the textbox field and whenever the user focused on the field, the label will animate up to the top of the field. To me, this solves the placeholder text disappearing as soon as the user starts typing then forgets what the field is. (funny, I know.  But it happens to me all the time).

I ran into a problem where if the label’s text length is too long, the text would wrap to the next line obstructing the user.  Originally, I thought I needed a fixed 20px, but I needed to know the exact height of the label before shooting it up above the field.
Solution
Alas, I learned about a JavaScript function called getComputedStyle which solved my problem perfectly.  Once I got the computed height of the label, I made sure the margins were adjusted so the label would clear the field.
Code
Here’s an ES6 function you can drop on your class and begin using:

getElementHeight(element){

     let calcHeight = window.getComputedStyle(element, null)
            .getPropertyValue("height")
            .replace('px', '');

     if(!isNaN(calcHeight)){
         calcHeight = parseInt(calcHeight);
     }

     return calcHeight;
 }

Here’s how I use it:

let calcHeight = this.getElementHeight(myLabel);

myLabel.style.marginTop = ('-' + calcHeight + 'px');
myField.style.marginTop = (calcHeight + 'px');

Essentially, I return the numeric height of the label after a substring replacement and simple validation.  This will return the height as a number. Of course, you can take the guts of this function and get other style settings, not just height.
Summary
Ideally, you never want to update your styles directly in the JavaScript except by adding/removing classes, but sometimes you need to bite the bullet and use the awesome tools JavaScript provides for us!



Comments

Post a Comment

Popular posts from this blog

Resolved Sitecore "If you publish now, the selected version will not be visible on the web site" warning

The Problem:   Unable to publish any Sitecore item within a particular site, even out of the workflow. Rather, a warning reads " If you publish now, the selected version will not be visible on the web site " What I've Discovered: I couldn't publish any item in the site, not just one or two I viewed all parent items of the items in question The main home page displayed a different warning " This item will never be published because it's publishable option is disabled " Another sitecore developer reminded me of the standard fields option View --> check standard fields to show all standard page fields Found out that somebody checked Never Publish within the publishing section The Fix: After I unchecked the checkbox and saved the change, I was able to publish again.  :) Conclusion: Looks like another Sitecore user thought the children items would not be affected by this change.  Lesson  learned.
Post a Comment
Read more

[Resolved] Sitecore ParseException: End of string expected at position...

Problem:  I have a line of code that uses Sitecore Fast Query to pull all items + children starting with a site item, like so: Item [] allItems = db.SelectItems( "fast:" + sitecorePath + "//*" ); Unfortunately, I would get a Sitecore parsing error at runtime: ParseException: End of string expected at position... Turns out Sitecore doesn't like hyphens ('-') in any sitecore path when using fast query, which I have a few distributor sites in a folder which contained hyphens. Solution: I create a simple method that resolves a sitecore path to be Sitecore fast query friendly:             string sitecorePath = "" ;             if (siteItem.Paths.FullPath.Contains( "-" ))             {                 String [...
Post a Comment
Read more

Create a File Upload Service using Node.js / Express / Multer

Problem:    I needed to create a form that essentially uploads a file to a server, then posts the rest of the form data to a second server with the new file name. In other words, post the image to an “Image” server, then posts the form data (with the file URL) to a “Form Data” server. Solution:  Create an Express server that uses the “Multer” library to accomplish this. The Code: Create the express server and have it listen on a specific port var express = require( 'express' ); var app = express (); app . listen ( 3313 , function (){     console . log ( 'listening on port 3313' ); }); Install Multer.  Read here: https://www.npmjs.com/package/multer Include Multer to your express app.  We’ll be tweaking the storage properties so you can name the file whatever you like. At the end, you should have an “upload” object you’ll be using in the next step. be sure to change the file destination of your choice. var expre...
6 comments
Read more