Help with In-app preview vs. Preview

Bootstrap Studio Help
1

I am doing some testing and wanted to use a style from https://mdbootstrap.com to style my forms, in BootStrap Studio I added CDN links to the mdbootstrap CSS and JS files then created my field in line with their examples, extracted HTML below:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>mdbTest</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.3/css/mdb.min.css">
    <link rel="stylesheet" href="/styles.css">
</head>

<body>
    <div>
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group md-form"><label for="myInput">My Field Label</label><input type="text" placeholder="Placeholder text" id="myInput"></div>
                </div>
                <div class="col"></div>
                <div class="col"></div>
            </div>
        </div>
    </div>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.3/js/mdb.min.js"></script>
    <script id="bs-live-reload" data-sseport="54447" data-lastchange="1550944089140" src="/js/livereload.js"></script>
</body>
</html>

This works in so much as when I preview my page it looks just as I'd expect, label in small text above the field, placeholder in place etc however in the preview window in BootStrap Studio the formating seems to be significantly different. I took a screenshot but it seems I can only "link" not "attach" and my work PC blocks access to photo sharing sites. I'll explain as best I can.

In preview the field has the label text in pale grey, smaller font above the input, the placeholder is in the (underlined) field in black. In the BSS preview the label is below the placeholder text larger than it should be and overlapping with the placeholder text. I'd like to use such formating enhancements but want to rely on laying out my screens within BSS in such a way that it accurately resembles the expected final version, am I doing something wrong or is this a limitation of the preview within BSS?

Thanks, Chris.

2

Open a browser and use the browser preview as you're editing your site. This would be something you would and should do even if you didn't have this problem as not everything is going to display the same as in BSS. Part of this is due to the possibility of a difference in internal browser setup for BSS (meaning it has to use a browser setup of some sort, which may be a Windows browser, and you may be on a Mac on Chrome), so there's always the possibility that something may not look the same in the browser window as it is in the preview window.

Another reason is that there are sometimes little quirks like this and you really need to show screenshots so the devs can see exactly what you're talking about. Do you not have a computer or tablet at home you can do this on? Use Dropbox or something which is free for 2 gb of space.

Not saying it's right, and it definitely should be fixed if it's messed up, but screenshots would help a lot too.

3

Good point, and thank you. Here is a screenshot of the sample mentioned above with Chrome (Windows) overlaid on top of BootStrap Studio, in Chrome I entered a value in the field to show it works fine, just looks very odd within BSS.

Chrome over BSS

4

Sure does, thanks for that it helps not only me but the devs too I would hope so they can see what it's doing for you.

You might want to contact them directly and give a link to this post so they can see this and get the message faster too. They come in here periodically, but not every day so it's always best to contact them directly for software issues.

5

Thanks Jo, I've posted it in the bug reports forum, I very much appreciate your feedback :)

6

I'm going to have to say that I can imagine the issue is related to the idea that the JS code probably effect the styling of your HTML. In that case, in BSS that styling would not be applied therefore it would look different between the two views.

BSS does not execute JS code in the app.

Saj saj.bss.design

7

If you strip out the JS code and then Preview the site again, the styling will look just like it does within BSS.

Saj saj.bss.design

8

Understood, thanks Saj, I didn't realize that JS initialization does not run within the app, thanks for explaining.

Any chance this might change in the future?

9

Also be sure to check the order of your CSS files in the app and that your custom file is the last one listed.

10 
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="form-group md-form"><label for="myInput">My Field Label</label><input type="email" id="myInput" class="form-control" /></div>
        </div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>