How to show search text box

Get help with using Metro 4 components
Post Reply
KarthikIsai
Posts: 3
Joined: Thu Sep 20, 2018 1:38 pm
Status: Offline

How to show search text box

Post by KarthikIsai » Thu Sep 20, 2018 1:47 pm

<!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.

User avatar
olton
Site Admin
Posts: 114
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Thu Sep 20, 2018 2:05 pm

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

KarthikIsai
Posts: 3
Joined: Thu Sep 20, 2018 1:38 pm
Status: Offline

Post by KarthikIsai » Thu Sep 20, 2018 3:27 pm

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.

KarthikIsai
Posts: 3
Joined: Thu Sep 20, 2018 1:38 pm
Status: Offline

Post by KarthikIsai » Thu Sep 20, 2018 3:43 pm

I found the second issue(Width) also. Thanks for your response.

User avatar
olton
Site Admin
Posts: 114
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Thu Sep 20, 2018 3:46 pm

By default input component have width = 100% , if you need custom size, create css class and apply to input with attribute data-cls-component

Post Reply