Add horizontal space between label and upload file button and align label text vertically

  • lritter
    Asked on November 7, 2018 at 11:41 AM

    Please see below...

    1541608830screen shot Screenshot 10

  • Jan
    Replied on November 7, 2018 at 1:09 PM

    You can use this custom CSS code in order to reduce the space between the label and the upload button:

    .qq-uploader {
    position: relative;
    width: 165px;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes.

    For the label alignment, are you saying that you want to create a line space on each item separated by number?

    Here's an example:

    Photo 4&5:
    Take photos...
    1)
    2)

    Unfortunately, it is not possible to insert HTML code in the label. So the <br> tag will not work. My suggestion is to reduce the width of the label and use a non-breaking space (&nbsp;) until it goes to the next line.

    Photo 4&5: &nbsp; &nbsp; &nbsp; Take photos...
    &nbsp; &nbsp; &nbsp; 1)
    &nbsp; &nbsp; &nbsp; 2)

    If you need help in decreasing the label width using CSS, let us know.

    Let us know if you have any questions. Thank you.

  • lritter
    Replied on November 7, 2018 at 2:56 PM

    I think you may have misunderstood. 

    First, I want to 'stretch' the label wider, so it is a little closer to the button, just to save a little space.

    Second, I want to align the label text vertically so it is centered vertically with the button.

    I tried the code to decrease the horizontal space, but all it did was move the button to the left; closer to the label. I don't want to change the position of the buttons. Instead, I want to increase the width of the labels so they are wider and closer to the buttons.

    For the HTML coding answer, I think you misunderstood my ask. I want the label to be aligned in the middle with the button. However, I've since created dividers which separate each better. So, I really don't have to realign now.

    Thank you!


  • jonathan
    Replied on November 7, 2018 at 4:20 PM

    This may take a bit of tweaking with the CSS codes needed. Please allow us more time to check on it. I'll get back to this with an update.

    Thank you.