tennis-crystal-ball icon indicating copy to clipboard operation
tennis-crystal-ball copied to clipboard

Mobile-friendly problem about control width.

Open jhzao82 opened this issue 6 years ago • 3 comments

I found some control in mobile are not width in 100%, set to 100% is good to mobile look, What about you think?

jhzao82 avatar Nov 14 '18 04:11 jhzao82

Thanks for noticing. Which controls are affected in particular? (which page and the name of the control?)

mcekovic avatar Nov 14 '18 10:11 mcekovic

Most pages, for example select,button,intput, Now, they are not fit the width of screen.

jhzao82 avatar Nov 14 '18 11:11 jhzao82

I got a little try to your style file. You can copy them and see, I think It's better then before.

@media (width <= 500px) { .row .input-group { margin-top: 20px; } .btn-group { width: 100%; margin-top: 10px; } .btn, .tab-pane button{ width: 100%; } #rankingTopN .btn{ width: auto; } .form-group.search { width: 100%; margin: 10px 0; } .margin-left, .no-margin-left { margin-left: 0; } .margin-right, .no-margin-right { margin-right: 0; } .col-sm-12 { margin: 0 -15px; } .grid-title { margin: 10px 0; } .tab-pane .input-group { margin-top: 10px; } .tab-pane .btn { margin-top: 10px; } .row select { margin-bottom: 10px; } #resultsTable th { display:block; } .row .pull-left, .row .pull-right { width: 100%; } #rankingTopN { position: relative; } #rankingTopN .fa-search-plus { position: absolute; right: 10px; top: 25px; } }

jhzao82 avatar Nov 18 '18 11:11 jhzao82