This forum is no longer open and is for reading/searching only.
Please use our new MachForm Community Forum instead.
MachForm Community Forums » MachForm 4
Display 'Drop Down' inline next to 'Single Line Text'
Started 9 years ago by MvdL79 | 15 posts |
-
Hi Support,
I did a search for this, however the results are for very old versions of Machform, therefor I am re-asking this for the current version.
I have a 'Drop Down' which I want to be displayed next to a 'Single Line Text'-field. I tried adding 'float:left;' in the Advanced CSS, but it didn't work. Before I mess things up completely, I rather ask first in here.
Currently it shows like this:
'Single Line Text'
'Drop Down'But I want it like this:
'Single Line Text' 'Drop Down'I checked the HTML for the corresponding ID's, which are below:
'Single Line Text' = #li_1
'Drop Down' = #li_3Thank you in advanced for your explanation for achieving this.
Regards,
MichelPosted 9 years ago # -
redityo
Hi,
You can use custom css code to line up some field into same line, see this link for more information :
http://www.appnitro.com/doc-field-alignment
MachForm Support
Posted 9 years ago # -
Thank you! :)
Posted 9 years ago # -
Though what you mentioned works, I still have to much white-space between the text-field and drop-down.
Is there a way to decrease the amount of white-space. It's crucial for me that both elements are close to each other.I think the problem of the excessive amount of white-space is created by "highlighted" and "error highlighted".
Anyway to decrease the white-space in between them?Thank you in advance.
Posted 9 years ago # -
I added the following to the Advanced CSS:
#li_3{margin-left:-130px !important;}
Though it moves the 'Drop Down' to the left, it doesn't look to good.
Is there any other way to remove the white space?Maybe disable the highlighting (including error) for those 2 fields in general?
Probably there is a more simple approach to this.
//edit #1
It also causes problems on mobile versions of the website. :(
So I need a different approach to this.//edit #2
For your information; I want it to look like the name field (first & last name) in regards to spacing. So the 'Drop Down'-field is next to the 'Single Text Field'.
Posted 9 years ago # -
* bump *
Posted 9 years ago # -
Can you post the link to the form? I think that we can get a better understanding as to what you want if we can visualize it with a physical example.
Thanks!
Regards,
Saghalie
http://www.kcmhosting.comPosted 9 years ago # -
Well I restarted using Machform for our new website, but I still experience the same problem.
I did a quick mockup in Photoshop of how it's currently is (top) and how I like it to be (bottom)
Here is the mockup: http://neverlands.org/example_white-space_when-using_columns2.jpgAs you can see, if I use columns, as adviced, it creates to much white-space between the input field and the pulldown.
I want them both closer to each other, better said; the dropdown should be closer to the input field.One sidenote though; since I use the form also for mobile users, it should work for that as well, if possible...
Thank you.
Posted 9 years ago # -
* small bump *
Posted 9 years ago # -
* small bump (to keep Yuniar's attention *
Posted 9 years ago # -
yuniar
You can try changing the field size property of your text field to "Large", so that it will use the whole available space.
Unfortunately, columns will be discarded when your form being viewed using mobile devices.
MachForm Founder
Posted 9 years ago # -
Sorry was on a short vacation, so couldn't reply earlier.
First thanks for taking notice of the 2 other posts / requests.
Anyways, back to this topic, Isn't there a different way to accomplish this? I understand you can set them to large, however it looks too "oversized" for the use. Isn't there a different (CSS) way to accomplish this?
Thank you in advance.
Posted 9 years ago # -
* small bump *
Posted 9 years ago # -
Small update to this issue.
The problem is even worse when you use the 3 columns CSS (column_3).
For example: 'Drop Down' - 'Single Line Text' - 'Drop Down'
The space between the first two fields is way to big. It doesn't matter if I set any fields to large, medium, small (except for the first field).I sincerly think these (small) issues are caused by normal highlighting (clicking on field) and (probably) error highlighting.
To give a visual impression of the problem, I took a screenshot of it.
3-column screenshot: http://neverlands.org/machform/3-column.png
As you can see for yourself the space between the first drop down and single text field is pretty big (too big imho).
I don't know if it's possible, but a possible solution could be that items in columns are automatically adjusted or at least some wat to make manual size adjustements?
Ofcourse you could set the first drop down to large, however it looks kinda ridiculous for items with only 6 or 7 characters.
Also this problems becomes even "worse" when you include Machform within your website (for example through JS), the fields get even more bigger than in the example (when using "view").
On a sidenote; I did manage to "fix" the 2-column layout by setting the first field (which is a single line text field) to large. Though for the fact it works, it's still not a perfect way, because you are forced to set this field to large. If you use the field for short textual stuff, it looks kinda weird. Similiar to what I mentioned above and also gets worse when you include it in your current website.
Posted 9 years ago # -
Well nevermind, my boss purchased WHMCS for testdriving, so I think we will use that for our order forms.
We will still use Machform for sending out welcome emails.Posted 9 years ago #
Reply
You must log in to post.