Highlighted

placement of the input component and formatting

Adobe Community Professional ,
Jun 24, 2020

Copy link to clipboard

Copied

I am having some issues (ANCC 2019 and 2020 alike) with input components I format dynamically.

They appear shifted and have different height tho the height is assigned in CSS on different computers.

 

Below is the code and some screenshot to show the difference. 

correct

resdesign_0-1593033919199.png'

incorrect position

resdesign_1-1593033982087.png

 

 

//  ***************** initial formatting  ***********************
setTimeout(function () {
	$(".ui-textinput").attr("autocomplete","off");
	$(".ui-textinput").css({
		"color": "black",
		"background": "#C1F7F2",
		"font-family": "'Nunito', sans-serif",
		"border": "none",
		"font-size": 24,
		"font-weight": 600,
		"text-align": "center",
		"height": 33
	});

}, 0);

function changetoLowerCase(evt) {
	// allow only letters
	var regex = /[^a-zA-Z]/g;
	evt.target.value = evt.target.value.replace(regex, "");
	// limit the number of characters to the longest word + 1
	evt.target.maxLength = 12;

}
// ******************* events: keyup, focus, blur ****************************
// Note: blur removes the focus on an element

S2formatting.forEach(formatBox);

function formatBox(box) {
	$("#dom_overlay_container").on("keyup", box, changetoLowerCase.bind(this));
	$("#dom_overlay_container").on("focus", box, addBorder.bind(this));
	$("#dom_overlay_container").on("blur", box, removeBorder.bind(this));

	function addBorder() {
		$(box).css({
			"border": "3px solid black"
		});
	}
	function removeBorder() {
		$(box).css({
			"border": "none"
		});
	}

}

 

 

Adobe Community Professional
Correct answer by resdesign | Adobe Community Professional

OK. I found out that setting the height with CSS is what messes things up. I sized the components into the UI using a reference image and tested on all computers and it seems to be OK.

Views

54

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

placement of the input component and formatting

Adobe Community Professional ,
Jun 24, 2020

Copy link to clipboard

Copied

I am having some issues (ANCC 2019 and 2020 alike) with input components I format dynamically.

They appear shifted and have different height tho the height is assigned in CSS on different computers.

 

Below is the code and some screenshot to show the difference. 

correct

resdesign_0-1593033919199.png'

incorrect position

resdesign_1-1593033982087.png

 

 

//  ***************** initial formatting  ***********************
setTimeout(function () {
	$(".ui-textinput").attr("autocomplete","off");
	$(".ui-textinput").css({
		"color": "black",
		"background": "#C1F7F2",
		"font-family": "'Nunito', sans-serif",
		"border": "none",
		"font-size": 24,
		"font-weight": 600,
		"text-align": "center",
		"height": 33
	});

}, 0);

function changetoLowerCase(evt) {
	// allow only letters
	var regex = /[^a-zA-Z]/g;
	evt.target.value = evt.target.value.replace(regex, "");
	// limit the number of characters to the longest word + 1
	evt.target.maxLength = 12;

}
// ******************* events: keyup, focus, blur ****************************
// Note: blur removes the focus on an element

S2formatting.forEach(formatBox);

function formatBox(box) {
	$("#dom_overlay_container").on("keyup", box, changetoLowerCase.bind(this));
	$("#dom_overlay_container").on("focus", box, addBorder.bind(this));
	$("#dom_overlay_container").on("blur", box, removeBorder.bind(this));

	function addBorder() {
		$(box).css({
			"border": "3px solid black"
		});
	}
	function removeBorder() {
		$(box).css({
			"border": "none"
		});
	}

}

 

 

Adobe Community Professional
Correct answer by resdesign | Adobe Community Professional

OK. I found out that setting the height with CSS is what messes things up. I sized the components into the UI using a reference image and tested on all computers and it seems to be OK.

Views

55

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 24, 2020 0
Adobe Community Professional ,
Jun 25, 2020

Copy link to clipboard

Copied

OK. I found out that setting the height with CSS is what messes things up. I sized the components into the UI using a reference image and tested on all computers and it seems to be OK.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2020 0