TextBox Issues

Mar 23, 2013 at 9:07 PM
Hi,

In IE 10, when I click the "Add a page" link from the settings icon, the textbox for the page name in the modal window is looking a little smaller. So, the text cannot be displayed properly. Another thing is that the border becomes "dotted"..

Image

http://oi46.tinypic.com/2hrz4if.jpg

Just wanted to let you know...
Thanks for the good job...

ismet
Apr 26, 2013 at 9:09 AM
Hey ismetTogay,

bootstrap.min.css line 908 is responsible for this 'issue' with the following styling:

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
display: inline-block;
height: 20px;
padding: 4px 6px;
margin-bottom: 10px;
font-size: 14px;
line-height: 20px;
color: #555;
vertical-align: middle;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

I think you can easily fix this by adding additional styling to bootstrap-custom.css:

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
height:auto;
}

Image

Good luck!
Coordinator
Apr 28, 2013 at 9:15 PM
Hi,

There are a few issues that really bug me with Bootstrap and SharePoint. One being the image width issue in the ribbon and the other being that Bootstrap provides styles to general elements such as input fields.

Although setting the input fields to height: auto in bootstrap.css (or bootstrap.min.css) should work most of the time, SharePoint still provides it's own heights for some input fields. You would be overriding these as well.

A few ideas. First, I would hesitate to update anything within the bootstrap.css file as this could cause issues if you ever wanted to update to a new version of Bootstrap. You might lose your updates. If you are ok with updating the bootstrap.css file then I would suggest you remove the entire style, i.e, remove:
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
 display: inline-block; 
height: 20px; 
padding: 4px 6px; 
margin-bottom: 10px; 
font-size: 14px; 
line-height: 20px; 
color: #555; 
vertical-align: middle; 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
} 
or just remove height: 20px from the above block.

My preferred method, although looks like wack-a-mole, is to simply override a specific issue as it crops up. In the case with the dialog box. We added the following style to the bootstrap-custom.css a few versions back. Bootstrap for SharePoint 2013 Beta v 1.1.11 includes this fix as well as Bootstrap for SharePoint 2010 Beta V 1.0.1.
.ms-dialog select, .ms-dialog textarea, .ms-dialog input[type="text"], .ms-dialog input[type="password"] {
    height: auto;
}
Please let us know if this does not solve your problem.

I hope this helps.

Eric