Welcome to the nuBuilder Forums!

Register and log in to access exclusive forums and content available only to registered users.

Edit Form Styling

Locked
csnet
Posts: 11
Joined: Wed Sep 29, 2010 8:13 pm

Edit Form Styling

Unread post by csnet »

Hi,
1. I have been trying to style the input Fields so that all labels be aligned left and have same size, while the input fields stays aligned with the same width(The field width is easy by using the width property of the Object).
I have attached a picture showing what I need to achieve:
FieldStyling.PNG
FieldStyling.PNG
Is there a CSS class that gives access to the input fields Labels?
You do not have the required permissions to view the files attached to this post.
massiws
Posts: 503
Joined: Thu May 24, 2012 2:08 am
Location: Milan, Italy
Contact:

Re: Edit Form Styling

Unread post by massiws »

csnet, something like this:

Code: Select all

function nuLoadEdit() {
  $( "div[id|='title_']" ).css( "text-align", "left" );
}
nuGent
Posts: 11
Joined: Sat Jan 18, 2014 1:26 pm

Re: Edit Form Styling

Unread post by nuGent »

I also came across the problem of not being able to align controls by manually editing their position in the objects table (ie make all textboxes left align at 100px). It seems that the object's label is controlling each object's position rather than the label and the control having their own 'left' property. So if you start dragging things around on a form you can not easily reset the position values for the controls.
admin
Site Admin
Posts: 2815
Joined: Mon Jun 15, 2009 2:23 am
Been thanked: 25 times

Re: Edit Form Styling

Unread post by admin »

nuGent,

I think massiws's suggestion is a good one.

Steven
massiws
Posts: 503
Joined: Thu May 24, 2012 2:08 am
Location: Milan, Italy
Contact:

Re: Edit Form Styling

Unread post by massiws »

nuGent,
with few lines of jQuery nuBuilder can be customized like you want.
Insert this in Javascript tab of your form:

Code: Select all

function nuLoadEdit() {
  $( "div[id^='title_']" ).css({
    "text-align": "left",
    "width":      "100px"
  });
}
Max
csnet
Posts: 11
Joined: Wed Sep 29, 2010 8:13 pm

Re: Edit Form Styling

Unread post by csnet »

Thanks massiw, your code is working perfectly.
massiws
Posts: 503
Joined: Thu May 24, 2012 2:08 am
Location: Milan, Italy
Contact:

Re: Edit Form Styling

Unread post by massiws »

.
Locked