如何在另一个 div 中分配一个 div

大家早上好，我正在创建一个产品销售系统，这个话题会有点长，因为我想很好地解释它。

Vaadin + MySQL + SpringBoot + Maven 正在开发的系统

在主屏幕上，我们有带有新建、更改和删除按钮的网格：

单击新按钮时，会打开一个窗口以开始“销售”产品：

这里的问题如下，当我点击“+项目”时，会发生以下情况：

Problem: a scroll bar is created (to the right of the window), the Save, Close and + Item buttons are moved down (only appearing when the scroll bar is scrolled down). Every time I try to add a product (+ item), the process is repeated, the buttons are thrown down.

Desired solution: I would like the buttons to be “frozen or fixed” at the bottom of the window, and that by adding products the scroll bar can even be created, but without moving the buttons down

I thought of something like this:

the div2 that will receive the products cannot under any circumstances invade divs1 and 3 (upper and lower)

But I confess that I was unable to create this… I tried it in many ways, but they all failed

If anyone can help me I am grateful

my code:

package br.com.fjsistemas.cadastros.view;

import java.text.NumberFormat;
import java.text.ParseException;
import java.time.LocalDate;
import java.util.HashMap;
import java.util.List;
import java.util.Locale;
import java.util.Map;

import javax.annotation.PostConstruct;

import org.springframework.beans.factory.annotation.Autowired;
import org.vaadin.textfieldformatter.CustomStringBlockFormatter;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.datepicker.DatePicker;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.grid.GridVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.component.textfield.NumberField;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.data.binder.PropertyId;
import com.vaadin.flow.data.renderer.NumberRenderer;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;

import br.com.fjsistemas.backend.Cliente;
import br.com.fjsistemas.backend.Produto;
import br.com.fjsistemas.backend.Venda;
import br.com.fjsistemas.main.MainView;
import br.com.fjsistemas.repository.ClienteRepository;
import br.com.fjsistemas.repository.ProdutoRepository;
import br.com.fjsistemas.service.VendaService;

@Route(value = "venda-view", layout = MainView.class)
@PageTitle("Lançamento de Vendas")
public class VendaView extends VerticalLayout {

    private static final long serialVersionUID = 1L;

    private HorizontalLayout hltVenda = new HorizontalLayout();
    Grid<Venda> grdVenda = new Grid<>(Venda.class, false);

    private HorizontalLayout hltBarraBotoes = new HorizontalLayout();
    Button btnNovo = new Button("Novo");
    Button btnAlterar = new Button("Alterar");
    Button btnExcluir = new Button("Excluir");

    private Dialog dlgJanela = new Dialog();

    private FormLayout fltCamposVenda = new FormLayout();

    HorizontalLayout primeiraLinhaGuiaVenda = new HorizontalLayout();
    HorizontalLayout segundaLinhaGuiaVenda = new HorizontalLayout();
    
    Tab vender = new Tab("Vendas");
    Div venderDiv = new Div();

    Tab entrega = new Tab("Entregas");
    Div entregaDiv = new Div();

    Tab financeiro = new Tab("Financeiro");
    Div financeiroDiv = new Div();

    @PropertyId("data")
    private DatePicker txtDataVenda = new DatePicker("Data Venda");

    @PropertyId("nome")
    private ComboBox<Cliente> txtNomeCliente = new ComboBox<>();

    @PropertyId("telefone")
    private TextField txtTelefone = new TextField("Telefone");

    @PropertyId("celular")
    private TextField txtCelular = new TextField("Celular");

    @PropertyId("campoSomaValores")
    private TextField campoSomaValores = new TextField();

    private HorizontalLayout htlDlgBarraBotoes = new HorizontalLayout();
    private Button btnSalvar = new Button("Salvar");
    private Button btnFechar = new Button("Fechar");
    private Button btnAdicionarItem = new Button("+ Item");

    @Autowired
    VendaService vendaService;

    @Autowired
    ClienteRepository clienteRepository;

    @Autowired
    ProdutoRepository produtoRepository;

    private List<Venda> listaVendas;
    private Venda venda;

    Binder<Venda> binderVenda = new Binder<>(Venda.class);

    public VendaView() {

    }

