2 columns form not adjusted in mobile view

Hi @makmerghen

Please try this one:

<script type="text/javascript">
jQuery(window).on("resize load", function() {
   setTimeout(function() {
      jQuery(".um.um-register").removeClass("uimob500");
      jQuery(".um.um-register").removeClass("uimob800");
      jQuery(".um.um-register").removeClass("uimob960");
   }, 1000);
});
</script>

Regards,

Dear @champsupertramp
thank you for the code
it is make it better a little but still make the user confuse
once doing click on field it bacame one column then became 2 column again and then for all fields
please check this video
https://www.mediafire.com/file/ivofoyzj18qgw6i/WhatsApp+Video+2022-01-04+at+20.15.49.mp4/file
best regards

Hi @makmerghen

Could you please try this one?

jQuery(window).on("resize load", function() {
   jQuery(".um.um-register").hide();
   setTimeout(function() {
      jQuery(".um.um-register").addClass("uimob340");
      jQuery(".um.um-register").removeClass("uimob500");
      jQuery(".um.um-register").removeClass("uimob800");
      jQuery(".um.um-register").removeClass("uimob960");
      jQuery(".um.um-register").fadeIn();
   }, 100);
});

Regards,

Dear @champsupertramp
I tried it and it gave only one column in stead of tow
so please advise
best regards

Hi @makmerghen

Sorry, but I’m confused. Do you want to show 1 column or 2 columns?

Regards,

Dear @champsupertramp
I did 2 column in registration form and I need it to be 2 column in front end in mobile
but it did this issues as I described to you before

hope its clear now
best regards

Hi @makmerghen

Please try the following:

jQuery(window).on("resize load", function() {
   setTimeout(function() {
      jQuery(".um.um-register").removeClass("uimob340");
      jQuery(".um.um-register").removeClass("uimob500");
      jQuery(".um.um-register").removeClass("uimob800");
      jQuery(".um.um-register").addClass("uimob960");
  
   }, 1000);
});

Regards,

Dear @champsupertramp
on desktop appear 2 columns (right)
in mobile its appear only one column instead of 2 columns (wrong)
regards

• This reply was modified 2 years, 10 months ago by makmerghen.

Hi @makmerghen

Do you have other Javascript/Jquery customizations? If so, could you please share it here so we can review them?

Regards,

Dear @champsupertramp
I use this one for auto checked remember password button
<script type=”text/javascript”>
jQuery(document).on(“ready”, function() {
setTimeout(function() {
jQuery(“.um-login .um-field-checkbox-option”).trigger(“click”);
}, 100);
});
</script>

best regards

Hi @makmerghen

This code works for me:

jQuery(window).on("resize load", function() {
   setTimeout(function() {
      jQuery(".um.um-register").removeClass("uimob340");
      jQuery(".um.um-register").removeClass("uimob500");
      jQuery(".um.um-register").removeClass("uimob800");
      jQuery(".um.um-register").addClass("uimob960");
  
   }, 100);
});

Please see my test in the video clip:
https://drive.google.com/file/d/18UVjSYOcMDybBb-vENOUO6_wzQzw0FfA/view?usp=sharing

Regards,

Dear @champsupertramp
I disabled all plugin except UM and used default them instead of Astra theme and also I tired another mobile and I got same result
best regards

Hi @makmerghen

Let’s check the attribute. Please try adding the following code snippet:

jQuery(window).on("resize load", function() {
   setTimeout(function() {
      alert( jQuery(".um.um-register").attr("class") );
  
   }, 100);
});

Let me know what will be the alert message content.

Regards,

Dear @champsupertramp
first I add this code in code snippets plugin and I got this error

Don't Panic
The code snippet you are trying to save produced a fatal error on line 1:

Uncaught Error: Call to undefined function jQuery() in /home/elazbagr/newhope.me/wp-content/plugins/code-snippets/php/admin-menus/class-edit-menu.php(221) : eval()'d code:1 Stack trace: #0 /home/elazbagr/newhope.me/wp-content/plugins/code-snippets/php/admin-menus/class-edit-menu.php(221): eval() #1 /home/elazbagr/newhope.me/wp-content/plugins/code-snippets/php/admin-menus/class-edit-menu.php(271): Code_Snippets_Edit_Menu->test_code(Object(Code_Snippet)) #2 /home/elazbagr/newhope.me/wp-content/plugins/code-snippets/php/admin-menus/class-edit-menu.php(130): Code_Snippets_Edit_Menu->save_posted_snippet() #3 /home/elazbagr/newhope.me/wp-content/plugins/code-snippets/php/admin-menus/class-edit-menu.php(107): Code_Snippets_Edit_Menu->process_actions() #4 /home/elazbagr/newhope.me/wp-includes/class-wp-hook.php(303): Code_Snippets_Edit_Menu->load('') #5 /home/elazbagr/newhope.me/wp-includes/class-wp-hook.php(327): WP_Hook->apply_filters('', Array) #6 /home/elazbagr/newhope.me/wp-includes/plugin.php(470): WP_Hook->do_
The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.

Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.

then I added it in as java and I got this error in front end register form page
mysite says um um-register um-944 uimob500

regards

Hi @makmerghen

Please add it to the javascript customizer.

Now, let’s try this one to test the issue:

jQuery(window).on("resize load", function() {
   setTimeout(function() {
      jQuery(".um.um-register").removeClass("uimob340");
      jQuery(".um.um-register").removeClass("uimob500");
      jQuery(".um.um-register").removeClass("uimob800");
      jQuery(".um.um-register").addClass("uimob960");
      alert( jQuery(".um.um-register").attr("class") );
   }, 1000);
});

Let me know the output in the alert box. Also, check if you have any CSS customization for UM forms maybe it’s making this conflict.

Regards,