Alignment of div within html

Asked

Viewed 369 times

0

I have two Divs, when hidden the first need that the second ascend to her place, but she does not move, as I can do for her is in place of the first div, ie climb?

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

Follows the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Módulos</title>

    <style>
        table {
        }

        table-striped > tbody > tr:nth-child(odd) > th {
            background-color: red;
        }

        table-striped > tbody > tr:nth-child(odd) > td {
            background-color: white;
        }

        td {
            height: 40px;
        }

        th {
            color: white;
            background-color: #F44336;
            height: 40px;
            padding: 4px;
        }
    </style>
</head>
<body>
    <div id="divconsulta" class="container-fluid" style="margin-left: -29px; margin-right: -29px">
        <!--Striped Rows-->
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card-panel" style="margin-top: -29px; ">
                    <div class="body table-responsive">
                        <table id="grid_Modulos" class="table-striped"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form class="form" id="wizard_with_validation" method="POST">
        <div id="divcadastro" class="container-fluid" style="margin-left: -29px; margin-right: -29px;margin-top:0px;visibility:hidden">
            <!--Striped Rows-->
            <div class="row clearfix">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="card-panel">
                        <div class="card" style="background: rgba(245, 245, 245, 0.6)">
                            <div class="body">
                                <div class="row">
                                    <input id="id_id" name="id_id" type="hidden" class="form-control input-style" autofocus required>
                                    <label class="label-margin-top">Descrição*</label>
                                    <input id="id_nome" name="id_nome" type="text" class="form-control input-style input-casesensitive" autofocus required>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
html css

  • Dude, I copied your html/css and it has something very sinister ai, better vc review the css, because it is something that you inserted, I will post an html with basic bootstrap showing an example without overwriting anything of bootstrap.

  • There is a difference between using visibility:hidden and display:none. See what the difference is in this question.

2 answers

1


There is a difference between using visibility: hidden and display: none in an element. The difference has been discussed previously here:

What is the difference between display:None and visibility:Hidden?

In short, using the visibility: hidden, the space of the element is still occupied, not affecting the page layout. If you want the layout to respond to the element’s omission, use display: none.

Example using visibility: hidden

.red {
  background: red;
  height: 100px;
}

.green {
  background: green;
  height: 100px;
  visibility: hidden;
}

.blue {
  background: blue;
  height: 100px;
}
<div class="red"></div>
<div class="green">Este elemento será ocultado</div>
<div class="blue"></div>

Example using display: none

.red {
  background: red;
  height: 100px;
}

.green {
  background: green;
  height: 100px;
  display: none;
}

.blue {
  background: blue;
  height: 100px;
}
<div class="red"></div>
<div class="green">Este elemento será ocultado</div>
<div class="blue"></div>

Care: When defining the property display: none styling inline you will not be able to display the element through CSS or Javascript, because styles inline have higher priority than these, not being able to override it.

#teste {
  display: block;
}
<div id="teste" style="display: none">Stack Overflow em Português</div>

Read about in Which css selector has priority.

-2

Dude, what you can do is create a function in javascript, for example, triggered by clicking a link, button, etc, that hides the first DIV and changes a CSS class of the second DIV, changing its position on the screen. So that it occupies the position previously occupied by the other. This is if the two are visible when loading the page. One below the other. But if one will be shown only when the other is closed, then the answer has already been given.

  • Can use display: none even if both elements are visible. The layout will be adjusted by itself. Using JS for this would be gambiarra.

Browser other questions tagged html css

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