Width in mobile vs desktop version

[eothein]

Dear Kartik

When using the widget in a DetailView, there is a problem (which I previously did not have). Up until a width of approx 640 px, the widget is performing fine, but for resolutions which have a larger width the layout of the widget gets all messed up: in off mode the options are hiden and in on mode, the options are on top of each other.

Correct version: Version not working: The code used in the DetailView is: [ 'attribute' => 'reservatie_isoptie', 'label'=>'Optie?', 'format' => 'raw', 'value' => $model->reservatie_isoptie ? '<span class="label label-success">Yes</span>' : '<span class="label label-danger">No</span>', 'type' => DetailView::INPUT_SWITCH, 'widgetOptions' => [ 'pluginOptions' => [ 'onText' => 'Yes', 'offText' => 'No', ] ], ],

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/34699052-width-in-mobile-vs-desktop-version?utm_campaign=plugin&utm_content=tracker%2F8186004&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F8186004&utm_medium=issues&utm_source=github).

[andrew-artamonov]

Also it happends when browser scale <> 100% AND labels are changed

[kartik-v]

Check if you have other code and JS/CSS that is conflicting and overrides the yii2-detail-view extension styles and/or default bootstrap styles.

To test, this first try your detail view configuration on a fresh yii2-basic app without any other styles and plugins.

[andrew-artamonov]

fresh yii2-basic, browser scale=110% (chrome), same result

echo SwitchInput::widget([
    'name'          => 'status_1',
    'pluginOptions' => [
        'onText'  => 'Да',
        'offText' => 'Нет'
    ]
]);

[kartik-v]

I cannot reproduce the issue on the Detail View demo page. Request a reproducible example please.

[ItsReddi]

@kartik-v its not reproducable on your site because the demo does not load via ajax i think. Take a look at the disqus comments. There are some guys that have this problem. We too.

Reproduce:

1. Place a button that makes ajax call renderAjax a toggle Button
2. Press it. Sometimes it is correct. Sometimes you see something like that: http://prntscr.com/e0zolv or something like above.

The Problem is that the width (calcualted via js) ist not set correctly.

[kartik-v]

Feel this needs to be reported to plugin author at the bootstrap-switch repo.