Semantic-UI based page not work correctly in Tide SDK

Question

I'm trying to make some app in TideSDK using Semantic-UI (http://semantic-ui.com/). When I open my page in Chrome it works correctly:

chrome http://krakow45.pl/test/chrome.png

but when I'm launching my code with TideSDK it looks like:

tide http://krakow45.pl/test/tide.png

How you can see, some elements are missing and it isn't work correctly.

Here is my HTML:

<!DOCTYPE html>
<html>
<head>
    <!-- JavaScript includes -->
    <script src="vendor/jquery.js"></script>
    <script src="js/app.js"></script>
    <script src="vendor/semantic/semantic.js"></script>
    <!-- /JavaScript includes -->

    <!-- CSS includes -->
    <link rel="stylesheet" type="text/css" href="vendor/semantic/semantic.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!-- /CSS includes -->

    <title>xxx</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- PAGE: NEW_REPORT -->
    <div id="NEW_REPORT_fieldsContainer" class="ui segment">
        <div class="ui input">
            <input id="NEW_REPORT_firstName" type="text" placeholder="Imię">
        </div><br /><br />
        <div class="ui input">
            <input id="NEW_REPORT_lastName" type="text" placeholder="Nazwisko">
        </div><br /><br />
        <div class="ui left icon input">
            <input id="NEW_REPORT_date" type="text" placeholder="26/03/2015">
            <i class="calendar icon"></i>
        </div><br /><br />
        <div id="NEW_REPORT_buttonNext" class="ui animated button">
            <div class="visible content">Dalej</div>
            <div class="hidden content">
                <i class="right arrow icon"></i>
            </div>
        </div>
    </div>
    <!-- /PAGE: NEW_REPORT -->
</body>

I'm not sure but mybe webkit version in TideSDK is too old? – Dawid Góra Mar 17 '15 at 15:28 — Dawid Góra, Mar 17 '15 at 15:28
Please include your CSS. A Fiddle would help. – bpeterson76 Mar 17 '15 at 15:57 — bpeterson76, Mar 17 '15 at 15:57

score 2 · Accepted Answer · answered Mar 18 '15 at 09:40

2

Remember that TideSDK uses an old version of webkit. I'm pretty sure you'll have to prefix your CSS3 rules (-webkit-). But also keep in mind that all the CSS3 rules cannot be used, but for now I haven't encounter major CSS3 issues. Just one thing is bothering me, it's the old developper console..

answered Mar 18 '15 at 09:40

zEd.

173
8

I decided to use NW.js instead TideSDK. NW.js uses newer (or the newest) version of webkit. Thank you at all :) – Dawid Góra Mar 23 '15 at 17:06

score 0 · Answer 2 · answered Mar 27 '15 at 12:59

0

TideSDK seems not to be that amazing choice to develop those apps anymore :( Sadly after they started to develop TideKit, no support was given. This last version should support all CSS 3 elements but it actually doesn't.

Glad you found your way out :)

answered Mar 27 '15 at 12:59

Matheus Moretti Rangel

3
5

Semantic-UI based page not work correctly in Tide SDK

2 Answers2