Meta Box

Change custom field column widths displayed through shortcode

Support › MB User Profile › Change custom field column widths displayed through shortcodeResolved

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 7, 2023 at 2:45 AM #40419
    SamSam
    Participant

    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

    February 7, 2023 at 11:18 PM #40438
    PeterPeter
    Moderator

    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.

    February 7, 2023 at 11:25 PM #40439
    SamSam
    Participant

    Hi Peter - Here are some screenshots. I have the input box size of zipcode set to 5.

    screenshots

    thanks
    sam

    February 8, 2023 at 9:58 PM #40447
    PeterPeter
    Moderator

    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.

    February 8, 2023 at 10:06 PM #40449
    SamSam
    Participant

    Hi Peter - Same response, unfortunately.

    https://imgur.com/a/KN1lBTf

    Sam

    February 8, 2023 at 10:53 PM #40454
    PeterPeter
    Moderator

    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.

    February 10, 2023 at 1:27 AM #40471
    SamSam
    Participant

    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

    February 10, 2023 at 10:07 PM #40481
    PeterPeter
    Moderator

    Hello,

    The IDs of the two input fields are: user_pass and user_pass2.

    February 10, 2023 at 10:50 PM #40484
    SamSam
    Participant

    Perfect.

    Thank you,
    Sam

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.