# Positioning styled Dom elements

**URL:** <https://discourse.processing.org/t/positioning-styled-dom-elements/13369>\
**Category:** Coding Questions\
**Created:** [August 14, 2019, 1:05am UTC](https://discourse.processing.org/t/positioning-styled-dom-elements/13369 "2019-08-14T01:05:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![rkdnson](https://avatars.discourse-cdn.com/v4/letter/r/cc9497/32.png) [@rkdnson](https://discourse.processing.org/u/rkdnson)\
**Post date:** [August 14, 2019, 1:05am UTC](https://discourse.processing.org/t/positioning-styled-dom-elements/13369/1 "2019-08-14T01:05:42Z")

</div>

I am having trouble positioning a checkbox after calling the style.transform function to scale it. In posting this I am finding similar topics using select() but am still unsure.

Below, my goal would be that the checkbox is scaled, and the position is changed within draw.

Thank you all for your time!

```auto
var checkbox;

function setup() {
  createCanvas(400, 400);
  checkbox = createCheckbox('hello world', false);
  checkbox = checkbox.elt.getElementsByTagName('input')[0];
  checkbox.style.transform = 'scale(2)';
}

function draw() {
  background(220);
  checkbox.position(width / 2, height / 2);
}

```

example sketch here: [https://editor.p5js.org/TedCharlesBrown/sketches/1TOoFvT9o](https://editor.p5js.org/TedCharlesBrown/sketches/1TOoFvT9o)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [August 14, 2019, 1:45am UTC](https://discourse.processing.org/t/positioning-styled-dom-elements/13369/2 "2019-08-14T01:45:31Z")

</div>

```auto
var checkbox;

function setup() {
  createCanvas(400, 400);
  checkbox = createCheckbox('hello world', false);
  checkbox.position(width / 2, height / 2);
  checkbox.style.transform = 'scale(2)';

//?? checkbox = checkbox.elt.getElementsByTagName('input')[0];
}

function draw() {
  background(220);
}

```

reassigning checkbox to something else makes it unusable as pointer to the checkbox.