Wrong select look


#1

Hi!

I’ve following Problem. I use the Ionic select-form in one of my projects:

<div class="form">
    <h4>Turnierbeginn und Spieldauer!</h4>
    <p>Turnierbeginn (Uhrzeit)</p>
    <input type="time" name="startTime" ng-model="tournament.settings.startTime" placeholder="Startzeit">
    <div class="list">
        <label class="item item-input item-select">
            <div class="input-label">
                Spielzeit
            </div>
            <select ng-model="tournament.settings.gameDuration" ng-change="gameDurationChanged()">
                <option ng-repeat="time in gameTimes" value='{"absolute": "{{time.minutes * time.halfs}}", "pause": "{{time.pause}}", "halfs": "{{time.halfs}}"}' ng-selected="$index == 0">{{time.halfs}}x {{time.minutes}}Min.</option>
            </select>
        </label>
        <label class="item item-input item-select" ng-show="showPauses">
            <div class="input-label">
                Spielzeit
            </div>
            <select ng-model="tournament.settings.pauseDuration">
                <option ng-repeat="pause in gamePauses" value="{{pause.minutes}}">{{pause.minutes}}Min.</option>
            </select>
        </label>
    </div>
</div>

The Problem is, that the Select-Boxes are not shown in ionic style but in native browser-style. In the lokal development in the browser and also on android and ios phones.

Here you can see this:

I also tried the original HTML from the demo and it also doesn’t work.

Any Ideas, whats wrong?

Thanks,
Jakob


#2

What do you include in your index.html?

<link rel="stylesheet" href="styles/main.css" />

Ref: https://github.com/Robinyo/Vardyger/blob/master/core/client/app/index.html


#3

Hi!

Thanks for reply. The stylesheet (i use the ionic.app.css via SASS/SCSS) was included, but found out, that the layout was already working. Only the Select-Item was overwritten with my own css-rules and so it looked like a native select-box…

Just a simple CSS Issue (:

Thanks,
Jakob