Блог

Главная - Вопросы по программированию - Размер всплывающего окна расширения Chrome не меняется

Размер всплывающего окна расширения Chrome не меняется

#javascript #html #css #google-chrome #google-chrome-extension

#javascript #HTML #css #google-chrome #google-chrome-extension

Вопрос:

Мой popup.html файл в этом формате (это весь файл):

 <!DOCTYPE html>
<head>
</head>
<body style="background:#000000;overflow: hidden;">

<canvas id='ctx' width='750' height='450' style='border:white solid 2px;'></canvas>
<canvas id='ctx2' width='150' height='90' style='position:absolute;top:360px;left:20px;border:1px solid black;'></canvas>
<div id='pauseMenu'>

    <div class='menuHeader'>
        <button style='color:white;background:black' id='pause'>P to Resume</button>
        <button id='trackB'>Track</button>
        <button id='modelB'>Model</button>
        <button id='controlB'>Controls</button>
        <button id='settingB'>Settings</button>
    </div>

    <div class='menu' id='track' style='display:flex;'>
        <div style='flex:25%;'>
            <p>Track:</p>
            <select id='tracks'></select><br>
            <p id='selectedTrack'></p>
            <div class='smallBut' id='reset'>Reset</div>
        </div>
        <div style='flex:75%;'>
            <img id='map' src='' width='500' height='300' style='position:absolute;right:10;top:80px;'>
        </div>
    </div>

    <div class='menu' id='model' style='display:flex;'>
        <div style='flex:25%;'>
            <p>Car:</p>
            <select id='models'></select><br>
            <p id='selectedModel'></p>
            <div class='smallBut' id='showAdvanced' style='width:100px'>Show Advanced</div>
        </div>
        <div style='flex:75%;'>
            <img id='modelImg' src='' width='258' height='120' style='position:absolute;right:10;top:80px;margin-right:100px;background:white;'>
        </div>
    </div>

    <div class="menu control" id="settings" style="overflow-y: scroll;">
        <table style='font-size: 12px;'>
            <tr>
                <td>Cur. best ghost:</td>
                <td><textarea id='bghost'></textarea></td>
            </tr>
            <tr>
                <td>Prev. lap ghost:</td>
                <td><textarea id='pghost'></textarea></td>
            </tr>
            <tr>
                <td>Import ghost:</td>
                <td><textarea id='ighost'></textarea></td>
            </tr>
            <tr>
                <td>Reset all times:</td>
                <td><button id='resall' style='color:white;background:black;'>Reset</button></td>
            </tr>
            <tr>
                <td>Framerate (fps):</td>
                <td>
                    <select id='fps'>
                        <option value='1'>120</option>
                        <option value='2'>60 (rec)</option>
                        <option value='3'>40</option>
                        <option value='4'>30</option>
                        <option value='6'>20</option>
                        <option value='8'>15</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Show Best For:</td>
                <td>
                    <select id='best'>
                        <option value='0'>Ferrari F1</option>
                        <option value='1'>Bugatti Chiron</option>
                        <option value='2'>Toyota Corolla</option>
                        <option value='3'>Red Bull x2010</option>
                        <option value='4'>Lamborghini Huracan</option>
                        <option value='5'>BMW 7-series</option>
                        <option value='6'>Porsche 919</option>
                        <option value='7'>None</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Post-pause Countdown:</td>
                <td>
                    <select id='cdown'>
                        <option value='3'>0 seconds</option>
                        <option value='2'>1 second</option>
                        <option value='1'>2 seconds</option>
                        <option value='0'>3 seconds</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Show Mini-map:</td>
                <td>
                    <input type="checkbox" id="minimap">
                </td>
            </tr>
            <tr>
                <td>Max Drift Mark Length:</td>
                <td>
                    <select id='driftMark'>
                        <option value='0'>0 (Off)</option>
                        <option value='500'>500</option>
                        <option value='1000'>1000 (rec)</option>
                        <option value='2000'>2000</option>
                        <option value='5000'>5000</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Smoke Density:</td>
                <td>
                    <select id='smokeDensity'>
                        <option value='0'>0 (Off)</option>
                        <option value='1'>1 (rec)</option>
                        <option value='2'>2</option>
                        <option value='3'>3</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Max Smoke Volume:</td>
                <td>
                    <select id='smokeVolume'>
                        <option value='0'>0 (Off)</option>
                        <option value='1000'>1000</option>
                        <option value='2000'>2000</option>
                        <option value='5000'>5000 (rec)</option>
                        <option value='10000'>10000</option>
                        <option value='20000'>20000</option>
                    </select>
                </td>
            </tr>
        </table>
    </div>
    <div class="menu control" id='controls'>
        <table>
            <tr>
                <td>Up arrow</td>
                <td>Acceleration</td>
            </tr>
            <tr>
                <td>Left/right arrow</td>
                <td>Steering</td>
            </tr>
            <tr>
                <td>Down arrow</td>
                <td>Braking</td>
            </tr>
            <tr>
                <td>Q</td>
                <td>  Traction Control</td>
            </tr>
            <tr>
                <td>A</td>
                <td>- Traction Control</td>
            </tr>
            <tr>
                <td>X</td>
                <td>Automatic/Manual toggle</td>
            </tr>
            <tr>
                <td>W</td>
                <td>Up shift</td>
            </tr>
            <tr>
                <td>S</td>
                <td>Down shift</td>
            </tr>
            <tr>
                <td>P</td>
                <td>Pause toggle</td>
            </tr>
            <tr>
                <td>Shift</td>
                <td>Reset timer</td>
            </tr>
            <tr>
                <td>R</td>
                <td>Reset drift marks</td>
            </tr>
            <tr>
                <td>T</td>
                <td>Reset car</td>
            </tr>
            <tr>
                <td>Space</td>
                <td>E-Brake</td>
            </tr>
        </table>
    </div>
