Home > Software engineering >  How to adapt the size of a button to his parent (responsive)?
How to adapt the size of a button to his parent (responsive)?

Time：12-21

Hello I am currently having a problem adjusting the size of the button to the size of the header. Indeed, I would like the button to remain in its header in terms of width and height, depending on the screen size. I tried to use vh and vw to make the button fit the screen size but it did not work.

Here is the files HTML and CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root{
    /* ===== Colors ===== */
    --body-color: #E4E9F7;
    --sidebar-color: #FFF;
    --primary-color: #1c1a1a;
    --primary-color-light: #F6F5FF;
    --toggle-color: #DDD;
    --text-color: #707070;

    /* ===== Transition ===== */
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
}

body{
    height: 100vh;
    background: var(--body-color);
}

/*Paramètres de la page des templates*/
.home{
    position: relative;
    height: 100vh;
    left: 78px;
    width: calc(100% - 78px);
    background: var(--body-color);
    transition: var(--tran-05);
}

/*Paramètre texte de la page*/
.home .text{
    font-size: 30px;
    font-weight: 500;
    color: var(--text-color);
    padding: 8px 40px;
}

/*Activer le mouvement de la page*/
.sidebar.active ~ .home{
    left: 240px;
    width: calc(100% - 78px);
}

/*--------------------- FENETRE MODAL PARAMETRE ---------------------*/
.modal-container-param{
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #1c1a1a;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.parameter{
    position: relative;
    top: 25%;
    background-color: rgb(170, 170, 170);
    margin: 100px auto;
    padding: 0;
    width: 300px;
    max-width: 85%;
}

.parameter .popup-header{
    padding: 2px 16px;
    background-color: #ffffff;
    color: #1c1a1a;
    display: flex;
}

.parameter .popup-header h1{
    font-size: 12px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
}

.parameter .close-modal{
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 10px;
    padding: 1.5px 20px;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    background: #fff;
    color: rgb(0, 0, 0);
}

.parameter .close-modal:hover{
    color: #FFF;
    background: rgb(188, 15, 15);
}

.parameter .popup-body{
    padding: 2px 16px;
}

.form{
    width: 100%;
}

.form h1{
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    font-family: Montserrat, sans-serif;
    font-weight: bold;
}

