I was going to ask if anyone had done any additional positioning for popovers (e.g., below and to the right), but once I looked into the code, it seemed pretty easy to add custom positioning. So I just wanted to add this as a quickie tutorial for anyone else interested.

For a Popover that is positioned below and to the right do the following:

In the CSS add:
.popover.belowRight .arrow{top:-4px;left:25px;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid rgba(0, 0, 0, 0.3);} .popover.belowRight:after{top:0;left:25px;margin-left:-11px;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:11px solid #ffffff;content:' ';} .popover.belowRight:after{position:absolute;width:0;height:0;} // Combine it with the others

in bootstrap-twipsy.js find the switch statement and add the case to position the popover:
case 'belowRight': tp = {top: pos.top + pos.height + this.options.offset, left: pos.left - 20} break

Then just set your popover's placement to "belowRight". Pretty simple, right? You'll notice that I positioned the arrow at 25px and the popover at pos.left-20. This is to bring it pretty close to the left edge while keeping the arrow from sticking out. Just fiddle with those numbers if you want the arrow farther to the right (and the popover farther to the left).

I can't make fbootstrap responsive work on different resolutions like tablets,phones

Hi everyone!
I just want to know what's the code to make the second tab(pill) be activated automatically when they visit the page instead of the first tab/pill? what's code for that?

Follow updates on https://github.com/prasad83/fbootstrapp

In our facebook app project, we didn't know your library and we used standart bootstrap, when we noticed your fork, we want to try but your some class names are different from standart bootstrap names. So we have to change our all view codes. :( Will it can be have same class names with bootstrap? Is it possible?

I'm thinking about removing the topnav alltogether, or restyling it.

The main reason is, that i do not want this to be used by phishers to create facebook lookalikes for scamming.

The topnav is mainly left in place just for the example pages - i guess apps won't really use a pinned navigation anyways.

The question is, whether it should be removed, seeing as it just increases the filesize, or restyled in case someone wants to use it.

I'm not sure if this is a feasible request or not, but bootstrap 2.0 has been released (twitter's version). is it worth it to re-base this repo on the updated twitter-bootstrap?

I'm going to guess not...

Hi,

I have a issue with scrolling, not work.

I use just css.
i pus css in file.

i added into my page.

<div class="container">
<div class="content">

// rest of code

</div>
</div>
</body>

and scrolling not wok :|

what i can do ?

Hi everyone!
Having problem using container fluid in fbootstrap.no scroll down..i can see the contents below. how to fix it? thanks

for some reason, i keep getting the following error in my app:

No matching definition was found for #popoverdouble > .above(11px, , -2px)

what i ended up doing to fix it i s commenting out these lines in patterns.less:

