Styling ClickDimensions Web Forms Using Code Editor

Styling ClickDimensions Web Forms Using Code Editor

ClickDimensions has a drag-and-drop feature to build web forms. I’ve just recently started learning and using ClickDimensions in our project. Building web forms is easy due to its drag and drop feature, but the properties of the controls are limited to just font properties. How about the other styling options? Good thing there’s the Code Editor that allows developers to modify the CSS and JavaScript of the web forms.

The Code Editor can be found in the menu bar of the Web Designer.

code editor

The Code Editor window displays the web form’s HTML, CSS and JavaScript. There’s also a preview box where you can easily view the updated changes you’ve applied in your CSS and JavaScript without going through its URL. Just click on the Refresh button and the updates will display.

Styling ClickDimensions Web Forms Using Code Editor 2

Let’s now try to modify one textbox added in our web form. But the first question here is how to get the ID of the textbox because in CSS, the first thing you need is the ID of the component to modify its properties. With the help of the Developer Tool, I can easily get the ID of one textbox.

We’ll use country code for our example. Since the country code consists of 2 to 3 characters only, we need to shrink the width of the text box to 50. To do this, use the developer tool to get the ID of the text box.

get ID of textbox

get ID of textbox 2

Go back to the CSS Editor and add the specific property you want to modify.



Refresh the preview box to see the changes.

refresh preview box


ClickDimensions control styling options are limited to font styling. The code editor is a big help when we want to extend the styling of the web controls in addition to what is provided out-of-the-box. It would be better if all styling options are included out-of-the-box, but still, it’s a good way of getting closer to learning CSS.

In my next blog, we’ll talk about applying JavaScript in Web Forms.

Hope this blog helps you.