CODEWITHSUNDEEP
cssjsftwitter-bootstrapshadow
keltonk
keltonk

Reputation: 75

Can't figure out issue with Twitter Bootstrap combined with JSF web application (textbox shadow)

Link to image here: https://i.sstatic.net/oh37d.jpg

Me and my team are developing a web application for a school project using JSF2.0 and JBoss7. We are forced to use the outdated HP touchpad to run the application, so we are connecting and viewing the app currently through the laptop's IP on the default HP webOS browser. Everything was working fine, until we started implementing Twitter Bootstrap to style. The issue is, on laptop browsers (IE, Chrome, Firefox) the pages look great and have no issues, but once we view the pages on the tablet, there is a black box shadow several hundred pixels to the right of each text box and text area (shown in picture).

Does anyone know which CSS attribute would be causing something like this on an older browser?

Help is much appreciated in advance!

Upvotes: 1

Views: 413

Answers (1)

Marko
Marko

Reputation: 72230

If it is indeed shadow related, you may want to take a look at line 990 of bootstrap.css.

Note this may differ between different versions of Twitter Bootstrap

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 {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
          transition: border linear 0.2s, box-shadow linear 0.2s;
}

Remove the box-shadow declarations and see what happens.

As a precaution, you can do a search for all box-shadow occurrences and comment them out to see whether it makes a difference.

Once you've narrowed down the property and have fixed it, you can use some JS magic to only remove the shadows for that particular browser but I would ask a new question about that.

Upvotes: 1

Related Questions