Jump to content

InputContainer issue with safari and IE, fine with chrome


BillOatman
Go to solution Solved by BillOatman,

Recommended Posts

BillOatman

Hi.  I have this in my plugin config page:

                    <h3>Enter the scene you would like active for the following states (avoid using special characters):</h3>
                    <div class="inputContainer">
                        <input is="emby-input" type="text" id="playingScene" name="playingScene" required="required" label="Playing Scene:" />
                    </div>
                    <div class="inputContainer">
                        <input is="emby-input" type="text" id="pausedScene" name="pausedScene" required="required" label="Paused Scene:" />
                    </div>
                    <div class="inputContainer">
                        <input is="emby-input" type="text" id="stopScene" name="stopScene" required="required" label="Stopped Scene:" />
                    </div>
                    <div>
                        <button is="emby-button" type="submit" class="raised button-submit block"><span>Save</span></button>
                    </div>

In IE win10 and safari on a mac it looks like this:

5d08457aa0a4f_ie.png

 

On chrome in all environments, it looks as it was intended:

5d0846cedb393_Capture.jpg

 

 

Is there something I should do differently there?

 

Edited by BillOatman
Link to comment
Share on other sites

BillOatman

Thanks @@Luke, I have this now at the top of the config.html:

<div data-role="page" class="page type-interior pluginConfigurationPage hueConfigurationPage" data-require="emby-select,emby-checkbox,emby-input,emby-button">

and this in the control definition itself:

<input is="emby-input" type="text" id="playingScene" name="playingScene" required="required" label="Playing Scene:" />

Is there some other place I need to require it?

Link to comment
Share on other sites

BillOatman

Understood.  What's interesting/odd is that on one persons Mac it was wrong when he used Safari, but correct in Chrome on the same server.

And another person on a windows server, it was wrong with IE but correct with Chrome.

 

The short term answer anyway is to use Chrome ;)

Edited by BillOatman
Link to comment
Share on other sites

  • Solution
BillOatman

Posting for others who may run into this ...

 

As is often the case with multi-browser UI, I had to try different things until something worked.

In this case I had to get far more verbose in the HTML.

 

This works in Safari, IE, and Chrome.

 

                    <div class="inputContainer">
                        <label class="inputLabel inputLabel-float inputLabelUnfocused" for="playingScene">Playing Scene:</label>
                        <input is="emby-input" type="text" id="playingScene" name="playingScene" class="emby-input" required>
                        <div class="fieldDescription">This scene will be set when videos start or resume playing.</div>
                    </div>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...