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

b:button col-XX generates "invalid" Bootstrap markup #670

Closed
ggam opened this issue Apr 2, 2017 · 2 comments
Closed

b:button col-XX generates "invalid" Bootstrap markup #670

ggam opened this issue Apr 2, 2017 · 2 comments
Assignees
@stephanrauh
Labels
bug confirmed
Milestone
v1.1.0

Comments

@ggam
Copy link
Collaborator

ggam commented Apr 2, 2017 •
edited by stephanrauh
Loading

Bootstrap col-XX-X classes are not expected to be applied to buttons. Doing it makes the button go out of the container paddings.

The correct way to make a button full width and responsive is to put it inside a col-XX-X div and add the btn-block class to it.

The following snippet shows the two cases:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:b="http://bootsfaces.net/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <b:container style="background-color:yellow;">
            <b:row style="margin-top:20px;">
                <b:button value="button 1" col-xs="12" look="primary" />
            </b:row>
            <b:row style="margin-top:20px;">
                <b:column col-xs="12">
                    <b:button value="button 2" class="btn-block" look="primary" />
                </b:column>
            </b:row>
        </b:container>
    </h:body>
</html>

The result can be seen on: https://jsfiddle.net/ns8yhgnb/

The first button expandes to the limit of the container, bypassing its padding.

The solution would be for BootsFaces to wrap the button inside a div and auto apply the btn-block class, removing the need to manually create the column. Backward compatibility could be an issue here, though.
@stephanrauh stephanrauh self-assigned this Apr 2, 2017
@stephanrauh stephanrauh added this to the v1.1.0 milestone Apr 2, 2017
@stephanrauh
Copy link
Collaborator

Luckily, we didn't even document the feature :). So I'll ignore the backward compatibility issue.

stephanrauh added a commit that referenced this issue Apr 2, 2017
@stephanrauh
#670 generate correct HTML code for responsive buttons (compliance to…
0510518 
… the rules of Bootstrap)
@stephanrauh
Copy link
Collaborator

The bug also affected the <b:commandButton />. I've repaired both, and added the documentation (including the description why this is a breaking change and how to fix it).

@ggam ggam mentioned this issue Apr 4, 2017
Closed
@TheCoder4eu TheCoder4eu mentioned this issue Apr 15, 2017
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@stephanrauh stephanrauh

Labels
bug confirmed
Projects
None yet
Milestone
v1.1.0
Development

No branches or pull requests
2 participants
@ggam @stephanrauh