Toggle Submenu
  1. Forums
  2. Recent
  3. Categories
  4. Tags
  5. Users
  6. Badges
Support is currently Online
Add a reply View Replies (10)

Resolved Assign Bootstrap Size to Fields

  1. peacetree
    peacetree
  2. General
  3. Wednesday, May 22 2019, 09:52 AM
Do you think it could be usefull to assign bootstrap size to fields?
I imagine it to work as such it will give the user of easy profile to chose whether he can display fields next to each other.
Accepted Answer
admin
admin Accepted Answer
Admin
Hi,
easy profile extends Joomla user management (not replace), so the registration and edit profile page are the same of Joomla and it does not allow this.

The best way to manage the size of the fields is to add some simple CSS code, for example:
@media(min-width:600px){

    .username-group{width:48%;float:left;}

    .firstname-group{width:48%;float:right}

}
see result in screenshot
Attachments (1)
Schermata 2019-05-22 alle 10.49.19.png Schermata 2019-05-22 alle 10.49.19.png
  1. more than a month ago
  2. General
  3. # Permalink
Responses (10)
peacetree
peacetree Accepted Answer
I just used this code on my website, the field groups reduce in size accordingly, however the dont appear next to each other.

One field float letft + line break + Other field float right.

Dono why I have this line break, tried to reduce size but no effect.
  1. more than a month ago
  2. General
  3. # 1
admin
admin Accepted Answer
Admin
Hi,
can you please post me your registration link to see it?
  1. more than a month ago
  2. General
  3. # 2
peacetree
peacetree Accepted Answer
Please remove link after seen.
  1. more than a month ago
  2. General
  3. # 3
admin
admin Accepted Answer
Admin
Please remove link after seen.
Done! I will come back with a solution :D
  1. more than a month ago
  2. General
  3. # 4
admin
admin Accepted Answer
Admin
Hi,
try to use this code:
@media(min-width:600px){

    .username-group{width:48%;float:left;}

    .firstname-group{width:48%;float:right;clear:none !important}

}


NOTE: to have a better view we recommend to use "Vertical" layout for fields (Components->Easy Profile->Options->Layout Settings->Field Style)
  1. more than a month ago
  2. General
  3. # 5
peacetree
peacetree Accepted Answer
Works perfect, thank you!
  1. more than a month ago
  2. General
  3. # 6
peacetree
peacetree Accepted Answer
Content Protected
  1. more than a month ago
  2. General
  3. # 7
admin
admin Accepted Answer
Admin
Hi,
yes, this is possible.

First you need to enable confirm email e confirm password fields from Easy Profile configuration

The CSS code should be something like this:
@media(min-width:600px){

    .email1-group{width:48%;float:left;}

    .email2-group{width:48%;float:right;clear:none !important}

    .password1-group{width:48%;float:left;}

    .password2-group{width:48%;float:right;clear:none !important}

}
  1. more than a month ago
  2. General
  3. # 8
peacetree
peacetree Accepted Answer
Content Protected
  1. more than a month ago
  2. General
  3. # 9
admin
admin Accepted Answer
Admin
Hi,
sorry for late reply.

No problem, for 3 columns you can use something like this:


@media(min-width:600px){

.field1-group,.field2-group,.field3-group {

    float:left;

    clear:none !important;

    width:30%;

    margin-right:5%;

}

.field3-group {

    margin-right:0px;

}

}

for 4 columns:


@media(min-width:600px){

.field1-group,.field2-group,.field3-group,.field4-group{

    float:left;

    clear:none !important;

    width:22%;

    margin-right:4%;

}

.field4-group {

    margin-right:0px;

}

}
  1. more than a month ago
  2. General
  3. # 10
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.