0

Falaa pessoal, boa tarde!

Seguinte, estou com um problema relacionado ao meu css e não estou conseguindo resolver. O problema ocorre pois em uma <ul> eu tenho 3 ícones de botão(aceitar, cancelar e editar), quero colocar esses 3 botões ao lado direito superior de cada <ul>, mas quando coloco position: absolute; ele some com 2 botões ficando apenas com o botao de cancelar, quando troco o position para relative ele aparece os 3 botões mas fica la em baixo. Alguém pode me dar uma força? Segue o código abaixo…

CSS

.profile-container ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 24px;
list-style: none;
}

.profile-container ul li {
    background: #FFF;
    padding: 24px;
    border-radius: 8px;
    position: relative;
}

.profile-container ul li button {
    display: inline-block;
    position: absolute;
    right: 24px;
    top: 24px;
    border: 0;
}

Front

return (
<div className="profile-container">
    <header>
        <img src={schoolIso} alt="school Isotipo" />
        <span>Bem vindo, {nameSchool}</span>

        <Link className="button" to="/">Eventos</Link>
        <button onClick={handleLogout} type="button">
            <FiPower size={18} color="#E02041" />
        </button>
    </header>

    <Tabs className="menu" >
        <Tab className="tab" label="Meus Dados" />
        <Tab className="tab" label="Professores" />
        <Tab className="tab" label="Cursos" />
        <Tab className="tab" label="Dashboard" />
        <Tab className="tab" label="Suporte" />
    </Tabs>

    <h1>Meus Dados</h1>
    <h1>Endereço</h1>
    <ul>
        {schools.map(school => (
            <li key={school.idSchool} >

                <strong>Nome da Instituição:</strong>
                <p contenteditable="true">{school.nameSchool}</p>

                <strong>CNPJ:</strong>
                <p>{school.cnpj}</p>

                <strong>Email:</strong>
                <p>{school.emailSchool}</p>

                <strong>Whatsapp:</strong>
                <p>{school.whatsappSchool}</p>

                <button type="button">
                    <FaEdit size={20} color="#a8a8b3" />
                </button>
                <button type="button">
                    <BiCheck size={20} color="#a8a8b3" />
                </button>
                <button type="button">
                    <BiX size={20} color="#a8a8b3" />
                </button>
            </li>
        ))}
        {schools.map(school => (
            <li key={school.idAdress}>

                <strong>Bairro:</strong>
                <p>{school.district}</p>

                <strong>Rua:</strong>
                <p>{school.street}</p>

                <strong>Número:</strong>
                <p>{school.number}</p>

                <strong>Complemento:</strong>
                <p>{school.complement}</p>

                <strong>CEP:</strong>
                <p>{school.cep}</p>

                <button type="button">
                    <FaEdit size={20} color="#a8a8b3" />
                </button>
                <button type="button">
                    <BiCheck size={20} color="#a8a8b3" />
                </button>
                <button type="button">
                    <BiX size={20} color="#a8a8b3" />
                </button>
            </li>
        ))}
    </ul>
</div>

);

Resultado com position: relative;

inserir a descrição da imagem aqui

Resultado com position: absolute;

inserir a descrição da imagem aqui

1 Resposta 1

0

Na verdade está ficando um por cima do outro, mas todos estão lá! BiX que é o último btn a renderizar fica por cima dos outros deixando eles encobertos.

Para resolver existem várias formas, mas uma bem simples seria simplesmente colocar um right nos btns que estão encobertos usando style={{ right: N }}

<button type="button">
    <FaEdit size={20} color="#a8a8b3" style={{ right: 40 }}/>
</button>
<button type="button">
    <BiCheck size={20} color="#a8a8b3" style={{ right: 20 }}/>
</button>
<button type="button">
    <BiX size={20} color="#a8a8b3" />
</button>
1
  • 1
    Show de bola amigo, isso resolveu. Commented 23/09/2020 às 16:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .