CODEWITHSUNDEEP
htmlcss
vkv
vkv

Reputation: 1010

how to put several buttons inline with responsive design?

Let i have a several number of buttons

  <button ng-repeat="a in graphdata" class="inline">

I need to align all these buttons in a line, and all buttons should be visible, and it should adjust its width when new button is getting added. Button should be attached to each other.

Upvotes: 3

Views: 1625

Answers (2)

3rdthemagical
3rdthemagical

Reputation: 5350

You should wrap your buttons with flex container.

<style>
  .wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    flex-wrap: wrap; /* if you want buttons in several lines */
  }

  button {
    min-width: 50px;
  }
</style>

<div class="wrapper">
  <button ng-repeat="a in graphdata" class="inline"></button>
</div>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122047

You can use flexbox

$('.new').click(function() {
  $('.element').append('<button class="inline">Button</button>');
});
.element {
  display: flex;
}
button {
  flex: 1;
  background: white;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="new">Add new Button</button>
<div class="element">
  <button class="inline">Button</button>
</div>

Upvotes: 6

Related Questions