Padding an X panel when adding class in a Y panel (both from the same parent panel)

Asked

Viewed 28 times

0

Good night my people,

I have a screen where I have a sidebar on the left side. When I define it with the CSS class. modoCompact it gets 50 pixels wide, adjusting the buttons and layout. When I put the class . modoExpanded it gets in common size. My root panel is an Anchorpane, so I can leave the buttons expandable with in the compact mode as in the following code:

#PainelRoot #PainelMenuEsquerda {
    -fx-background-color: #222;
    -fx-background-insets: 0px;
    -fx-background-radius: 0px;
    -fx-padding: 0px;
    -fx-spacing: 14px;
}

#PainelRoot #PainelMenuEsquerda #PainelTitulo .label {
    -fx-content-display: LEFT;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
    -fx-graphic-text-gap: 14px;
    -fx-max-width: Infinity;
    -fx-padding: 14px;
    -fx-text-fill: #FFF;
}

#PainelRoot #PainelMenuEsquerda #PainelTitulo .button {
    -fx-content-display: GRAPHIC_ONLY;
}

#PainelRoot #PainelMenuEsquerda #ListaOpcoes {
    -fx-spacing: 7px;
}

#PainelRoot #PainelMenuEsquerda #ListaOpcoes .button, #PainelMenuEsquerda #PainelTitulo .button {
    -fx-alignment: CENTER_LEFT;
    -fx-background-color: transparent;
    -fx-background-insets: 0px;
    -fx-background-radius: 0px;
    -fx-cursor: HAND;
    -fx-font-size: 14px;
    -fx-max-width: Infinity;
    -fx-padding: 14px 17.5px 14px 14px;
    -fx-text-fill: #FFF;
}

#PainelRoot #PainelMenuEsquerda #ListaOpcoes .button:hover, #PainelMenuEsquerda #PainelTitulo .button:hover {
    -fx-background-color: #3399FF99;
}

#PainelRoot .modoCompacto {
    -fx-padding: 0px 0px 0px 50px;
}

#PainelRoot .modoExpandido {
    -fx-padding: 0px 0px 0px 224px;
}

#PainelRoot .modoExpandido #ListaOpcoes .button {
    -fx-content-display: LEFT;
    -fx-graphic-text-gap: 14px;
    -fx-pref-width: 224px;
}

#PainelRoot .modoCompacto, .modoCompacto #PainelTitulo .button {
    -fx-max-width: 50px;
    -fx-min-width: 50px;
}

#PainelRoot .modoCompacto #PainelTitulo {
    -fx-max-width: 224px;
    -fx-min-width: 224px;
    -fx-rotate: -270.0;
    -fx-translate-x: -87px;
    -fx-translate-y: -87px;
}

#PainelRoot .modoCompacto #PainelTitulo .button {
    -fx-rotate: -90.0;
}

#PainelRoot .modoCompacto #PainelTitulo .button .image-view, .modoCompacto #ListaOpcoes .button .image-view {
    -fx-translate-x: 3.5;
}

#PainelRoot .modoCompacto #ListaOpcoes .button {
    -fx-content-display: GRAPHIC_ONLY;
    -fx-graphic-text-gap: 35px;
}

#PainelRoot .modoCompacto #ListaOpcoes .button:hover {
    -fx-content-display: LEFT;
    -fx-min-width: 224px;
}

Now let’s get to what I need.

When I add the class . modoCompact on Painelmenulateral wanted Painelcontainer to have a custom padding. What would be the syntax to do this more profitably? I wanted that when I added this class to the sidebar it would change the Painelcontainer. Both are from the same Painelroot parent panel.

css javafx fxml

  • If that’s what I think you’re trying to do, you can use js to add a class that would be responsible for padding. $(".classe").click(function({$(".painel").addClass("mudapadding");});

  • Add html to your question.

  • Michel Douglas puts the HTML of your page and the full CSS that makes it easy to give you an accurate answer. Maybe just with CSS to solve this!

  • Guys, thanks for the help. But please more attention. It’s a FXML, Javafx

No answers

Browser other questions tagged css javafx fxml

You are not signed in. Login or sign up in order to post.