size and style="width:5px" attributes are not working for input tag

Development
1

Hello everyone, I’m working on the UI for the patient search widget. I want to add a new input field in the form having size near about 5px. I used size=5 and style=“width:5px” in my input tag, but both are not working. Even I use field/text fragment with size=5 still, the size of the input bar is not changed. Here is my input tag: <input type="text" id="size-test" size="5" /> and <input type="text" id="width-test" style="width:5px"/>.

2

@rushikesh which browser are you using ?? could it be a browser related issue??

3

I’m using latest version of chrome

4

@rushikesh could you try using the height and width attributes e.g (style=“height:xxpx; width:xxxpx;”)

5

I guess your new html elements are inheriting some css rules from parent elements in the DOM. Try troubleshooting this using your chrome developer tools.

I would be more specific and tryout something like this

#size-test,  #width-test {
     width:5px;
}

If the above style rule doesn’t work, open your dev tools and select those new input tags and right at the style section, you can see which rules affect the width properties, that way you can override those rules.

Samuel

2 Likes
6

Thanks, @samuel34, I used dev tools to solve the problem. I override ‘‘min-width’’ property to get required width:smile:

1 Like