<html>
<head>
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
I don't if this is viable in the current UI implementation but it
seems that<br>
we have 2 optimal solutions for 2 different scenarios - fewer
interfaces or a<br>
lot of interfaces. Can't we have both implementations? Depending on<br>
how many interfaces we must show we can use one approach or the
other.<br>
<br>
If it's not feasible then I vote for this one:<br>
<br>
"<span lang="EN-US">IMO the default html control looks better and it
delivers a better user experience than<br>
a dropdown. We can “destroy” Bootstrap-Select style and widget if
a VEPA network type<br>
is selected and customize the default html control with CSS3 to
look like other form<br>
elements.</span>"<br>
<br>
I believe that this scenario of having hundreds of interfaces to
show is a corner case<br>
for Kimchi. Most of the time we'll be handling < 30 interfaces. <br>
<br>
<br>
Daniel<br>
<br>
<div class="moz-cite-prefix">On 03/18/2016 06:09 PM, Samuel Henrique
De Oliveira Guimaraes wrote:<br>
</div>
<blockquote
cite="mid:5a2e65059ea24c669a0a3a169f3d4dec@serv030.corp.eldorado.org.br"
type="cite">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<meta name="Generator" content="Microsoft Word 15 (filtered
medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri",sans-serif;
mso-fareast-language:EN-US;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:70.85pt 3.0cm 70.85pt 3.0cm;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
<div class="WordSection1">
<p class="MsoNormal">Hi team,<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><span lang="EN-US">I was looking into
Bootstrap-Select that is already implemented on Wok and it
does allows multiple option selection, which means we can
use it to select more than one interface when creating a new
Vepa network. But instead of looking like a default
multi-select input, it keeps the default style and puts the
selected items separated by comma:<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><a
moz-do-not-send="true"
href="https://silviomoreto.github.io/bootstrap-select/examples/#multiple-select-boxes"><a class="moz-txt-link-freetext" href="https://silviomoreto.github.io/bootstrap-select/examples/#multiple-select-boxes">https://silviomoreto.github.io/bootstrap-select/examples/#multiple-select-boxes</a></a><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">In the other hand, this
is what a multiple select looks like with native HTML
controls:<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><a
moz-do-not-send="true"
href="http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple"><a class="moz-txt-link-freetext" href="http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple">http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple</a></a><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">IMO the default html
control looks better and it delivers a better user
experience than a dropdown. We can “destroy”
Bootstrap-Select style and widget if a VEPA network type is
selected and customize the default html control with CSS3 to
look like other form elements. However, what if there are
hundreds of interfaces? In this case I propose we keep
Bootstrap-Select with a search/filter on top, which would
work like this jsfiddle:<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><a
moz-do-not-send="true"
href="https://jsfiddle.net/4yvgnx9e/"><a class="moz-txt-link-freetext" href="https://jsfiddle.net/4yvgnx9e/">https://jsfiddle.net/4yvgnx9e/</a></a><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Any thoughts or
comments?<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Regards,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Samuel<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
</div>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
Kimchi-devel mailing list
<a class="moz-txt-link-abbreviated" href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a>
<a class="moz-txt-link-freetext" href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a>
</pre>
</blockquote>
<br>
</body>
</html>