HTML Dashboard - Scrolling to the right

edited September 2013 in General Discussion
After some attempts, I managed to setup an HTML dashboard with options which link up to 3 depths inside. The initial homepage html links, for some icons, to internal html pages. Linking works OK, the code needs serious work for beauty and convenience, but I am encountering a problem I hadnt imagined.

Even though I have added the small piece of code for better view at any device, as per Andromo suggestion in the html activity description, my pages do not display ok. What they do is icons sort themselves nicely, but the small text I added to describe each icon will only show after a scroll to the right. The page does not sort itself to fit the mobile screen.

I do not know how it happens and why, but I will describe what I did in case you find out a mistake on my part. I setup a table with 2 columns (one is the icon, the second is the description) and 9-10 rows for the various pages. The descriptions column cannot be viewed unless user scrolls to the right.
Can you help me sort this out please?

PS Any chance you can tell me how to add a small banner on top, similar to what andromo sets for about us pages?

Comments

  • I guess I have annoying questions, but I really flip whenever I try edit some html. So this goes out to people who are good with HTML - if you feel like it, give me a helping hand because Google has helped me in some ways and confused me in many more.

    I have fixed some issues and created other problems.
    The scrolling to the right got fixed by setting table size as 100% width and height as auto.
    The top banner was set too, but the background seems to go around it and to the top - so its not looking good.
    Plus there's more problems with the icons and the titles - they just look awful; the icon description cannot stay on the right of icon and if I put it at the bottom it seems out of place. They might put themselves in the center of the device screen, but I just dont like the result aesthetically.

    Do you use some html codes site which gives you decent results on a modified dashboard?
    Do you use some tricks which could help me (and are you willing to share them?)

    Any chance you can share some html code for a top banner, 4-5icons and descriptions and a background? I would have something to work with by editing it and learning in the process too. If I am asking for too much you can disregard this.

    Thanks anyway for your patience and time
  • There's nothing you can aid me with?
  • Hi, I'm not 100% what you're trying to do - but I have activities where I need to display icons to the left with corresponding text aligned next to it...  Is this what you're trying to do?

    If so, I use this Markup in my web pages (edit for your use)

    CSS:
    .thisdiv { display:block; text-align:left; min-height:1.5em; overflow:auto; }
    .thisdiv img { float:left width:20%; vertical-align:middle; }

    HTML:
    <div id="div1" class="thisdiv"> <img src="icon01.png"> Now This Text 1</div>
    <div id="div2" class="thisdiv"> <img src="icon02.png"> Now This Text 2</div>

    Hope this helps!

  • Also, put this in the <HEAD>...here...</HEAD> section of your webpage:

    <meta name="viewport" content="width=device-width, initial-scale=1"/>
  • Thank you for your reply... I will try them later. I moved away from that app and started dealing with others because I got stuck really seriously, but eventually I will have to return, because this app was ordered to me.
  • edited December 2013
    I return to this thread with a quite different question, yet related to HTML archives.

    I need 2 activities with HTML archives, in which I will link to external websites and pdf/excel files which I also include in the zip. In bluestacks where I experimented with them, the linking on the pdf/excel files does not work (error: wrong path or "There was a network error") but it works as it should when I run the html file locally.

    Code of linking is as follows:

    <a href=" moria2014.xls";>Points 2014 (excel)</a>

    Error message: The webpage at file:///android_asset/html12636/index/moria2014.xls might be temporarily down or it may have moved...blahblah

    The file moria2014.xls is in same folder as the html file. I got same problem with the pdf, but I DON'T want to use the pdf activity.

    Moreover, how can I link to websites in a way which will load the default browser instead of running it inside the app? The target=_blank command is enough?

    Hope you can help me a bit.
  • Someone can help with linking to an excel file in the same folder as html file?
    In browser it works, in app it doesn't
  • Target=Blank always works for me when i need them to open in new browser window.
  • Yep, that indeed worked, but my only problem now is links to excel and pdf files do not work. They work OK at computer browser, they just mess up when in the app as archive.
  • @anteos I'm not sure about that - they've always worked for me.
    I always try the simple things first like try to change the link to;
    Try:
    <a href="123.xls">Click Here</a>
    or
    <a href="/123.xls">Click Here</a>

    I can't think of anything else at the mo
  • Thanks I will try the second one and let you know.
  • No luck.
    The second gives a link which cannot load and is file:///moria.xls
    The first gives a network error trying to reach file:///android_asset/Htgml12636/moria.xls
  • Another simple thing to try, is it .xls or .xlsx
    it may be that the phone doesn't have anything to use to open the file.
    remembering that .xls is microsoft, you would need a "handler" may be to open it.
    I'm guessing, not so sure about this one.
  • I will indeed try to download a document viewer in the emulator and check it out. It is xls file indeed, no extension problem.
    Will try that too, thanks again.
  • edited December 2013
    No luck again. There might be a bug somewhere here.
    I click the link (the first link version), WPS (office files handler) opens up but says no file or unable to open.
  • @anteos I don't think that you'll be able to open an excel file from an HTML archive through Andromo. You can't play audio or video files this way so I assume it is the same for other file types.
  • Is it possible to convert it to HTML and still usable in your app? an idea
  • @shaney_g Thank you seems its not possible at all then.
    @tamworthheat Definitely worth a try! Thanks
  • Still a failure. PDFs totally lose the layout and end up in 1 html page for each document page, toitally unreadable.
    Excel is a bit more decent, but of course loses formulas and all.
    I have posted in Support regarding this matter, because if it really isn't possible I need to take some other approach.
  • What's wrong with using the PDF activity?
  • I don't like it because it will show an entry on the top banner and will appear on the dashboard.
  • if you want I dont know how it would look but you can just make an HTML page structured sort of like this

    <html>
    <head>

    <title> this will appear on the webrowser part of the page  </title>

    </head>
    <body>
    <img src="put a photo here with file extension" />

    <h1> Put the title of your story here, it will be in large bold letters </h1>
    <p> Use this to print words to your ebook </p>
    </br>
    <p> Use the br to make breaks in your paragraphs </p>
    </body>
    </html>


  • @anteos If you use HTML to make a custom dashboard then the PDF activity will not show there unless you want it to. It will still be in the top banner as you have stated, however.
  • For this app I do not want a custom dashboard. Anyway, I simply added external links to get it done.
  • Hello again
    Can you please tell me if a custom html dashboard can display admob ads (maybe andromo adds them below the archived html?)
  • yes, ads show on custom html dashboard
Sign In or Register to comment.