Button margin/padding - Githubissues

gleblebedev commented 1 year ago

I'm trying to make a button with a ninepatch decorator:

input.button
{
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    decorator: ninepatch( blue-button, blue-button-inner, 1.0 );
    font-effect: shadow(0px 2px #333);
    font-weight: bold;
}

But instead of pushing text inside of the button down the button itself seems to be pushed up and now overlaps previous lines of text. The text in the button seems to be aligned with another text in the same line.

How can I make position of the text inside of the button to be controlled by input padding? I would like to slightly shift it up and down with the button press.

https://gyazo.com/c026284abde72bde0d19a285c501fc66?token=adfc2a0ddb7f137a00f1bcd8daf1c2cf

mikke89 commented 1 year ago

Hi there. I'm not sure I understand. The decorator does not affect the placement of text inside of it or the layout at all, it is merely a background effect. You can move the text inside the button around by using the padding property.

gleblebedev commented 1 year ago

@mikke89 thanks for a timely reply!

Padding seems not to working as expected. It isn't moving text inside button but it moves button keeping text stationary. I have a temporal workaround by adding "display: block" property into the input's css. But now the button wants to occupy all available space and I really would like it to have size evaluated from input's content.

gleblebedev commented 1 year ago

Here is HTML sample:

<head>
<style>
    input.blue-button
    {
        display: inline;
        padding-top: 20px;
        padding-bottom: 20px;
    }
</style>
</head>
<body>
Bla bla some text<br/>
Another line <input class="blue-button" type="button" value="Button text"></input> line continues<br/>
Last line
</body>
</html>

And if I do this in RmlUI...

input.blue-button
{
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    display: inline;
    decorator: ninepatch( blue-button, blue-button-inner, 1.0 );
    font-effect: shadow(0px 2px #333);
    font-weight: bold;
}

    Bla bla some text<br/>
    Another line <input class="blue-button" type="button">Button text</input> line continues<br/>
    Last line<br/>

mikke89 commented 1 year ago

Ah, if it is an inline element, then all text will be placed on the same line, with padding effectively extending the height of the whole inline context. What you probably want to do here is display: inline-block. This gives you inner block display, but an outer inline display. Here, you might also need overflow: auto to avoid having the text line up between the inline-blocks. By the way, these are normal CSS layout rules.

See the following from our visual layout tests, to better understand layout here:

gleblebedev commented 1 year ago

Ok, with display: inline-block and overflow: auto it is much better But I'm still struggling to move text inside of the input up and down. Can I combine padding with vertical-align in the same style?

mikke89 commented 1 year ago

With inline-blocks you can add padding yes. It might also be useful to add box-sizing: border-box so that the size of the button doesn't change with that. Vertical-align will move the button relative to the surrounding text.

gleblebedev commented 1 year ago

Thanks! I'm sorry to bother you but I'm not a front-end developer and I have nobody to ask this. Here is what it looks like now:

{
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    display: inline-block;
    overflow: auto;
    vertical-align: center;
    box-sizing: border-box;
    decorator: ninepatch( blue-button, blue-button-inner, 1.0 );
    font-effect: shadow(0px 2px #333);
    font-weight: bold;
}

input.blue-button:hover
{
    decorator: ninepatch( blue-button-selected, blue-button-selected-inner, 1.0 );
}

input.blue-button:active
{
    decorator: ninepatch( blue-button-pressed, blue-button-pressed-inner, 1.0 );
}

input.blue-button:disabled
{
    decorator: ninepatch( blue-button-disabled, blue-button-disabled-inner, 1.0 );
    font-effect: none;
}

The last piece is to move text within the button up and down. If I add this to the css

input.blue-button:hover
{
    padding-top: 9px;
    padding-bottom: 15px;
    decorator: ninepatch( blue-button-selected, blue-button-selected-inner, 1.0 );
}

it moves the button, not the text: Is there a way to achieve the desired effect?

The button images for referece:

gleblebedev commented 1 year ago

I've tried to add an internal span and do vertical-align: -3px; or position:relative; top:-3px; on it with no luck :(

The html Another line <button class="blue-button" type="button"><span style="position:relative; top: -10px;">Button text</span></button> line continues<br/> Gives this result:

mikke89 commented 1 year ago

To move the text down, add more to the padding-top, and subtract the same amount from padding-bottom.

This is working well for me:

input.blue-button {
    padding: 12px;
    display: inline-block;
    overflow: auto;
    vertical-align: center;
    background: #933;
    color: white;
}
input.blue-button.lowered-text {
    padding-top: 20px;
    padding-bottom: 4px;
}

Bla bla some text<br/>
Another line <input class="blue-button" type="button">Button text</input> line continues<br/>
Last line<br/>
Another line <input class="blue-button lowered-text" type="button">Button text</input> line continues<br/>

gleblebedev commented 1 year ago

Is it something that was fixed since e9f5f30 - Make slider input only respond to primary mouse button? Because this is what I see:

input.blue-button
{
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
    display: inline-block;
    overflow: auto;
    vertical-align: center;
    box-sizing: border-box;
    decorator: ninepatch( blue-button, blue-button-inner, 1.0 );
    font-effect: shadow(0px 2px #333);
    font-weight: bold;
}

input.blue-button.lowered-text
{
    padding-top: 34px;
    padding-bottom: 14px;
}
...
    <input type="button" class="blue-button"><span>New Game</span></input>
    <input type="button" class="blue-button lowered-text">Continue</input>

mikke89 commented 1 year ago

Ah, I see, yeah, I've pretty much rewritten the entire inline layouting engine since then, so there are certainly differences since then.

Looks like it's still lining up the buttons based their inner text. Do you need inline layout? Another approach could be to use floating boxes: display: block; float: left;. Maybe some work-arounds are possible: Wrap the inside text inside a div? Not sure if that helps. The best thing would be to update the library.

gleblebedev commented 1 year ago

I'll try the library update first. Thank you for support!

gleblebedev commented 1 year ago

Case closed

mikke89 commented 1 year ago

Nice, looking good!

mikke89 / RmlUi

Button margin/padding #471