    @PostConstruct
    public void init() {
        configuraTela();

    }

    private void configuraTela() {

        setMargin(false);
        setPadding(false);

        configuraHltVenda();
        configuraFltBarraBotoes();
        configuraDlgJanela();
        populaGrdVenda();
        configuraBinder();

        add(hltVenda, hltBarraBotoes);
    }

    private void configuraFltBarraBotoes() {

        btnNovo.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnNovo.addClickListener(e -> {
            novoClick();
        });

        btnAlterar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnAlterar.addClickListener(e -> {
            alterarClick();
        });

        btnExcluir.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnExcluir.addClickListener(e -> {
            excluirClick();
        });

        hltBarraBotoes.add(btnNovo, btnAlterar, btnExcluir);
    }

    private void excluirClick() {

        if (venda != null) {
            listaVendas.remove(venda);
            vendaService.delete(venda);
            atualizaGrdVenda();
        }
    }

    private void configuraHltVenda() {
        hltVenda.setWidthFull();
        configuraGrdVenda();
        hltVenda.add(grdVenda);
    }

    private void configuraGrdVenda() {
        grdVenda.setHeight("820px");
        grdVenda.setWidthFull();

        grdVenda.addColumn(Venda::getId).setHeader("ID:").setAutoWidth(true);

        grdVenda.addColumn(Venda::getDataVenda).setHeader("Data Venda:").setAutoWidth(true).setKey("dataVenda");

        grdVenda.addColumn(Venda::getNomeCliente).setHeader("Nome:").setAutoWidth(true).setKey("nome");

        grdVenda.addColumn(new NumberRenderer<>(Venda::getValorTotalVenda, "R$ %(,.2f", Locale.getDefault(), "R$ 0.00"))
                .setHeader("Valor Total:").setAutoWidth(true).setKey("valorTotalVenda");

        grdVenda.addThemeVariants(GridVariant.LUMO_COMPACT, GridVariant.LUMO_COLUMN_BORDERS);

        grdVenda.getColumns().forEach(col -> col.setAutoWidth(true).setSortable(true).setResizable(true));

        grdVenda.addItemClickListener(e -> {
            venda = e.getItem();
        });

    }

    private void configuraDlgJanela() {

        dlgJanela.setHeight("755px");
        dlgJanela.setWidth("860px");

//=====================================================================================================================

        txtNomeCliente.setWidth("390px");
        txtNomeCliente.setLabel("Nome Cliente");

        List<Cliente> listaDeClientes = clienteRepository.findAll();
        txtNomeCliente.setItemLabelGenerator(Cliente::getNome);
        txtNomeCliente.setItems(listaDeClientes);
        txtNomeCliente.addValueChangeListener(event -> {
            txtTelefone.setValue(event.getValue().getFone());
            txtCelular.setValue(event.getValue().getCelular());
        });

        new CustomStringBlockFormatter.Builder().blocks(0, 2, 4, 4).delimiters("(", ")", "-").numeric().build()
                .extend(txtTelefone);

        new CustomStringBlockFormatter.Builder().blocks(0, 2, 5, 4).delimiters("(", ")", "-").numeric().build()
                .extend(txtCelular);

//=====================================================================================================================

        Label text = new Label("Valor Total da Compra");
        text.getElement().getStyle().set("fontWeight", "bold");
        text.getStyle().set("margin-top", "30em");
        text.getStyle().set("margin-left", "5em");
        text.getStyle().set("text-align", "center");
        campoSomaValores.getStyle().set("margin-top", "30em");
        campoSomaValores.setWidth("30em");

//==========================================================================================================================    

        segundaLinhaGuiaVenda.add(txtNomeCliente, txtTelefone, txtCelular);

        fltCamposVenda.add(venderDiv, entregaDiv, financeiroDiv);
        venderDiv.setHeight("120px");
        venderDiv.add(txtDataVenda, segundaLinhaGuiaVenda);
        vender.add(venderDiv);

        LocalDate now = LocalDate.now();
        txtDataVenda.setValue(now);

        Map<Tab, Component> tabsToPages = new HashMap<>();
        tabsToPages.put(vender, venderDiv);
        tabsToPages.put(entrega, entregaDiv);
        tabsToPages.put(financeiro, financeiroDiv);
        Tabs tabs = new Tabs(vender, entrega, financeiro);
        Div pages = new Div(venderDiv, entregaDiv, financeiroDiv);

        tabs.addSelectedChangeListener(event -> {
            tabsToPages.values().forEach(page -> page.setVisible(false));
            Component selectedPage = tabsToPages.get(tabs.getSelectedTab());
            selectedPage.setVisible(true);
        });

        dlgJanela.add(tabs, pages);

        btnSalvar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnSalvar.getStyle().set("margin-top", "30em");
        btnSalvar.getStyle().set("margin-left", "0em");
        btnSalvar.addClickListener(e -> {
            salvarClick();
        });

        btnFechar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnFechar.getStyle().set("margin-top", "30em");
        btnFechar.addClickListener(e -> {
            dlgJanela.close();
        });

        btnAdicionarItem.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnAdicionarItem.getStyle().set("margin-top", "30em");
        btnAdicionarItem.addClickListener(e -> {
            adicionaProduto();
        });

        htlDlgBarraBotoes.add(btnSalvar, btnFechar, btnAdicionarItem, text, campoSomaValores);

        dlgJanela.add(fltCamposVenda, htlDlgBarraBotoes);
    }

