question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

button-full does not work in ion-footer-bar

See original GitHub issue

Buttons with the class button-full do not render properly when included in an ion-footer-bar. For instance:

<ion-footer-bar>
  <div class="buttons">
    <button class="button button-full">Button 1</button>
  </div>
  <h1 class="title">Title</h1>      
  <div class="buttons" ng-click="doSomething()">
    <button class="button">Button 2</button>
  </div>
</ion-footer-bar>   

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Reactions:2
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
materazucommented, May 8, 2015

work for me with this css class tricks :

    <div class="bar bar-footer bar-positive footer-button">
        <a class="button button-full button-clear button-icon icon ion-chevron-right" href="#/plop">
            A full link in bottom
        </a>
    </div>
div.footer-button a.button.button-full {
    width:100%;
    margin-top: 0
}
1reaction
ghostcommented, May 6, 2016

Mb, not good idea, u can use $rootScope

<ion-footer-bar> <button class="bar bar-footer bar-positive" ng-click="closeModal()"></button> </ion-footer-bar>

$rootScope.closeModal = function ( ) { }

Read more comments on GitHub >

github_iconTop Results From Across the Web

button-full does not work in ion-footer-bar · Issue #1964 - GitHub
Buttons with the class button-full do not render properly when included in an ion-footer-bar. ... button-full does not work in ion-footer-bar #1964.
Read more >
Full button in ion-footer - Ionic Forum
Hello there, guys! I'm converting the following screen into Ionic: [56 PM] As you can see, there's a blue button on the bottom...
Read more >
ionic add two button in ion-footer-bar - Stack Overflow
In Ionic 4+, just change button no-margin ion-button full large by ion-button expand="full"... this worked for me. Thanks. – Nowdeen. Feb 29, 2020...
Read more >
Building the Netflix UI with Ionic | Devdactic
In many cases, the Ionic default buttons won't work for your exact styling and by simply styling a custom div you get the...
Read more >
Ionic - Buttons - Tutorialspoint
Block buttons will always have 100% width of their parent container. They will also have a small padding applied. You will use button-block...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found