Need help with customizing the form

Doing another form, but failed. How did you get the #id_3?

I guessed you got it by viewing the source code

But unfortunately it seems to have no effect for me except if I tried text_30.

And the text_30 isn't great because both sides, the floating at the left and the big gap will moved too and I've to add in top : 450px; to the .agreement.

I've another problem: can't increase width/decrease height

@maivutan 

The form looks great as of checking. Nicely done!

About the element id, yes you're right. You can get it on the form source code or through inspect element. 

Example: This is done using Chrome browser.

About your other question, which one you want to increase the width and decrease the height? I can see that you have injected custom CSS that controls the text element. You can change its values if you want to adjust its width and height.

.agreement {

    position : relative;

    left : -700px;

    top : 1500px;

    background-color : rgba(0, 0, 0, 0.6);

    height : 500px;

    overflow-y : scroll;

    width : 600px;

}

Let us know if you need further help. 

Issue #2 isn't solved.

http://www.mediafire.com/watch/be726y5ctcbnnnc/JotForm_CSS_margin-top_problem.avi

Let me try to verify if I understand what you would like to achieve.

On this form: http://www.jotform.me/form/51694971607466

You seem to want to remove some of the blank space that is left above the Submit button, correct?

You seem to want to reduce it down to this:

You can do so by adding the following CSS:

#id_30 {
padding: 1px 0px;
margin: 0 0 -8px;
}

If your issue is that you are using two selectors to add your custom CSS (#text_30 and .agreement), then please note that there is no issue in doing so. Many effects require changing CSS properties and declarations of multiple elements, in order to achieve a certain look.

Please let us know if you need further assistance, or if I have misunderstood your requirement. We will be happy to help.

"If your issue is that you are using two selectors to add your custom CSS (#text_30 and .agreement), then please note that there is no issue in doing so. Many effects require changing CSS properties and declarations of multiple elements, in order to achieve a certain look."

Yes, this is my issue. I don't think it's a good idea to use so many ways in order to achieve what I want pushing up and pulling down back again. Something must be wrong because there's always a simpler solution.

It isn't problematic on appearance, but technically it's.

So, can you tell me why can't I use this single line of code?

#id_3 { margin-top: -265px !important; }

OK, I'll try to explain the difference.

On your first form, http://form.jotform.me/form/51693033778463, the element that we were initially moving is at the top, so we needed to move the elements that come after it with a negative margin-top.

In other words, we have moved the text to the left from a field named #id_8, and #id_3 comes after it. As we have moved #id_8, there remained a large blank space at the top of the form, so all we did afterwards was to move the next element in line (#id_3) a little more to the top.

On your second form, http://www.jotform.me/form/51694971607466, the element that we are initially moving is at the bottom, so we need to try to collapse its space instead. On your second form, #id_3 will not do what you desire, because on this form - the elements have different IDs. Here the element that we have moved to the left is #id_30, and its children elements (.agreement).

Now, if we wanted to duplicate what we did on the first form, we could have also moved the next element (the Submit button container) above with negative margin applied to it: #id_2 { margin-top: -28px; }

There is no less CSS on the first form when compared to the second. First has:

.benefits {
    position : relative;
    left : -700px;
    background-color : rgba(0, 0, 0, 0.4);
}

#id_3 {
    margin-top : -265px !important;
}

And all is well, as we are only moving the text to the left (at the same height or "altitude" that it already had), and we are moving the elements that came after to its former place.

Second form can have this:

.agreement {
    position : relative;
    left : -700px;
    top : 1500px;
    background-color : rgba(0, 0, 0, 0.6);
    height : 500px;
    overflow-y : scroll;
    width : 600px;
    margin-top : -2000px !important;
}

#id_2 { margin-top: -28px; }

It is pretty much the same code, but we had to use both the "up" or "top" positioning, as this element was initially very low on the page.

The code that I have suggested in my previous post is just another way of collapsing the empty space above the submit button on your second form. With CSS, there are usually multiple ways of achieving some particular styling, or moving an element.

