Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Materia .input-group-sm/lg button addons broken #819

Closed
skylarmt opened this issue Apr 14, 2018 · 6 comments
Closed

Materia .input-group-sm/lg button addons broken #819

skylarmt opened this issue Apr 14, 2018 · 6 comments

Comments

@skylarmt
Copy link

skylarmt commented Apr 14, 2018 •
edited
Loading

This minimal page:

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://bootswatch.com/4/materia/bootstrap.min.css" rel="stylesheet" />

<div class="input-group input-group-sm">
    <div class="input-group-prepend">
        <button class="btn btn-primary" type="button">Left</button>
    </div>
    <input type="text" class="form-control" value="Hello World" />
    <div class="input-group-append">
        <button class="btn btn-success" type="button">Right</button>
    </div>
</div>

Results in this:
glitchy screenshot

The same thing but scaled up happens with .input-group-lg:
another glitch

Tested with the latest CSS, as evidenced by the stylesheet URL.
@skylarmt
Copy link
Author

skylarmt commented Apr 14, 2018 •
edited
Loading

In some cases, I've seen part of the first character in the input field get cut off by the button. It seems the horizontal margins are all screwy, as well as the vertical button size.

Oh, and on the regular .input-group there appears to be no horizontal input box padding either, although all the sizing is correct. Adding .px-2 to the input fixes that, but it shouldn't be needed.

@thomaspark
Copy link
Owner

Hey @skylarmt, thanks for the bug report. Pushing a fix for this now.

skylarmt added a commit to Netsyms/BusinessAppTemplate that referenced this issue Apr 16, 2018
@skylarmt
Update bootstrap.min.css with upstream bugfix from Bootswatch (thomas…
fa6924e 
…park/bootswatch#819)
@skylarmt
Copy link
Author

Looks like your commit is missing some padding for .input-group-text, so having one of them causes the original problem again:

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://bootswatch.com/4/materia/bootstrap.min.css" rel="stylesheet" />

<div class="input-group input-group-sm">
    <div class="input-group-prepend">
        <button class="btn btn-primary" type="button">Left</button>
    </div>
    <input type="text" class="form-control" value="Hello World" />
    <div class="input-group-append">
        <button class="btn btn-success" type="button">Right</button>
    </div>
</div>

<br />

<div class="input-group input-group-sm">
    <div class="input-group-prepend">
        <span class="input-group-text bg-primary text-light">Left</span>
    </div>
    <input type="text" class="form-control" value="Hello World" />
    <div class="input-group-append">
        <button class="btn btn-success" type="button">Right</button>
    </div>
</div>

<br />

<div class="input-group input-group-sm">
    <div class="input-group-prepend">
        <span class="input-group-text bg-primary text-light" style="padding: 0.25rem 0.5rem;">Left</span>
    </div>
    <input type="text" class="form-control" value="Hello World" />
    <div class="input-group-append">
        <button class="btn btn-success" type="button">Right</button>
    </div>
</div>

screenshot-2018-4-16 http localhost

@thomaspark
Copy link
Owner

The padding does differ between buttons and text so the text is flush with the left and right edges. This is in line (no pun intended) with the Material Design guidelines.

I'm expecting in most cases input-group-text will be used without a background color, which imo looks better:

screen shot 2018-04-16 at 4 53 54 pm

If you want a background color, I recommend adding your own padding like you've done or using a button.

@skylarmt
Copy link
Author

The issue is regarding using an input-group-text and a button in the same input-group. I only used the background color to better show the issue. Look closely at the middle row in the screenshot I posted above.

@thomaspark
Copy link
Owner

I see, I'll push a fix for that now.

thomaspark added a commit that referenced this issue Apr 16, 2018
@thomaspark
materia: fix input-group-text padding, #819
6275453
thomaspark added a commit that referenced this issue Apr 16, 2018
@thomaspark
materia: fix input-group-text padding for input-group-lg, #819
4fce825
@skylarmt skylarmt mentioned this issue Sep 23, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@thomaspark @skylarmt