1026 &.above:after { #popoverdouble > .above(11px, @white, -2px); }
1027 &.right:after { #popoverdouble > .right(11px, @white, -2px); }
1028 &.below:after { #popoverdouble > .below(11px, @white, -2px); }
1029 &.left:after { #popoverdouble > .left(11px, @white, -2px); }

i am not currently using popovers, but i probably will be soon.. my guess is that this might post a problem..

just wanted to point it out, and see if i was doing something wrong...

thanks!

where are the fb auth functions?

Any plans to update to BS 3?

Why do you have a forced scrollbar on the element? For pages that fit vertically, there is no need to have an ugly scrollbar.

You can try removing my CSS stylesheet from here to see what I mean: http://apps.facebook.com/imdb_top_two_fifty/

Mac OS X 10.7.2 | Chrome 16.0.912.75

Popover arrow is completely white, instead of continuing the box border.

Pic:
https://twitter.com/#!/leonardoperna/status/156483114976280577/photo/1/large

Hi,

I've noticed that popovers, when over other elements, in my case it's a sorted table, have protruding lines on the edges. I've tried playing with z-indeces but nothing seemed to fix it. Hope you can take a look. Thanks!

Screenshot here: http://i.imgur.com/92YNy.png

P.S. tested on Firefox 9.0.1 and Chrome 16.0, same results.

Hi everyone!
I'm having problem in fbootstrap tabs.
In my first and second tab, i included a .php file to fetch data from database. When I only include 1 php file, tabs are working. But if I include another .php file on the other tab it doesn't work.

Here's my code

main file - first tab

                </div>
                <div class="actions">
                  <button type="submit" class="btn primary">Add</button>
                </div>
              </fieldset>
            </form>
            <div class="custom-space"></div>
            <!--table for delivery methods-->
            <table id="delivery-methods-table" class="condensed-table bordered-table zebra-striped">
              <thead>
                <tr>
                  <th class="add_space">Delivery Method</th>
                  <th class="add_space">Status</th>
                  <th class="add_space">Action</th>
                </tr>
              </thead>
              <tbody>
                <?php include("get_methods.php"); ?>
              </tbody>
            </table>
            <!--end table for delivery methods-->
          </div>
        </div>

                </div>
                <div id="number_of_days_box" class="clearfix">
                  <label for="number-days"><strong>Days</strong></label>
                  <div class="input">
                    <input type="text" class="span10" id="number-days" name="number-days" maxlength="3" autocomplete="off" placeholder="Number of days" />
                  </div>
                </div>
                <div class="actions">
                  <button type="submit" class="btn primary">Add</button>
                </div>
              </fieldset>
            </form>
            <div class="custom-space"></div>
            <!--table for document types-->
            <table id="document-types-table" class="condensed-table bordered-table zebra-striped">
              <thead>
                <tr>
                  <th>Document Type</th>
                  <th>Number of Days</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <?php include("get_document_types.php"); ?>
              </tbody>
            </table>
            <!--end table for document types-->
          </div>
        </div>

In Firefox 9.0.1 (maybe others, didn't test), the select boxes seem to have some padding (4px all around), so the text is somewhat obscured. It seems like Firefox is ignoring the "padding: initial;" rule. However, this doesn't cause problems in Bootstrap because the height and line-height are 27px (so it just looks kind of funny, but still readable), but you've made them 21px, so in Firefox the text gets chopped.

I am a fan of Twitter Bootstrap until I found fbootstrap a simpler and very good design. Actually this is not an issue and I can't find where should I post this. I just want to ask how to use typeahead in fbootstrap? I tried copying the typeahead of bootstrap and it works fine but the problem is arrow up/arrow down not working. Can you help me?

Not sure if this can be classified as an issue per say, but isn't the Facebook content centered in a container of width 940px by default as opposed to 740px.

Can this be edited to 940px without breaking anything?

Hi,

I'm building a Facebook canvas app and I'd like to use facebook-like design. I've found this great library but I'm not sure if Facebook allows the canvas app to look like they were part of the "core" Facebook.

Does anyone know if it's possible to use such design elements in canvas applications?

Thank you,

paha77

In an iframe application, is there a way to have the modal appear above the canvas? Otherwise the modal only affects the iframe and the modal is cropped. My use case is a 520px page tab application

Facebook iFrames changes to 520px width.

Hi,

any plans to include a ready to include (link) .js-file wo easily get this to work:
https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/

You need to load the JS SDK and then it is simple.
Would be nice to have one maintained file to just script-link in an get a auto sized canvas/tab.

Here like I use it with asynchronous load of the JS SDK:

window.fbAsyncInit = function() {
FB.Canvas.setSize();
};

(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());

This took me forever to find!

This will work fine:

<!DOCTYPE html>

<head>

<title>Test me</title>

<script src="http://code.jquery.com/jquery-1.7.min.js&quot;&gt;&lt;/script>

<script src="/assets/fbootstrap/js/bootstrap-twipsy.js"></script>

</head><body></body></html>

Where as this will not:

<!DOCTYPE html>

<head>

<title>Test me</title>

<script src="http://code.jquery.com/jquery-latest.js&quot;&gt;&lt;/script>

<script src="/assets/fbootstrap/js/bootstrap-twipsy.js"></script>

</head><body></body></html>

It throws: "Uncaught TypeError: Cannot read property 'webkit' of undefined" in Chrome & FF.

Im using this library, i think the problem is when i insert / link bootstrap.css (fbootstrap) into my code then my mouse stacked, it cannot scroll down/top

is there any js/css should i insert others than main bootstrap.css ??

You seem to be using the incorrect colours for facebook. The correct colours are:

Topbar/Header: #3B5998
Topbar/Header links: background - #3B5998, link - #d8deea
Topbar/Header links hover: background - #4B67A1, link - #fff (or #ffffff)
Topbar/Header border (bottom): #133783

it's really irritating how you've managed to use incorrect colours. Please change it. Other than that, great work.