• Resolved nazdog61

    (@nazdog61)


    Hi,

    I can’t seem to get my form to align when I change a user field data size.
    See code below: Why does the last field overlap with the file uploader?

    The description has a custom data size.

    [wordpress_file_upload uploadpath=”user-uploads” uploadpatterns=”*.mp4*.avi,*.mov,*.mkv,*3gp,*.avi,*.divx,*.mpeg,*.wmv,*.mpeg4″ maxsize=”500″ dublicatespolicy=”maintain both” redirect=”true” redirectlink=”http://www.test.com” placements=”userdata/userdata/title/message/selectbutton/filename/subfolders/uploadbutton/progressbar” uploadtitle=”Submit Your Video/Photo” selectbutton=”Choose File” uploadbutton=”Upload” notify=”true” notifyrecipients=”test@gmail.com” notifymessage=”A user has upload a win. ” widths=”userdata:600px, userdata_label:600px, userdata_value:600px” heights=”userdata:100px, userdata_label:200px, userdata_value:200px” userdata=”true” userdatalabel=”Name:|t:text|s:left|r:1|a:0|p:right|d:/Email Address:|t:email|s:left|r:1|a:0|v:1|p:right|d:|g:0/Location:|t:text|s:left|r:0|a:0|p:right|d:/Video URL (if applicable)|t:text|s:left|r:0|a:0|p:right|d:/Description:|t:multitext|s:left|r:0|p:right” userdatalabel2=”Would you like a mention?|t:checkbox|s:left|r:0|a:0|p:right|d:false|l:|f:right”]

    https://wordpress.org/plugins/wp-file-upload/

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author nickboss

    (@nickboss)

    Hi,

    it is a css issue, what is the URL of the page to check?

    Nickolas

    Thread Starter nazdog61

    (@nazdog61)

    Hi Nickboss

    The page is http://pokiewins.com.au/submit-your-win/

    I’m trying to get it to display mobile friendly also.

    Plugin Author nickboss

    (@nickboss)

    In your page I see in Chrome (desktop) that they are aligned, however the space between them is very large.

    What changes do you want?

    Nickolas

    Thread Starter nazdog61

    (@nazdog61)

    Hi Nickboss.

    Thanks for getting back to me.

    I want the fields to show properly without overlapping.

    I also want it to be semi mobile friendly..

    Thanks

    Plugin Author nickboss

    (@nickboss)

    In which browser / device do you see them overlapped?

    Thread Starter nazdog61

    (@nazdog61)

    Hi Nick,

    I would like to them to not be overlapped on any device. They aren’t currently displaying properly on any device.

    Cheers

    Plugin Author nickboss

    (@nickboss)

    In order to avoid overlapping please add the following code in the Custom CSS area of your theme:

    label.file_userdata_label {
    width: 200px;
    }

    Let me know how it looks like.

    Thread Starter nazdog61

    (@nazdog61)

    Hi nickboss I’ve added the custom CSS to the Custom styling part of the theme and it still doesn’t appear correctly. Does the code I’ve produced display correctly for you on another theme?

    Is the custom css code supposed to be like this:

    label.file_userdata_label {width: 200px;}

    Plugin Author nickboss

    (@nickboss)

    I can see that you entered the css rule correctly, however another rule prevails.

    Please modify it as follows:

    label.file_userdata_label {width: 200px !important;}

    Thread Starter nazdog61

    (@nazdog61)

    That’s great Nickboss it displays as expected on desktop browsers now. Thanks allot.

    I’m still having issues with it displaying on Mobile as the text fields don’t display without scrolling right. Do you know if there is anyway to fix that?

    Plugin Author nickboss

    (@nickboss)

    Hi, please add the following code in your custom css area:

    @media (max-width: 480px) {
    div.file_userdata_container { white-space: normal; }
    }

    this will wrap the edit boxes below their labels for mobile devices, let me know if it works

    Nickolas

    Thread Starter nazdog61

    (@nazdog61)

    Hi nickboss,

    Thanks for the CSS. It is now closer
    The text boxes now fit but it takes over the space of the text.It does the same on desktop.

    Any ideas?

    Plugin Author nickboss

    (@nickboss)

    I do not see the rule

    label.file_userdata_label {width: 200px !important;}

    have you erased it somehow?

    Nickolas

    Thread Starter nazdog61

    (@nazdog61)

    Hi Nikolas.

    Sorry I did delete as I thought the new rule you gave me superseded.
    I’ve now updated. See on mobile it’s still not displaying correctly.

    Cheers
    Nazdog

    Plugin Author nickboss

    (@nickboss)

    Hi, you are right, please set the rule as follows:

    @media (max-width: 480px) {
    div.file_userdata_container { white-space: normal !important; }
    }

    just add !important after the normal word.

Viewing 15 replies - 1 through 15 (of 16 total)

The topic ‘Alignment issue’ is closed to new replies.