.form .input_field{
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form .input_field label{
    width: 150px;
    color: #11101d;
    margin-right: 10px;
    font-size: 15px;
}

.form .custom_select_c{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #11101d;
    font-size: 14px;     
}

.form .custom_select_c select{
    margin-top: 10px;
    margin-bottom: 2px;
    border: 1px solid #d5dbd9;
    width: 30%;
    height: 100%;
    padding: 1px 2px;
    border-radius: 3px;
}

.form .custom_select_l{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #11101d;
    font-size: 14px;     
}

.form .custom_select_l select{
    margin-bottom: 2px;
    border: 1px solid #d5dbd9;
    width: 30%;
    height: 100%;
    padding: 1px 2px;
    border-radius: 3px;
}

.form .custom_select_l label{
    width: 150px;
    color: #11101d;
    margin-right: 10px;
    font-size: 15px;
}

.form .custom_select_c label{
    width: 150px;
    color: #11101d;
    margin-right: 10px;
    font-size: 15px;
}

.form .input_field label{
    width: 150px;
    color: #11101d;
    margin-right: 10px;
    font-size: 15px;
}   

.form .input_field .input,
.form .input_field .textarea{
    width: 30%;
    outline: none;
    border: 1px solid #d5dbd9;
    font-size: 15px;
    padding:1px 2px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.form .input_field .btn{
    width: 100%;
    padding: 8px 10px;
    font-size: 15px;
    border: 0;
    background: #707070;
    color: #FFF;
    cursor: pointer;
    outline: none;
}

.form .input_field .btn:hover{
    background: #11101d;
    color: #FFF;
}


.form .link{
    margin-top: 10px;
}

.tcp{
    display: none;
}


.tcp.active{
    display:block;
}

.udp{
    display: none;
}


.udp.active{
    display:block;
}

.serie{
    display: none;
}


.serie.active{
    display:block;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
    
    <!----===== CSS ===== -->
    <link rel="stylesheet" href="style.css">

    <!----===== Boxicons CSS ===== -->
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

    <title>Sail Vision</title>
  </head>
  <body>
      <div >
        <div >
          <div >
            <div >
              <button >X</button>
              <h1>Paramétres de liaisons</h1>
            </div>
            <div >
              <div >
                <div >
                  <label>Type de centrale</label>
                  <select name="selectc" >
                    <option value="nmea" selected>NMEA</option>
                    <option value="nke">NKE</option>
                    <option value="bravo" >BRAVO</option>
                  </select>
                </div>
                <div >
                  <label>Type de liaisons</label>
                  <select  name="selectl">
                    <option value="serie" selected>SERIE</option>
                    <option value="udp">UDP</option>
                    <option value="tcp" >TCP</option>
                  </select>
                </div>
                <div >
                  <div  id="u">
                    <div >
                      <label>Numero de port IN</label>
                      <input type="text" >
                    </div>
                  </div>
                  <div  id="s">
                    <div >
                      <label>Com</label>
                      <input type="text" >
                    </div>
                  </div>
                  <div  id="t">
                    <div >
                      <label>Adresse IP</label>
                      <input type="text" >
                    </div>
                    <div >
                      <label>Numero de port</label>
                      <input type="text" >
                    </div>
                  </div>
                </div>
                <div >
                  <input type="submit" value="Connect" >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </body>
</html>

Regards,

CodePudding user response：

A tag element with relative positioning gives you the control to absolutely position children elements inside of it. So add position relative to the class 'popup-header' and set the height to 100% to the class '.parameter .close-modal' so it will take 100% of the height of its parent:

.parameter .popup-header {
    padding: 2px 16px;
    background-color: #ffffff;
    color: #1c1a1a;
    display: flex;
    position: relative;
}

.parameter .close-modal {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 10px;
    padding: 1.5px 20px;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    background: #fff;
    color: rgb(0, 0, 0);
    height: 100%;
}

CodePudding user response：

copy this code. It should work now. If not let me know in the comments.

If you set children elements as position: absolute; the parent element must be set as position: relative;. Otherwise absolute positioning will cause problems.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root{
    /* ===== Colors ===== */
    --body-color: #E4E9F7;
    --sidebar-color: #FFF;
    --primary-color: #1c1a1a;
    --primary-color-light: #F6F5FF;
    --toggle-color: #DDD;
    --text-color: #707070;

    /* ===== Transition ===== */
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
}

body{
    height: 100vh;
    background: var(--body-color);
}

/*Paramètres de la page des templates*/
.home{
    position: relative;
    height: 100vh;
    left: 78px;
    width: calc(100% - 78px);
    background: var(--body-color);
    transition: var(--tran-05);
}

/*Paramètre texte de la page*/
.home .text{
    font-size: 30px;
    font-weight: 500;
    color: var(--text-color);
    padding: 8px 40px;
}

/*Activer le mouvement de la page*/
.sidebar.active ~ .home{
    left: 240px;
    width: calc(100% - 78px);
}

/*--------------------- FENETRE MODAL PARAMETRE ---------------------*/
.modal-container-param{
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #1c1a1a;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.parameter{
    position: relative;
    top: 25%;
    background-color: rgb(170, 170, 170);
    margin: 100px auto;
    padding: 0;
    width: 300px;
    max-width: 85%;
}

.parameter .popup-header{
    padding: 2px 16px;
    background-color: #ffffff;
    color: #1c1a1a;
    display: flex;
 position: relative;
}

.parameter .popup-header h1{
    font-size: 12px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
}

.parameter .close-modal{
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 10px;
    padding: 1.5px 20px;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    background: #fff;
    color: rgb(0, 0, 0);
}

.parameter .close-modal:hover{
    color: #FFF;
    background: rgb(188, 15, 15);
}

.parameter .popup-body{
    padding: 2px 16px;
}

.form{
    width: 100%;
}

.form h1{
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    font-family: Montserrat, sans-serif;
    font-weight: bold;
}

.form .input_field{
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form .input_field label{
    width: 150px;
    color: #11101d;
    margin-right: 10px;
    font-size: 15px;
}

.form .custom_select_c{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #11101d;
    font-size: 14px;     
}

.form .custom_select_c select{
    margin-top: 10px;
    margin-bottom: 2px;
    border: 1px solid #d5dbd9;
    width: 30%;
    height: 100%;
    padding: 1px 2px;
    border-radius: 3px;
}

.form .custom_select_l{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #11101d;
    font-size: 14px;     
}

.form .custom_select_l select{
    margin-bottom: 2px;
    border: 1px solid #d5dbd9;
    width: 30%;
    height: 100%;
    padding: 1px 2px;
    border-radius: 3px;
}

.form .custom_select_l label{
    width: 150px;
    color: #11101d;
    margin-right: 10px;
    font-size: 15px;
}

.form .custom_select_c label{
    width: 150px;
    color: #11101d;
    margin-right: 10px;
    font-size: 15px;
}

.form .input_field label{
    width: 150px;
    color: #11101d;
    margin-right: 10px;
    font-size: 15px;
}   

.form .input_field .input,
.form .input_field .textarea{
    width: 30%;
    outline: none;
    border: 1px solid #d5dbd9;
    font-size: 15px;
    padding:1px 2px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.form .input_field .btn{
    width: 100%;
    padding: 8px 10px;
    font-size: 15px;
    border: 0;
    background: #707070;
    color: #FFF;
    cursor: pointer;
    outline: none;
}

.form .input_field .btn:hover{
    background: #11101d;
    color: #FFF;
}


.form .link{
    margin-top: 10px;
}

.tcp{
    display: none;
}


.tcp.active{
    display:block;
}

.udp{
    display: none;
}


.udp.active{
    display:block;
}

.serie{
    display: none;
}


.serie.active{
    display:block;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
    
    <!----===== CSS ===== -->
    <link rel="stylesheet" href="style.css">

    <!----===== Boxicons CSS ===== -->
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

    <title>Sail Vision</title>
  </head>
  <body>
      <div >
        <div >
          <div >
            <div >
              <button >X</button>
              <h1>Paramétres de liaisons</h1>
            </div>
            <div >
              <div >
                <div >
                  <label>Type de centrale</label>
                  <select name="selectc" >
                    <option value="nmea" selected>NMEA</option>
                    <option value="nke">NKE</option>
                    <option value="bravo" >BRAVO</option>
                  </select>
                </div>
                <div >
                  <label>Type de liaisons</label>
                  <select  name="selectl">
                    <option value="serie" selected>SERIE</option>
                    <option value="udp">UDP</option>
                    <option value="tcp" >TCP</option>
                  </select>
                </div>
                <div >
                  <div  id="u">
                    <div >
                      <label>Numero de port IN</label>
                      <input type="text" >
                    </div>
                  </div>
                  <div  id="s">
                    <div >
                      <label>Com</label>
                      <input type="text" >
                    </div>
                  </div>
                  <div  id="t">
                    <div >
                      <label>Adresse IP</label>
                      <input type="text" >
                    </div>
                    <div >
                      <label>Numero de port</label>
                      <input type="text" >
                    </div>
                  </div>
                </div>
                <div >
                  <input type="submit" value="Connect" >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </body>
</html>

Page link：https//www.codepudding.com/Softwareengineering/648771.html

Prev:How to strip html elements from string in nested list, Python
Next:CSS div position based on parent element
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding