Please see https://stackoverflow.com/questions/46785394/how-to-automatically-add-scrollbar-to-vue-onsenui-v-ons-card

Same question is relevant for other frameworks with onsenui card divs. But I need the answer for VUE-onsenui

Thanks!

@Fran-Diox said:

version

Thank you!! works!

Maybe you can tell me why the example isn’t working in the codepen?
https://codepen.io/pashute/pen/YrxxPX?editors=1111

Am I using a wrong CDN?

@Fran-Diox said:

uld certainly do that but I think it would be easier to use the o

whew! It’s up there under “control”. I should have looked for it although failed to find button-bar… Thanks!!!

How do I make with vue-onsen a segment (a choice of one button out of several in a row)
or a button-bar as defined in the onsen-ui css?

See here in css documentation: https://onsen.io/v2/api/css.html#segment-category
vs. here in vue documentation: https://onsen.io/v2/api/vue/v-ons-button.html

I’m thinking out loud here:
I make a .vue component called my-v-segment that is simply a div with class segment.
It has a group-name variable not shown in the DOM.

In it I make a .vue component called my-v-segment-button that is simply a button with class segment-item
and in it an input element type:radio with class:segment__input and a name attribute: pointing to the group-name.

Then I make a card and it shows the content that is set for that “tab” (i.e. selected button in the “segment”)

Anybody with VUE experience care to make a pen?

Bug with tutorial: on latest chrome windows 10, slide app and text right for bigger code section, and code is gone, never to return.

Wish: a codepen linked from example

OK, I see what’s wrong with the example.
The code for the toolbar and the menu icon must be repeated 3 times, in each page separately.
But, typically a toolbar and a menu item are kept in place and only the rest of the content changes.

// this is being repeated three times, once in each page! 
    <ons-toolbar>
  <div class="left">
    <ons-toolbar-button onclick="fn.open()">
      <ons-icon icon="md-menu"></ons-icon>
    </ons-toolbar-button>
  </div>...

@Fran-Diox said:

ate the codep

That was the problem! Thanks.

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?