Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MFXFieldGroup #191

Open
panosru opened this issue Apr 28, 2022 · 4 comments
Open

MFXFieldGroup #191

panosru opened this issue Apr 28, 2022 · 4 comments
Labels
to-evaluate To understand if it's worth it, or More info needed, or More investigation needed

Comments

@panosru
Copy link

panosru commented Apr 28, 2022

It would be a great addition to the library if an element like MFXFrieldGroup was provided, it could act somehow like a fieldset element in HTML but with a material look.

image

The screenshot does not have material look, but it provides an idea.

That would be very useful to have group fields, especially check and radio boxes that are part of a group, for example currently these groups don't provide any way to label the group, you have to place the label manually.

image

UPDATE:
Just a simple example of what I'm currently doing to achieve the above-mentioned result:

image

The fxml code:

<Pane layoutX="8.0" layoutY="225.0" prefHeight="51.0" prefWidth="231.0" styleClass="fieldset">
   <children>
      <MFXRadioButton layoutX="14.0" layoutY="17.0" text="Male">
         <toggleGroup>
            <ToggleGroup fx:id="gender" />
         </toggleGroup>
      </MFXRadioButton>
      <MFXRadioButton layoutX="111.0" layoutY="17.0" text="Female" toggleGroup="$gender" />
      <Label layoutX="8.0" layoutY="-10.0" styleClass="fieldset-title" text="Gender" />
   </children>
</Pane>

The CSS code:

.fieldset {
    -mfx-main: -mfx-purple;
    -fx-background-color: white;
    -fx-background-radius: 5;
    -fx-border-color: lightgray;
    -fx-border-radius: 5;
    -fx-padding: 5;
}

.fieldset .fieldset-title {
    -fx-padding: 0 3;
    -fx-font-family: "Open Sans Regular";
    -fx-text-fill: -mfx-text-he;
    -fx-background-color: white;
}
@Tech-Expert-Wizard
Copy link

@panosru You can start a pull request for this feature if you want and see if it gets approved.

@palexdev
Copy link
Owner

I can't process this request as of now sorry, I'm really busy today
I'll make sure to reply tomorrow

@stale
Copy link

stale bot commented May 27, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale label May 27, 2022
@palexdev palexdev removed the stale label May 27, 2022
@palexdev
Copy link
Owner

Sorry for the late response, I'm too much busy lately

So, I think your solution is quite good actually. I don't really see the utility of a MFXFieldGroup since it is basically a container (in this case a Pane) with a bunch of fields inside and a label which is the title of the group.
Also, rather than considering only text fields I'd rather generalize the concept and allow any control to be in the group. But at this point the Pane is just a decorator for another region.
Let's assume you have a login interface. So, you have two fields and maybe a bunch of buttons (to confirm, cancel of whatever). Ideally you want to place the two fields one below the other(vertical) and the two buttons one after the other(horizontal). As you can see the layout is pretty complex, so you would probably use a GridPane to make things easier or a combination of other panes. So the Pane which identifies this group would basically be a "decoration" at this point.
It should be pretty basic to make with a custom skin

I'll leave this open in case I change my mind in the future and decide to implement it but I can't make any promise.
As @Tech-Expert-Wizard also suggested you can implement the feature and send a PR, I will gladly review it and once it's good to go merge it

@palexdev palexdev added the to-evaluate To understand if it's worth it, or More info needed, or More investigation needed label May 31, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
to-evaluate To understand if it's worth it, or More info needed, or More investigation needed
Projects
None yet
Development

No branches or pull requests

3 participants