英特尔XDK应用程序框架滑块长度

Question

如何让滑块更宽？我在切换滑块中有文字＆＃34; Graph＆＃34;或＆＃34;表＆＃34;被切断了。我怎样才能扩展它。

以下是相关元素：

<div class="wide-control">
    <input type="checkbox" class="toggle" id="ModeSwitch">
<label for="ModeSwitch" data-off="Graph" data-on="Table"><span></span>
    </label>

Answer 1

我不认为有一种简单的方法可以改变英特尔XDK用户界面的宽度。据我所知，这是这个小部件的一个集合。您可以在下面的自己的index.html文件中覆盖css样式（我为每个宽度添加了100，但您可以根据需要进行调整）：

<style type="text/css">
        #afui input.toggle+label {width: 165px;}
        #afui input.toggle:checked+label>span {
            transform: translate3d(137px,0,0);
            -webkit-transform: translate3d(137px,0,0);
        }
</style>

注意：确保此样式标记位于index.html文件中加载的afui.css之后。