Results 1 to 3 of 3

Thread: Legend on multiple lines

Threaded View

Previous Post Previous Post   Next Post Next Post
    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jul 2011

    Default Answered: Legend on multiple lines

    Good day,

    I've got a legend with quite a few kind of fields. I want the legend in the bottom. Right now it just puts all the fields next to each other, even when it doesn't fit on the screen. I'd like that it will show next to each other, until it doesn't fit on the screen anymore; then it needs to continue on the next line.

    I've included a Photoshoped image. The top legend is the default Charts display method. The bottom is what I'd like too.

    I tried to modify the CSS. But that didn't work out for so far.

  2. Ok, I figured it out. I was able to to this by adding a CSS class to the legend.

    legend: true,
    cls: 'legend3Lines'
    The class CSS looks like this. It overwrites some stock CSS values. You might want to changed the values of the last class to fit your legend. The sizes are fixed in CSS and not dynamic.
    PHP Code:
    .legend3Lines .x-legend .x-legend-items {    
    display:inline-block !important;    

    legend3Lines .x-legend .x-legend-item {
    floatleft !important;
    width:205px !important;    

    legend3Lines .x-legend {    
    height:110px !important;    
    width:635px !important;    

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts