Блог

Главная - Вопросы по программированию - Область текста или ввод текста имеют неправильный размер, но, изменившись на что-то другое, они изменяются

Область текста или ввод текста имеют неправильный размер, но, изменившись на что-то другое, они изменяются

#javascript #html #css #textarea #sizing

Вопрос:

Я пытаюсь создать расширение для браузера, я сделал это для динамического создания панели с чем-то на ней на странице.

panel.js часть

 function createFunctionality() {
    var body = document.getElementsByTagName('body')[0];
    var sidePanel = createSidePanel(body);
    createLabel(createDivContainer(sidePanel, 'panelContainer'), 'Text');
    createTextArea(createDivContainer(sidePanel, 'panelContainer'));
    createButton(createDivContainer(sidePanel, 'panelContainer'), 'Apply');
    
    createPanelOpeningButton(body);
}

function createLabel(parent, text = '') {
    var panelLabel = document.createElement('label');
    panelLabel.id = 'panelLabel';
    panelLabel.innerHTML = text;
    parent.appendChild(panelLabel);
    return panelLabel;
}

function createTextArea(parent, text = '') {
    var textArea = document.createElement('textArea');
    textArea.innerHTML = 'button';
    textArea.id = 'panelTextArea';
    parent.appendChild(textArea);
    return textArea;
}

function createButton(parent, text = '') {
    var panelButton = document.createElement('button');
    panelButton.id = 'panelButton';
    panelButton.innerHTML = text;
    parent.appendChild(panelButton);
    return panelButton;
}

function createDivContainer(parent, className) {
    var divContainer = document.createElement('div');
    divContainer.className = className;
    parent.appendChild(divContainer);
    return divContainer;
}

function createSidePanel(parent) {
    var sidenav = document.createElement('div');
    sidenav.id = 'sidePanel';
    parent.appendChild(sidenav);
    return sidenav;
}

var state;
function createPanelOpeningButton(parent) {
    var button = document.createElement('button');
    button.innerHTML = '<';
    button.id='panelOpenButton';
    state = false;
    button.addEventListener('click', function() {
        if (state) {
            closeNav();
        } else {
            openNav();
        }
        state = !state;
    });
    parent.appendChild(button);
}

панель.css

 #panelOpenButton{
    position: fixed;
    top: 50%;
    right: 0%;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    text-align: left;
    height: 50px;
    width: 20px;
    transition: 0.5s;
}

#panelOpenButton:hover {
    background: #63d476;
}

.panelContainer {
    position: relative;
    padding-right: 7px;
    padding-left: 7px;
    padding-top: 5px;
    padding-bottom: 0;
}
    
#sidePanel {
    position: fixed;
    z-index: 1000;
    height: 100%;
    width: 250px;
    top: 0;
    right: -250px;
    
    background-color: #63d476;
    overflow-x: hidden;
    transition: 0.5s;
}

#panelLabel {
    position: relative;
    text-align: center;
}
    
#panelTextArea {
    all: none; /*without it also the same*/
    position: relative;
    width: 100%;
}

#panelButton {
    position: relative;
    width: 100%;
}

But there is a problem that textarea doesn’t size like all elements.

This is the result.

I tried to do the same just in html file with this code (without opening script here):

 <html>
    <head>
        <link rel="stylesheet" href="panel.css">
    </head>
    <body style="overflow:scroll;">
        <button id="panelOpenButton">amp;<</button>
        <div id="sidePanel">
            <div class="panelContainer"><label id="panelLabel">Text</label></div>
            <div class="panelContainer"><textArea id="panelTextArea"></textArea></div>
            <div class="panelContainer"><button id="panelButton">Apply</button></div>
        </div>
    </body>
</html>

And then it works correctly.

What I get on the page.

But this is happening only with at least textarea and input of text type, because i tried to change textarea on button, and both results size as I want, what’s the problem here?

Метки: , , ,