Support Forum
Support › MB User Profile › Change custom field column widths displayed through shortcodeResolved
Hi - I have this problem on MB User Profile, as well as on other MB extensions where I'm using MB's short code on the front end to display the custom fields. I see there's a column in custom fields for "Size of the input box" but this doesn't work on the front end for me. I'm assuming this is for backend renderings.
For example, where I have a custom field for a 5 digit zipcode, I want a very short/narrow width. Currently, this one, as well as all other custom fields, are full width...which looks bad (and unprofessional).
Is there a workaround? Or am I misunderstanding something?
P.S. I don't want to use the Columns setting in custom fields, as it distorts the text (and flow).
Thank you,
Sam
Hello Sam,
This option is available when you use the text
field and it works correctly on my demo site in both backend and frontend (shortcode). Can you please share some screenshots of the issue on your site and share the site URL? I will help you to check the issue.
Hi Peter - Here are some screenshots. I have the input box size of zipcode set to 5.
thanks
sam
Hello Sam,
I see you are using the number
field and it might not work correctly. Please use the text
field and check this feature again.
Hello,
Can you please try to deactivate all plugins except Meta Box, MB AIO and switch to a standard theme of WordPress then recheck this issue? The width of the input box can be affected by the style of the theme or a plugin on your site.
Hi Peter - I did re-check by switching to a different theme (Twenty Twenty Three) and it did work. So, then I reached out the the theme creator (Beaver Builder - Beaver Builder Theme) and they said the following:
Good morning.
I looked into that field, and CSS wise, this is what makes it wide:
.rwmb-input input, .rwmb-input textarea, .rwmb-input select {
max-width: 100%;
}It comes from Metabox itself.
You could add the following code in the Customizer's CSS area, and set the width percentage for whatever you want. It will then adjust that zipcode field's width..
#zipcode {
max-width: 10%;
}
SO...I have added the CSS to change most fields, but can't figure out the "new password" and "confirm new password" field IDs from the Edit Profile. I've tried using the following, without a response:
id_password
id_password2
What are the correct IDs, as they come from [mb_user_profile_info id="rwmb-user-info"]?
Thanks,
Sam
Hello,
The IDs of the two input fields are: user_pass
and user_pass2
.
Perfect.
Thank you,
Sam