Change the size of the search box

GroupDocs.Viewer Product Family
1

How can I change the size of the search box? If I type in Chinese character, the top and the bottom of the word is cut-off (see the attachment). Thanks!

2

Hello,


Thank you for your request. You can change “Search” field size with JavaScript code.
For example:
$(document).ready(function () {
$(".input_search").width(“150px”);
$(".input_search_clear").css(“left”, “192px”);
});

If you will have more question please feel free to contact us.
3

How about the current page count? I found out the length only long enough to display 3 digits.

4

Hello,


Thank you for your request. You can change width of the current page count via this JavaScript code: $(".new_head_input").css(‘cssText’, “width: 20px !important”);

Please note that the size used in the example code is just an example and you should set a valid for you value.
5

I tried the code, no error but the current page count input size still the same. Could you give me more specific instruction to do it, such as which file and where?



BTW, I haven’t bought the licence yet. Will your team make the change in the next release? This bug is not major, but note that your team is not detail-minded.

6

Hello,


Thank you for coming back. You should add this code line to the same JavaScript function where you change size of the search field.
For example it will looks like this:
$(document).ready(function () {
$(".input_search").width(“150px”);
$(".input_search_clear").css(“left”, “192px”);
$(".new_head_input").css(‘cssText’, “width: 20px !important”);
})

As for bug and changes - this style modifications is not a bug, Viewer dashboard has a default style and if you need to change it you should do it by your self.
7

I use the following code with the attached result.



$(document).ready(function () {

$(".input_search").width(“100px”);

$(".input_search_clear").css(“left”, “192px”);

$(".new_head_input").css(‘cssText’, “width: 100px ! important”);

});



The Search box is enlarged, but the ‘clear search text’ box (the circle ‘x’ button) is not position correctly.



Please help me to solve the problem. Thanks!

8

Hello,

To set the “cancel” button to the right place please update it’s CSS “letf” property from 192px to 142px. For all other style properties please pick up correct values in the browser console like shown on this:

<a href="http://prntscr.com/57kbxh">screenshot </a>

and use them in your JavaScript code.