</div>
<script type="text/javascript" src='main.js'></script>
</body>
<style>
html{
    overflow: hidden;width:760px;height:450px;
}
*{
    color:white;
}
.control{
    column-count:2;
}
td{
    padding:10px;
    border: 3px solid black;
    border-radius: 5px;
    color: black;
    text-align: center;
}
table{
    border-collapse: collapse;
    background-color: white;
    margin:10px;
}
button{
    border:none;
    background:white;
    width:137.25px;
    height:50px;
    color:black;
    font-weight: 800;
    font-family:'Georgia';
    font-size:15px;
}
button:hover{
    background:gray;
}
textarea{
    color:black;
}
canvas {margin: 0; overflow: hidden}
#pauseMenu{
    position:absolute;
    display:none;
    width:700px;
    height:400px;
    left:30px;
    top:30px;
}
.menuHeader{
    width:700px;
    height:50px;
    background:black;
    z-index: 100;
    border:white 2px solid;

}
.menu{
    width:700px;
    height:350px;
    background: black;
    z-index: 99;
    margin-top:3px;
    border:white 2px solid;
}
.smallBut{
    border-radius:2px;background:white;width:50px;height:20px;padding-top:5px;color:black;text-align:center;margin:auto;
    cursor: pointer;
}
.smallBut:hover{
    background:gray;
}
p{
    font-family:Georgia;
    font-size:15px;
    padding:10px;
    background:white;
    color:black;
    text-align:center
}
select{
    margin:auto;
    padding:10px;
    color:black;
}
b{
    color:black;
}
</style>
</html>

Я сталкиваюсь с двумя проблемами:

  1. Несмотря на то, что у меня есть overflow: hidden;, полоса прокрутки все еще появляется
  2. Часть правой части холста обрезается, даже если ширина тела / html больше, чем ширина холста. Независимо от того, насколько большой я делаю ширину тела / html, размер всплывающего окна фактически не меняется.

Я могу предоставить более подробную информацию, если вы хотите, пожалуйста, помогите.

Комментарии:

1. Да, пожалуйста, приведите рабочий пример вашей проблемы, прямо сейчас не могу разобраться в реальной проблеме.

2. Я не совсем уверен, как это сделать, но большая проблема в том, что размер всплывающего окна меньше, чем холст, поэтому он обрезает часть холста, хотя размеры html-тега больше.

3. Удалить position: fixed .

4. Можете ли вы добавить свой js-файл или создать пример во фрагменте. приведенный выше код ничем не может помочь

5. Пожалуйста, предоставьте полный фрагмент, чтобы сообщество stack могло помочь вам лучше.