Hi.

Using Profile_2, I have a profile type (or "section") with a few fields. Each of those fields have one possibility.

I would like to add a new field to that section (profile type) where the user could select more than one possibility (like a list of checboxes) and only his choices would be shown (list). How can I achieve that? Is there a module for a "quick solution" ?

Now, I would like to have 2 columns : on the left, my fiels with one possibility; on the right, the field with more than one choice. Is there a way to achieve this with only CSS?

Find an image of representing this question (an image is worht a 1000 words... ;)

Thanks

NG

URL of the image : http://i1131.photobucket.com/albums/m546/Hangar217/question_zps8e13fdd2.png

Comments

Northern_Girl’s picture

the first part was just under my nose... Its in D7... Sorry for this question.

I'm still stuck with the CSS part : how to CSS one specific profile type and how to send in the second column a specific field?

NG.

Drupal in the snow

Sam Moore’s picture

Without seeing your DOM I'm just fingerpainting here:
Find the CSS selectors for the various fields so that you can target them individually.
Set the width of all 4 to a value small enough that they'll leave room for the two columns to exist.
width:50% will probably do it unless they have side margins, depending on your box model settings... isn't CSS fun?
Set field 4 to float:right. Depending on what else is going on you might have to float the others left, but this'll get you started.
You could also wrap fields 1-3 in their own div and float the whole div left, but that would probably require either editing your theme template for this form or running a line of jQuery.

Northern_Girl’s picture

that this is the DOM... (see below)

I would like to have 2 columns only in the section class " 6-notes-additionnelles ". And the second column should start at the field called " < section class =" field field-name-field-mannequinat ".

Can "pure" CSSS do the trick?

Thanks for your time!

Section class =" 6-notes-additionnelles " >
< h3 >6. Notes additionnelles< /h3 >
< dl>
< div class="entity entity-profile2 profile2-6-notes clearfix" typeof="" about="/fr/users/lara">
< div class="content">
< section class="field field-name-field-statut field-type-list-text field-label-inline clearfix view-mode-account">
< h2 class="field-label">statut:
< div class="field-items">
< div class="field-item even">autonome (freelance)
< /div>
< /section>
< section class="field field-name-field-nudite field-type-list-text field-label-inline clearfix view-mode-account">
< h2 class="field-label">nudité:
< div class="field-items">
< div class="field-item even">aucune
< /div>
< /section>
< section class="field field-name-field-tatoos field-type-list-text field-label-inline clearfix view-mode-account">
< h2 class="field-label">arts corporels:
< div class="field-items">
< div class="field-item even">tatouage(s)
< /div>
< /section>
< section class="field field-name-field-talents field-type-text-long field-label-above view-mode-account">
< h2 class="field-label">talents cachés:
< div class="field-items">
< div class="field-item even">Piano.
< /div>
< /section>
< section class="field field-name-field-mannequinat field-type-list-text field-label-above view-mode-account">
< h2 class="field-label">Mannequinat:
< div class="field-items">
< /section>
< /div>
< /div>
< /dl>
< /section>

Drupal in the snow

Sam Moore’s picture

CSS can most likely do what you want, if I'm understanding you correctly.
Any chance you can have the section.field-name-field-mannequinat come first rather than last?
If so, try this:

section.field {
  width:45%; /*just to be safe - in case of borders, margins, etc */
}
section.field-name-field-mannequinat {
  float:right;
}
Northern_Girl’s picture

Thanks, I'll give it a try this week end!

I understand how did it; you did not try to identify the section, but only one field to float. And yes, this field comes last, so the float should just do great!

Thanks again!

Drupal in the snow

Sam Moore’s picture

Well this works if that section comes first - that's why i asked if you could have it be first rather than last.

Northern_Girl’s picture

Using the float element made the field go to the right without making a second column. So did some more research and tried different things without any results, until... I trided this : column-count. And it worked : the last field is "swaped" into a second column.

I wont try to explain... it just works!

But... I had to add a float left to be shure that all the content of this last field goes in the second column.

.field-name-field-mannequinat {
    float: left;
}

Thanks for your time. I guess I needed a direction to rove into.

.profile2-6-notes {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

Drupal in the snow

Sam Moore’s picture

Just be careful if you need to support IE 8 or 9.