inline horizontal button

[shinnobi]

i want to create inline horizontal buttons ( default is vertical) how to do that (ie. add class to button)

my code is below

var fileTime = [00,12]
for (var i=0;i<fileTime.length;i++){
  (function () {
    var time = String(fileTime[i].pad(2))
    var mybutton = L.easyButton({
      id: time,
      states: [{
        icon: '<strong>' + time + '</strong>',
        onClick: function (e) {
          changeMapByButton(time)
          alert(time)
        }
      }]
    });
    mybutton.addTo(map)
  })();
}

[atstp]

You can group your buttons with L.easyBar and then style that bar with the .leaflet-bar selector.

Based on the code you shared, it would look roughly like this:

var fileTimes = [00,12];
var buttons = fileTimes.map(function(t){
    var time = String(t.pad(2))
    return L.easyButton({
      id: time,
      states: [{
        icon: '<strong>' + time + '</strong>',
        onClick: function (e) {
          changeMapByButton(time)
          alert(time)
        }
      }]
    });
  });

var bar = L.easyBar(buttons);  // wrap your buttons with an easyBar
bar.addTo(map); // add the bar to your map

then a little bit of css to get your buttons aligned:

.leaflet-bar {
    /* style your buttons horizontally here */
}

This code is untested, but the general idea should help you get started.

[shinnobi]

i have already done this but not work

my css for leafletbar
.leaflet-bar {
position: fixed;
z-index: 1000;
top: 20px;
left: 75px;
}

it move this bar to top but button didn't in one line @atstp

[atstp]

the code you shared adds each button separately. Based on what you're describing, you need to use an L.easyBar to group the buttons.

var buttons = [];                          // NOTE: use a separate array to collect the buttons
var fileTime = [00,12]
for (var i=0;i<fileTime.length;i++){
  (function () {
    var time = String(fileTime[i].pad(2))
    var mybutton = L.easyButton({
      id: time,
      states: [{
        icon: '<strong>' + time + '</strong>',
        onClick: function (e) {
          changeMapByButton(time)
          alert(time)
        }
      }]
    });
    buttons.push(mybutton)                 // NOTE: add to the buttons array instead of the map
  })();
}

var bar = L.easyBar(buttons);              // NOTE: create an easyBar with the buttons
bar.addTo(map);                            // NOTE: add the bar to the map

This will group the buttons under a parent element that you can then style to fit your needs.

[shinnobi]

@atstp as i said above i have completely done this code you mentioned but when i add my css to leaflet bar
.leaflet-bar {
position: fixed;
z-index: 1000;
top: 20px;
left: 75px;
}

it move this bar on top but button inside it didn't in one line

[atstp]

okay, in that case, I need a bit more info to give you better guidance.

First, what do you think is causing your issue, and what have you already tried to resolve it?

Also, if you share a minimal, running example, that would make it easier for me to help you.

[shinnobi]

@atstp
this is mycode http://jsfiddle.net/b2zxLdor/18/

[atstp]

thanks!

What have you tried that has not worked? what did you expect, and what results did you get?

[shinnobi]

done i have just fixed my problem thanks for help

[DrPDash]

@shinnobi : can you update your jsfiddle? or show the styling snippet here? thanks

[guidez]

@shinnobi You committed one of the most cardinal sins of google searches: "I fixed it!"... And you didn't provide the fix. Please. Provide. The fix.

[shinnobi]

sorry for late commend i upload this code http://jsfiddle.net/w47s96pt/ for inline button
thanks you for all