    private void salvarClick() {

        venda = binderVenda.getBean();

        boolean adicionarLista = venda.getId() == null ? true : false;

        vendaService.create(venda);

        if (adicionarLista) {
            listaVendas.add(venda);
        }
        atualizaGrdVenda();
        novaVenda();
        txtNomeCliente.focus();

        binderVenda.setBean(venda);

        if (adicionarLista) {
            dlgJanela.close();
        }
    }

    private void populaGrdVenda() {

        listaVendas = vendaService.read();
        atualizaGrdVenda();
    }

    private void atualizaGrdVenda() {
        grdVenda.setItems(listaVendas);
    }

    private void configuraBinder() {

        binderVenda.bindInstanceFields(this);

    }

    private void novoClick() {

        novaVenda();
        binderVenda.setBean(venda);

        dlgJanela.open();
        txtNomeCliente.focus();
    }

    private void alterarClick() {

        if (venda != null) {
            binderVenda.setBean(venda);

            dlgJanela.open();

        }
    }

    private void adicionaProduto() {

        ComboBox<Produto> txtProdutos = new ComboBox<>();

        NumberField txtQuantidade = new NumberField("Quantidade");

        TextField txtValorUnitario = new TextField("Valor Unitário");

        TextField txtValorTotalItem = new TextField("Valor Total Item");

        txtProdutos.setWidth("370px");
        txtProdutos.setLabel("Produtos");
        List<Produto> listaDeProdutos = produtoRepository.findAll();
        txtProdutos.setItemLabelGenerator(Produto::getNome);
        txtProdutos.setItems(listaDeProdutos);
        txtProdutos.addValueChangeListener(event -> {

            NumberFormat formatter = NumberFormat.getCurrencyInstance(new Locale("pt", "BR"));
            try {

                txtValorUnitario.setValue(formatter.format(event.getValue().getValor()));

            } catch (Exception e) {
                e.printStackTrace();
            }

        });

//==========================================================================================================================

        txtQuantidade.setHasControls(true);
        txtQuantidade.setValue(null);
        txtQuantidade.setMin(1);

        txtQuantidade.addValueChangeListener(event -> {

            NumberFormat formatter = NumberFormat.getCurrencyInstance(new Locale("pt", "BR"));
            double valorTotal = 0;
            try {
                valorTotal = formatter.parse(txtValorUnitario.getValue()).doubleValue() * txtQuantidade.getValue();
            } catch (ParseException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            }
            txtValorTotalItem.setValue(formatter.format(valorTotal));
            campoSomaValores.setValue(formatter.format(valorTotal));
        });

        HorizontalLayout linhaNova = new HorizontalLayout();
        
        linhaNova.add(txtProdutos, txtQuantidade, txtValorUnitario, txtValorTotalItem);
        

        venderDiv.add(linhaNova);

    }

    private void novaVenda() {
        venda = new Venda();
        venda.setNomeCliente(" ");
        dlgJanela.close();

    }
}