Please let us know if you need further help in tweaking your forms.

Is there difference adding codes to .agreement and #id_30?

Now I fully understood, the #id_3 in the another form wasn't the text widget, but was another element below it. I misunderstood.

And how does using top: -500px; and bottom: 500px; differ? (technically)

and try click on the resources, the "floating left" will go down. The more you tick, the more down it'll be...

Is there difference adding codes to .agreement and #id_30?

I believe that the code is working as you want it now (except for the part in your last post), so I presume that this question and the next one are more 'technical' so I will reply to them as such.

Technically, the .agreement is a class (because of the dot in front). This means that there can be several different elements on your form holding that same class in which case, all of them would need to have the same style applied to it.

The ID (indicated with a hash sign) #id_30 is however an ID and as your own personal ID card, it is valid for only a single element and while there could be several elements (technically) on the form holding the same ID, they would not be valid structure-wise. Such HTML codes are often a trouble to fix and an error nest.

Now in short the difference between the two is if you wish to have the code applied to a single element only - a specific element, or if you wish to have it applied to all elements of the same type (class).

In some cases though you could have a single class entry on the form instead of multiple, but when codding this is one of the signs that the code(er) is not good.

And how does using top: -500px; and bottom: 500px; differ? (technically)

The difference is that what we are saying is that you want your 500px to start from a specific marker (top), instead of another marker (bottom). The difference between the two would be that top and a minus combination means that we are moving the element up for 500px from its current top position.

The bottom: 500px means that we are moving the element up for 500px, but from its bottom.

This would be OK if the element would not react to other elements and if other elements would not react to it and depending if you use any javascript code on the element.

For example, if you have set the element to expand (be taller) on some action from you uers,  your bottom and top codes might differ.

Long story short, if you need to align the bottom part of the element, it is best to use bottom property, and if you are aligning the top, to use the top property.

Now there is much that you can learn about the CSS and even more of what it can do for you so I suggest checking some websites like this one: http://www.w3schools.com/css/css_positioning.asp but if you have any questions do let us know. :)

and try click on the resources, the "floating left" will go down. The more you tick, the more down it'll be...

This happens because you are showing new elements and the positioning is relative - since the element is under other elements, it will be moved with the new elements being shown / added.

To correct this you can apply the following code, but you must leave the old code as well:

.agreement {
    border-radius: 6px;
}
#id_30 {
    position: absolute;
    top: 490px;
}

The first part is just to make the corners a bit rounded.

Do add it after all the other code on your form following the steps here: Inject Custom CSS Codes

Do let us know how it goes :)

Your reply is not shown on our forum, but I was able to see it:

#id_30 {
    position: absolute;
    top: 490px;
}

 
It works if I added top: 490px;, why?

Now, the reason why it works like that is because I gave you the code that sets it to an absolute position. The link that I have sent to you earlier talks about the relative, absolute and fixed positions and how to achieve them - as well as what each brings to the play so I suggest inspecting it. This is the link again: http://www.w3schools.com/css/css_positioning.asp

In short, relative means that we relate to something else, while absolute means that we are as we are and no dependencies are there to relate to (make us change our place). As to why 490 and not 500 or some other figure - that is the one that had the top borders aligned.

Just to allow easier followup if needed, the code above is for the form: http://www.jotform.me/form/51694971607466

why my reply isn't shown in the forum? You deleted? But why you could see?

@maivutan 

Nope, it wasn't deleted. It was not carried into the forum which I have no clue why but anyway, we saw it on email since we are on this thread.

If this caused you inconvenience, feel free to visit this thread and post your reply. https://www.jotform.com/answers/593083

Thanks!

I have moved your latest post to a new thread since we can only help you with one issue / question per thread.

This new thread can be found here: http://www.jotform.com/answers/599879 and we will be replaying to it shortly.

@maivutan

I went ahead and opened a separate thread so that we can focus on one problem per post, please refer to this link instead: http://www.jotform.com/answers/720114. We will address it shortly.

Thank you for understanding.