CSS to expand additional fields in new user registration form?

Forum|Forum|1 year ago
February 14, 2024
3 replies
62 views

Scott Foster
Influencer III

Good morning everyone,

I am hoping someone else has had to fix this issue. We have added an added field about opting in/out of email lists and only a portion is visible. Has anyone else had to expand these fields to show all of the test?

Any and all help greatly appreciated!

Scott Foster

Havent tackled this one - but I am listenin…..

I figured it out.

select-11 & select-12 relate to the specific fields we wanted to resize, so you’ll have to adjust that value to match what you have. We also had to move the dropdown response lower, as once we were able to expand the question field, the answer field was behind.

Hope this is of value to someone.

/*Resize additional fields*/
div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-11-options'] .ui-input-select-single-value.ng-star-inserted,
div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-12-options'] .ui-input-select-single-value.ng-star-inserted  {
	position: absolute;
  bottom: 8;
  left: 0;
}



div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-11-options'] .ui-input-select-value,
div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-12-options'] .ui-input-select-value  {
	height: 190px;
}

@media (max-width: 767px) {
	div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-11-options'] .ui-input-select-value,
div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-12-options'] .ui-input-select-value  {
		height: 68px;
	}
} 


div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-11-options'] #ui-input-select-11-main-label, 
div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-12-options'] #ui-input-select-12-main-label {
	white-space: normal
}

div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-11-options'] label,
div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-12-options'] label {
	width: calc(100% - 70px);
}

+11

dklinger
Hero III
Forum|Forum|1 year ago
February 14, 2024

Havent tackled this one - but I am listenin…..

Like

Scott Foster
Author
Influencer III
Forum|Forum|1 year ago
February 29, 2024

Havent tackled this one - but I am listenin…..

I figured it out.

select-11 & select-12 relate to the specific fields we wanted to resize, so you’ll have to adjust that value to match what you have. We also had to move the dropdown response lower, as once we were able to expand the question field, the answer field was behind.

Hope this is of value to someone.

/*Resize additional fields*/
div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-11-options'] .ui-input-select-single-value.ng-star-inserted,
div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-12-options'] .ui-input-select-single-value.ng-star-inserted  {
	position: absolute;
  bottom: 8;
  left: 0;
}



div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-11-options'] .ui-input-select-value,
div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-12-options'] .ui-input-select-value  {
	height: 190px;
}

@media (max-width: 767px) {
	div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-11-options'] .ui-input-select-value,
div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-12-options'] .ui-input-select-value  {
		height: 68px;
	}
} 


div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-11-options'] #ui-input-select-11-main-label, 
div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-12-options'] #ui-input-select-12-main-label {
	white-space: normal
}

div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-11-options'] label,
div.registration-standard-content div.ui-stepper-steps div:nth-of-type(2) .ui-input-select-container[aria-controls='ui-input-select-12-options'] label {
	width: calc(100% - 70px);
}