Select element is missaligned OOTB, what to do?

Hello? how can this be formatted properly? https://bathroomhut.com.au/bathroom-hamptons-tallboy-marquis/

We can see that you are using the premium version of our plugin.

As per the WordPress forum policy, we can’t answer premium related questions on this forum. Could you please raise a ticket through our website? We hope our technical team will be able to help you.

Thank you!

I’m using the FREE version. So help me, please. I need this formatted.

I kinda od got the desktop styling working but it doesn’t work on mobile i.e. the label should break onto the Select field for mobile, not stay beside it.

Also on the desktop, I can’t get it perfectly aligned, please help!!

• This reply was modified 2 years, 11 months ago by bathroo.
• This reply was modified 2 years, 11 months ago by bathroo.

You can try the below style in your theme’s Additional CSS.

table.thwepo-extra-options td:nth-child(odd) {
    width: 155px;
}
form.cart table.thwepo-extra-options select {
    width: 77%;
}

We hope this will help.

Thank you!

I added the CSS. It seems we are close but still not full aligned, please help!!

The label is not aligned to the other Select labels and when in Mobile view. The label does not move to the top and the select box moves under it. Please help!!

I really like this plugin better than the other but I can’t consider purchasing it unless I can get it styled correctly!! please help!!

Hello @themehigh?

• This reply was modified 2 years, 11 months ago by bathroo.

Can you please raise a ticket through our website? We hope our technical team will be able to help you.

Thank you!

Ok, I needed to change the code to make it work properly. I’ve changed the get_html_select class to:

	private static function get_html_select($name, $field, $section, $value){
		$props = self::prepare_field_props($field, $name, $value);
		$placeholder = $field->get_property('placeholder');

		$input_html = '<select style="width: 75%; max-width: 260px;" '.$props.' >';
		$input_html .= $placeholder ? '<option value="">'. esc_attr__($placeholder, 'woo-extra-product-options') .'</option>' : '';
		foreach($field->get_property('options') as $option_key => $option_text){
			$selected = ($option_text === $value) ? 'selected' : '';
			$input_html .= '<option value="'.esc_attr($option_text).'" '.$selected.'>'.esc_attr__($option_text, 'woo-extra-product-options').'</option>';
		}
		$input_html .= '</select>';

		$html = self::prepare_field_html_input($field, $section, $input_html);
		return $html;
	}

ad also changes your prepare field to

	private static function prepare_field_html_input($field, $section, $input_html){
		$html = '';
		if($input_html){
			$field_type = $field->get_property('type');
			//echo $field_type;
			
			$title_position = $field->get_property('title_position');
			$wrapper_class  = THWEPOF_Utils::convert_cssclass_string($field->get_property('cssclass'));
			
			$title_cell_with = $section->get_property('title_cell_with');
			$field_cell_with = $section->get_property('field_cell_with');
			
			$title_cell_css = $title_cell_with ? 'width:'. esc_attr($title_cell_with) .';' : '';
			$field_cell_css = $field_cell_with ? 'width:'. esc_attr($field_cell_with).';' : '';
			
			$title_cell_css = $title_cell_css ? 'style="'.$title_cell_css.'"' : '';
			$field_cell_css = $field_cell_css ? 'style="'.$field_cell_css.'"' : '';
			
			$title_html  = self::get_title_html($field);
			//$title_html .= self::get_required_html($field);
						
			if($field_type === 'hidden'){
				$html .= '<label class="'. esc_attr($wrapper_class) .'" >';
				$html .= $input_html;
				$html .= '</label>';

			}else{
				$html .= '<tr class="'. esc_attr($wrapper_class) .'" >';

				if($field_type === 'checkbox'){
					$html .= '<td class="value" colspan="2">'. $input_html .' '. $title_html .'</td>';

				}else if($field_type === 'heading' || $field_type === 'paragraph'){
					$html .= '<td colspan="2">'. $input_html .'</td>';

				}else{
					if($title_position === 'above'){
						$html .= '<td colspan="2" class="label abovefield">'. $title_html .'<br/>'. $input_html .'</td>';
					}else{
						//$html .= '<td class="label leftside" '.$title_cell_css.'>'. $title_html .'</td>';
						$html .= '<th class="label cell" style="padding: 0px 50px 0px 0px;" '.$title_cell_css.'>'. $title_html .'</th>';

						$html .= '<td class="value cell" '.$field_cell_css.'>'. $input_html .'</td>';
						//$html .= '<td class="value leftside" '.$field_cell_css.'>'. $input_html .'</td>';
					}
				}

				$html .= '</tr>';
			}
		}	
		return $html;
	}

The changes so far have at least made it look the same and work with this theme.

Is there anything wrong with the changes made apart from hardcoding some styling attributes? I understand that ay updates would overwrite these changes?

It also works now properly when breaking to mobile view

As you have mentioned the changes made in the plugin file will get lost on update. So could you please check by adding the inline styling you have added in the theme’s Additional CSS?

form.cart table.thwepo-extra-options select {
        width: 75%;
        max-width: 260px;
}
form.cart table.thwepo-extra-options td.label{
        padding: 0px 55px 0px 0px;
}
form.cart table.thwepo-extra-options td.leftside{
        display: block;
}

We hope this will help.

Thank you!

ok, I’ll roll back the changes and see if it works. I also played with your plugin on the test site. It’s good and what I need. I’ll buy it then if I have to change the code still I will.

Thank you for letting us know ??