Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. ajck
    A
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    ajck

    @ajck

    0
    Reputation
    4
    Posts
    309
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    ajck Follow

    Posts made by ajck

    • RE: How to do a fat (tall) toolbar with background image, burger menu (for splitter) and no bottom border in Onsen UI?

      Just realised this got answered in my original post two and a half years ago (!), see here: https://community.onsen.io/post/10416

      posted in Onsen UI
      A
      ajck
    • RE: Extra tall navbar header for OnsenUI/PhoneGap app, with SVG background?

      @mcombatti I apologise for a reply that is 2 & 1/2 years late (!) but I am only now revisiting this stage of this project and found that you replied, and not only that but it works! (with some minor code edits). Thanks very much.

      For anyone else looking, the working code is below BUT you need to edit the two img src URLs to remove the ![bighd.jpg]( immediately before the https:// and the final ) which is after the ); in the first URL and after the " in the second URL (the text editor for this forum adds these extra bits into the URLs when you hilight it as source code). If you then paste it into the playground it works https://onsen.io/playground/

      <style>
      #bg1 {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%; 
      background-image: url("![bighd.jpg](https://videohive.img.customer.envatousercontent.com/files/241571641/bighd.jpg?auto=compress%2Cformat&fit=crop&crop=top&max-h=8000&max-w=590&s=eff7aca73a2933133204ac6800f993bf");)
      }
      </style>
      
      <ons-page id="myPage">
      <ons-toolbar style="height: 120px;" id="MainToolbar">
      	<div class="left" id="MainToolbar_leftDiv">
      		<ons-toolbar-button id="bg1" style="color: #ffffff;"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>
      	</div>
      </ons-toolbar>
      <div id="hiddenspace" style="height: 72px;">
      </div>
      <ons-card>
          <img src="![download_image_onsenui_01.png](https://monaca.io/img/logos/download_image_onsenui_01.png") alt="Onsen UI" style="width: 100%">
          <div class="title">
            Awesome framework
          </div>
            <ons-list>
              <ons-list-header>Bindings</ons-list-header>
              <ons-list-item>Vue</ons-list-item>
              <ons-list-item>Angular</ons-list-item>
              <ons-list-item>React</ons-list-item>
            </ons-list>
        </ons-card>
      </ons-page>
      
      posted in Onsen UI
      A
      ajck
    • How to do a fat (tall) toolbar with background image, burger menu (for splitter) and no bottom border in Onsen UI?

      I want to achieve this in Onsen UI:

      alt text

      Notice taller toolbar than standard, white overlay burger menu icon (for the standard element) and no bottom border between the image and the first item.

      I think the burger icon is easy (assuming it stays in the right place with a taller toolbar).

      The background image I tried manually setting the CSS property background-image in the browser DOM (using Chrome devtools) on the element and adding the transparent modifier, so <ons-toolbar modifier="transparent"> - unfortunately this got overridden so background image didn’t show at all. I also tried doing the same thing on the within the toolbar and that didn’t go full width and not sure the burger icon would have been on top anyway

      Not sure how to override the toolbar CSS to make a tall/fat toolbar that shows the full height of the image and has no border - I’ve looked at the CSS for the toolbar in the browser DOM in Chrome Devtools but can’t see how to modify it correctly

      Ideally need this to be able to cope with different device widths or portrait/landscape orientation.

      Any suggestions much appreciated. Thanks.

      posted in Onsen UI
      A
      ajck
    • Extra tall navbar header for OnsenUI/PhoneGap app, with SVG background?

      I’m building an app using Onsen UI and PhoneGap that requires having an extra tall header on one of the pages, with an SVG background image, but hamburger menu icon would be on top. So needs to be like:

      alt text

      Header image is above the horizontal line, below that it’s just a regular Onsen UI layout with various content (e.g. a list).

      Image does need to be full width as shown and scale to fit whatever device it’s shown on (phone or tablet).

      Is this possible, and if so how? Couldn’t see anything obvious in the docs.

      Thanks

      posted in Onsen UI
      A
      ajck