Page 1 of 1

How to show search text box

Posted: Thu Sep 20, 2018 1:47 pm
by KarthikIsai
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AddNew</title>
<link href="../../css/metro-rtl.min.css" rel="stylesheet" type="text/css" />
<link href="../../css/metro.min.css" rel="stylesheet" type="text/css" />
<script src="../../js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../js/metro.min.js" type="text/javascript"></script>
<script src="../../js/metro.js" type="text/javascript"></script>
<link href="../../css/metro-all.min.css" rel="stylesheet" type="text/css" />
<link href="../../css/metro-colors.min.css" rel="stylesheet" type="text/css" />
<link href="../../css/metro-icons.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<p>Input without reveal button</p>
<input style="width:350px;" type="text" data-role="input" data-search-button="true">
</div>
</body>
</html>

I used this code for showing textbox with search icon. But I didnt found search icon in my output. Any mistake I made in code. or any CSS I missed to add.
Please help anyone.

Re: How to show search text box

Posted: Thu Sep 20, 2018 2:05 pm
by olton
Check you Metro version. Must be 4.2.22
Read this pages
https://metroui.org.ua/intro.html
...
https://metroui.org.ua/input.html#_input_search

Re: How to show search text box

Posted: Thu Sep 20, 2018 3:27 pm
by KarthikIsai
Thank you so much for your response. I got search button in text box. But when i got search icon in text box, the text box width not setting(Automatically increased the size. Now I'm checking with metro.js for anywhere they are setting width for that element). If you have any idea with that kindly let me know the reason.

Once again thank you for the quick response.

Re: How to show search text box

Posted: Thu Sep 20, 2018 3:43 pm
by KarthikIsai
I found the second issue(Width) also. Thanks for your response.

Re: How to show search text box

Posted: Thu Sep 20, 2018 3:46 pm
by olton
By default input component have width = 100% , if you need custom size, create css class and apply to input with attribute data-cls-component