Title: [SOLVED]slider (v1.5) resizing browser
Post by: msvabik on August 18, 2016, 01:32:40 AM
Hallo, I use the slider: <input name="limit" class="easyui-slider"
data-options="showTip:true,
value:10,
min:0,
max:60,
step:1,
rule: [0,'|',10,'|',20,'|',30,'|',40,'|',50,'|',60]">
image before resizing the browser: (http://lehce.cz/sp1.png) After resizing the browser slider badly redrawn: (http://lehce.cz/sp2.png)
Title: Re: slider (v1.5) resizing browser
Post by: stworthy on August 18, 2016, 01:48:52 AM
You have to set the 'width' using a percent value. The code below works fine. <input name="limit" class="easyui-slider" style="width:100%"
data-options="showTip:true,
value:10,
min:0,
max:60,
step:1,
rule: [0,'|',10,'|',20,'|',30,'|',40,'|',50,'|',60]">
Title: Re: slider (v1.5) resizing browser
Post by: msvabik on August 18, 2016, 01:58:12 AM
If I use width = 100% get this result: (http://lehce.cz/s3.png) My code: <div class="easyui-panel" style="width:100%;padding:30px 60px;margin-top:20px;">
<form id="config{id}" method="post" action="servis.php">
<input type="hidden" name="id" value="{id}">
<input type="hidden" name="com" value="user">
<input type="hidden" name="action" value="SaveConfig">
<table style="width: 100%">
<tr>
<td style="width:100px">{lmonitor}:</td>
<td><input name="monitor" class="easyui-switchbutton" {mch} data-options="onText:'{on}',offText:'{off}',value:'1'"></td>
</tr>
<tr>
<td style="width:100px;height:70px;">{llimit}:</td>
<td>
<input name="limit" class="easyui-slider" style="width:100%" data-options="
showTip:true,
value:10,
min:0,
max:60,
step:1,
rule: [0,'|',10,'|',20,'|',30,'|',40,'|',50,'|',60]"></td>
</tr>
<tr>
<td style="width:100px;">{lfile}:</td>
<td><input name="file" class="easyui-switchbutton" {fch} data-options="onText:'{on}',offText:'{off}',value:'1'"></td>
</tr>
</table>
<div style="margin-bottom:20px;margin-top:20px">
<select class="easyui-combobox" name="proc" label="{lproc}:"
labelWidth="100" style="width:100%;height:32px" url="servis.php?com=user&action=GetProc&id={id}"
valueField="id",
textField="proc"></select>
</div>
</form>
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)" class="easyui-linkbutton" size="large" onclick="$('#config{id}').form('submit')" style="width:25%">{submit}</a>
</div>
</div>
Title: Re: slider (v1.5) resizing browser
Post by: stworthy on August 18, 2016, 07:41:29 AM
Please try to add the 'table-layout:fixed' style to the <table> element. <table style="width: 100%;table-layout:fixed">
...
</table>
Title: Re: slider (v1.5) resizing browser
Post by: msvabik on August 19, 2016, 02:50:03 AM
Thank you very much it works just fine.
|