Why is the navigator inside the homepage, can it be outside (above all pages)?

I want the segment (button bar, radio selection) in the horizontal center of the screen.

Here’s my code.

 <div id="segtbar" class="segment tbar">
      <div class="segment__item">
        <input type="radio" class="segment__input" name="segment-a" checked></input>
        <button class="segment__button">Nearby</button>
      </div>
      <div class="segment__item">
        <input type="radio" class="segment__input" name="segment-a"></input>
        <button class="segment__button">This way <i class="fa fa-hand-o-up" style="fong-size:17px""></i></button>
      </div>
      <div class="segment__item">
        <input type="radio" class="segment__input" name="segment-a"></input>
        <button class="segment__button">In Building</button>
      </div>
    </div>
    <ons-card id="crd1">
    <div class="title">One</div>
    <div class="content">
        showing messages for one.
    </div>
    </ons-card>
    <ons-card id="crd2">
    <div class="title">Two</div>
    <div class="content">
        showing messages for two.
    </div>
    </ons-card>
    <ons-card id="crd3">
    <div class="title">Three</div>
    <div class="content">
        showing messages for three.
    </div>
    </ons-card>

What do I need to do in the CSS and in the HTML to get it centered?

I created a pen using the onsenui css and js.

Everything looks ok, until the segment tag is reached and then nothing is rendered correctly.

```
<div id="main-segtabbar" class="segment tbar">
    <div class="segment__item">
      <input type="radio" class="segment__input" name="segment-a" checked></input>
      <button class="segment__button">One</button>
    </div>
    <div class="segment__item">
      <input type="radio" class="segment__input" name="segment-a"></input>
      <button class="segment__button">Two</button>
    </div>
    <div class="segment__item">
      <input type="radio" class="segment__input" name="segment-a"></input>
      <button class="segment__button">Three</button>
    </div>
</div>
<ons-card id="crd1">
    <div class="title">One</div>
    <div class="content">
      showing messages for one.
    </div>
</ons-card>
```

In the Monaca cloud IDE the same code works fine. See image.

@Fran-Diox thx!

How do I create a button bar in a segment? I don’t see it in the onsen JS api docs… but do see it in the onsen css doc

If I’m developing on the cloud Monaca IDE how do I start the development.

You sent a message that you finished developing Monaca-VUE but it is not clear if it’s possible to run it on the cloud IDE, if so how, and if not, then in your paper about Monaca-VUE it would be best to just say that currently you cannot create an online VUE project yet.

Re: Set popover width & height

For onsenUI2 is there any way to set the width. I had to manually set the topleft and width for each popover. Also how would one set up the maxHeight?

Is Monaca the same thing as Meteor, or is it just an IDE that USES Meteor, or is it completely separate from Meteor, with Meteor as an option?