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.

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

selectedrow color doesnot apply if I use Bootstrap4 #64

Open
sreddim opened this issue Apr 18, 2018 · 2 comments
Open

selectedrow color doesnot apply if I use Bootstrap4 #64

sreddim opened this issue Apr 18, 2018 · 2 comments

Comments

@sreddim
Copy link

sreddim commented Apr 18, 2018

Hi I am using styles from bootstrap 4 by adding a reference in the view

When I select a row on table it does not highlight the row to light blue like it used to do in bootstrap3.3.6

Table body tr has aut-select="selected-class: info"

Any specific reason for this to be not workign in bootstrap4 or any plan to upgrade aurelie-table library with support for bootstrap4.

@simongroom
Copy link

I am experiencing this as well - any update at all? I am also experiencing an issue where the styling on the pagination is not being applied.

image

my code identical to that of the example pagination code in the docs.

@amferguson
Copy link

@simongroom I had the same problem with the pagination controls. It would appear the default markup doesn't use Bootstrap 4's pagination styling as @sreddim noted. Fortunately it's pretty straightforward to adapt the example of custom pagination to do so:

<aut-pagination current-page.bind="currentPage" page-size.bind="pageSize" total-items.bind="totalItems" >
    <template replace-part="pagination">
        <ul class="pagination" hide.bind="hideSinglePage && totalPages === 1">
            <li class="page-item ${currentPage === 1 ? 'disabled' : ''}" >
                <a aria-label="Previous" click.delegate="previousPage()" class="page-link" >
                    Previous
                </a>
            </li>

            <li class="page-item ${currentPage === page.value ? 'active' : ''}" repeat.for="page of displayPages">
                <a click.delegate="selectPage(page.value)" class="page-link">
                    ${page.title}
                </a>
            </li>

            <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                <a aria-label="Next" click.delegate="nextPage()" class="page-link">
                    Next
                </a>
            </li>
        </ul>
    </template>
</aut-pagination>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants