place 2 Cb fields inline instead of horizontal

pranaydhruv
OFFLINE
Elite Member
Posts: 316
Thanks: 8
Karma: 1

8 years 7 months ago #270370 by pranaydhruv

place 2 Cb fields inline instead of horizontal was created by pranaydhruv

Hello team,

I am trying to place 2 CB fileds inline / horizontally but unable to, i have tried to use CSS too but it doesn't align properly. Please suggest.

Fields in question :-

1) Weight 2) Unit

Thanks
Pranay

Please Log in to join the conversation.

krileon
Team Member
ONLINE
Posts: 68552
Thanks: 9095
Karma: 1434

8 years 7 months ago #270391 by krileon

Replied by krileon on topic place 2 Cb fields inline instead of horizontal

In profile view the best way to do that is to use a Custom HTML field and substitute them in or use one of the fields Layouts feature to substitute in the other field. For profile edit you need to write custom CSS to float their field rows or make them inline. Example as follows.

#cbfr_142,
#cbfr_169 {
	width: 50%;
	display: inline-block;
	vertical-align: middle;
}

Each field row has a unique ID that can be used in your CSS. You can also use the CSS Class parameter of each field to add a custom CSS class to its container.

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

pranaydhruv
OFFLINE
Elite Member
Posts: 316
Thanks: 8
Karma: 1

8 years 7 months ago #270446 by pranaydhruv

Replied by pranaydhruv on topic place 2 Cb fields inline instead of horizontal

Hello Kyle,

when i do the Custom HTML and do the substitutions the spacing between the 2 fields is not right and not editable as it is now one field. also the Core Ajax editing doesn't work with this option.

When i try to substitute in one field layout it displays as below and the core Ajax editing stops working .I have added CSS also. Not sure what missing.

Please Log in to join the conversation.

krileon
Team Member
ONLINE
Posts: 68552
Thanks: 9095
Karma: 1434

8 years 7 months ago #270476 by krileon

Replied by krileon on topic place 2 Cb fields inline instead of horizontal

The CSS is just an example. You need to adjust its selector and is just an example. The field row ID selectors are #cbfr_FIELD_ID_HERE. When substituting you need to be using the below usages to maintain HTML output, which may allow the core fields ajax to continue to work.

[cb:userfield field="FIELD_NAME" /]

Beyond that there's no further functionality to provide what you're wanting. CSS approach should work perfectly fine if both fields are ordered 1 after the other.

Please Log in to join the conversation.

pranaydhruv
OFFLINE
Elite Member
Posts: 316
Thanks: 8
Karma: 1

8 years 7 months ago - 8 years 7 months ago #270529 by pranaydhruv

Replied by pranaydhruv on topic place 2 Cb fields inline instead of horizontal

Attachment weightunit.JPG not found

Hello Kyle,

i have tried changing as per your suggestions and also made changes in CSS and i am able to align the fields but the Core Ajax editing still doesn't work :-

Weight &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp[cb:userdata field="cb_weight" /]&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
Unit [cb:userdata field="cb_unit" /]

Thanks
Pranay

Last edit: 8 years 7 months ago by pranaydhruv.

Please Log in to join the conversation.

krileon
Team Member
ONLINE
Posts: 68552
Thanks: 9095
Karma: 1434

8 years 7 months ago - 8 years 7 months ago #270553 by krileon

Replied by krileon on topic place 2 Cb fields inline instead of horizontal

You're using userdata substitutions instead of userfield. userdata is raw value. userfield is with HTML. CB Core Fields ajax may not work due to them being container in a single field. The below usage might work, but it'll result in them being surrounded by their divs.

[cb:userfield field="FIELD_NAME" formatting="div" /]

Last edit: 8 years 7 months ago by krileon.

Please Log in to join the conversation.

Moderators: beat, nant, krileon

Time to create page: 0.233 seconds

place 2 Cb fields inline instead of horizontal

Attachments:

Attachment weightunit.JPG not found

Attachments:

Search

Login / Logout

Menu

User Menu