Sign in to follow this  
Gary Austin

Inline labels and input on admin form

Recommended Posts

I have an admin page I want to build with 6 fieldsets of between 6 and 20 text fields each.  I really want the input labels to be inline with the actual input entry field to make the forms readable.  I'm using the uikit admin and it has a horizontal form option for doing so, but it seems processwire wants to lock down the vertical form option which puts label on top of input.  I can't find any api call to change or force this.   I'm actually taking all these fields and generating a single json field to be stored in the database.

Right now  I'm bailing on the processwire form/field api and just going to hard code my own form and field sets, but would appreciate any advice if I am missing an api call to change the layout of labels/inputs on "back" pages.

Thanks

Share this post


Link to post
Share on other sites
1 minute ago, cstevensjr said:

A good place to start would be:

https://getuikit.com/docs/form

 

Oh, Yeah.  I know uikit inside out now as I'm doing a webapp using it.  No problem with doing my own forms, was just hoping I could tweak Processwire admin forms in the back end.

Share this post


Link to post
Share on other sites
2 hours ago, Gary Austin said:

Right now  I'm bailing on the processwire form/field api and just going to hard code my own form and field sets, but would appreciate any advice if I am missing an api call to change the layout of labels/inputs on "back" pages.

Thanks

 

Share this post


Link to post
Share on other sites
4 hours ago, Gary Austin said:

Right now  I'm bailing on the processwire form/field api and just going to hard code my own form and field sets, but would appreciate any advice if I am missing an api call to change the layout of labels/inputs on "back" pages.

Maybe 'easiest' to just duplicate the uikit admin, edit it as you wish and install that as your admin theme. Of course, you'd still need to dig into the code to find out what you need to change...It might not be as straightforward as it sounds though :-).

Share this post


Link to post
Share on other sites

I would probably just override the CSS on these fieldsets (by loading a CSS file to the admin).

  • Like 2

Share this post


Link to post
Share on other sites

I tried overriding CSS of the form as the first approach and that did not work.  Basically all the elements have not just standard uikit css, but also Processwire css and changing the form CSS caused lots of other elements to break.

I might look into creating a new input/field type with all my fieldsets and text inputs in one field as I do store the final value.  Otherwise I'm almost done just not using the API and using a custom admin page.

Share this post


Link to post
Share on other sites

I was overriding the css incorrectly I guess the first time (was trying to use add/removeClass).

Using    

   $form->setClasses(array('form'=>'uk-form-horizontal InputfieldForm'));

did the trick.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.