CODEWITHSUNDEEP
sencha-touchsencha-touch-2
Mark
Mark

Reputation: 3389

Image as Back Button in Navigationview

I am trying to override the CSS of a back button in a Sencha Touch 2 Navigation View. Using this CSS

#ext-container-1 .x-button {
  background: url(../images/button_zurueck.png) no-repeat;
  width: 55px;
  height: 55px;
  margin-top: 120px;
  margin-right: 26px;
  border: none;
}

I was able to show the image but the width attribute is overidden by the style attribute set on the button so only a small part of the button is shown. This ist the content of the style attribute left after the button animation:

element.style {
    left: 0px !important;
    -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg) scaleX(1) scaleY(1) scaleZ(1) !important;
    opacity: 1 !important;
    width: 16px !important;
}

How can I override the width of the button?

Upvotes: 1

Views: 2132

Answers (3)

Alessandro
Alessandro

Reputation: 136

On the card:

config: {

    defaultBackButtonText: '',
    navigationBar: {
        backButton: {
            iconCls: 'back',
            ui: 'plain'
        }
    }
}

On the CSS:

//Back
.x-button-icon.back {
background-image: url(../../resources/images/bt_seta.png);
background-repeat: no-repeat;
}

Upvotes: 0

Mark
Mark

Reputation: 3389

I was able to show the full button by adding right padding. Its dirty but its work. Looking forward for the next release of Sencha Touch.

At the end I got rid of that button totally and inserted my own button which simulates the "back" functionality.

Upvotes: 1

rdougan
rdougan

Reputation: 7225

This is a bug in 2.0.0 and has already been fixed by Sencha for the next release.

More information: http://www.sencha.com/forum/showthread.php?188982

Upvotes: 2

Related Questions