Fix Layout of the Field with Salutation

Hello, I made a customization to add salutation first name for the customer module. But why is it the width is to small and not maximize.


check my codes;

          array (
            'name' => 'first_name',
            'label' => 'LBL_FIRST_NAME',
            'customCode' => '{html_options name="salutation" id="salutation" options=$fields.salutation.options selected=$fields.first_name.value}&nbsp;<input name="first_name"  id="first_name" size="25" maxlength="25" type="text" value="{$fields.first_name.value}">',
          ),

please disregard, no issue at all. it was because of my screen.

@waraikobuot
There are some records in style.css . For example:

...
@media (min-width: 769px)
.col-xs-12 [field=first_name].edit-view-field input[type="text"]#first_name {
    width: 29%;
}
...

You can change this if you create file:
‘custom/themes/SuiteP/css/<theme_name>/style.css’

thank you for your response. It was fix already <3

Hello, I was able to fix for the first name field but for the mobile number the layout output is deferent even I used same codes.

@waraikobuot

The problem is only with css. You should analyze it in more detail.

But why is it its working on other field? I did nothing on css part. Check screenshot below

@waraikobuot

I can’t write anything because I can’t see your code.
If you use the “customCode” parameter for the “Mobile number” field, you can add a “style” parameter for the field tag.

Hi @p.konetskiy, heres my code. the code of mobile number and first name are the only the field name and id are different.

          array (
            'name' => 'first_name',
            'label' => 'LBL_FIRST_NAME',
            'customCode' => '{html_options name="salutation" id="salutation" options=$fields.salutation.options selected=$fields.salutation.value}&nbsp;<input name="first_name"  id="first_name" size="25" maxlength="25" type="text" value="{$fields.first_name.value}">',
          ),

@waraikobuot

You write a standard code for the field salutation and first_name.
If the “mobile number” field differs from “first_name” field only by the “name” and “id” attributes you should add the code for the “mobile number” field to the custom “style.css” as I wrote in the post :

Hi @p.konetskiy , this codes won`t fix the layout issue it is still the same.

@waraikobuot
It’s css only or attribute “size” or html tag “input”.
Look in your browser console and make sure all files for the page are loading.

This is my examples:

image
@p.konetskiy , how did you do that?

@waraikobuot

There is the code in the parameter ‘customCode’ of the field in file ‘editviewdefs.php’. You need knowledge html, css and tpl to create corretly code.