CODEWITHSUNDEEP
javascripthtmlcss
Dileep.M
Dileep.M

Reputation: 114

Resizing of a Absolute Positioned Element

The Element is not resizing and browser is not re-calculating the position of the Element even though all the widths and heights are mentioned in percentages only. This code basically renders a Squared DIV with Two elements one with Centered and another at right top corner of the SQuare.

        <html>
        <head>
            <style>
                .board {
                    font-size: 8em;
                }

                .cellContainerOuter {
                    width: 100%;
                    padding-bottom: 100%;
                    position: relative;
                    background-color: yellow;
                    border: 1px solid black;
                }

                .cellContainer {
                    width: 100%;
                    padding-bottom: 100%;
                    position: absolute;
                    display: table;
                }

                .cellContainerInner {
                    padding-bottom: 50%;
                    padding-top: 50%;
                    padding-left: 50%;
                    padding-right: 50%;
                    position: relative;
                    display: table-cell;
                    text-align: center;
                    vertical-align: middle;
                }

                .text {
                    border: 0px dotted white;
                    position: absolute;
                    bottom: 20%;
                    top: 20%;
                    left: 20%;
                    right: 20%;
                    overflow: hidden;
                    text-overflow: clip;

                    display: block;
                }

                .weight {
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    margin: 2px;
                    border: 1px solid white;
                }
            </style>
        </head>
        <body>
            <div class="board">
                <div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
                    <div id="cell2_C_1" class="cellContainer" title="ఇ">
                        <div id="cell_C_1" class="cellContainerInner" title="ఇ">
                            <span id="weight_C_1" class="weight" title="6">6</span>
                            <span id="text_C_1" class="text" title="ఇ">ఇ</span>
                        </div>
                    </div>
                </div>
            </div>
        </body>
        </html>

Any help to resolve this issue is highly appreciated.

CodePen: https://codepen.io/mdileep/full/MGrNgw/

Upvotes: 1

Views: 54

Answers (1)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Refactored your CSS.

Let me know if this is the behaviour you are expecting. OR with responsive you mean to change your height of 6 as well?

body {
  margin: 0;
}

.cellContainer {
  position: relative;
  background: yellow;
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
  margin: 10px;
}

.cellContainerInner {
  border: 1px solid;
  height: 100%;
  display: flex;
}

.weight {
  font-size: 8em;
  position: absolute;
  right: 0px;
  top: 0px;
  border: 1px solid;
}

.text {
  flex: 1;
  font-size: 8em;
  /*   border:2px solid; */
  align-self: center;
  text-align: center;
}
<div class="board">
  <div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
    <div id="cell2_C_1" class="cellContainer" title="ఇ">
      <div id="cell_C_1" class="cellContainerInner" title="ఇ">
        <span id="weight_C_1" class="weight" title="6">6</span>
        <span id="text_C_1" class="text" title="ఇ">ఇ</span>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions