ckrack/fbootstrapp

HTML, CSS, and JS toolkit for facebook apps

fbootstrapp's Issues

Width update 940px

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?

Bootstrap Class Name Differences

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?

Typeahead

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?

api?

where are the fb auth functions?

Why my mouse scroll (down/up) does work ?

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 ??

Update to 520px

Facebook iFrames changes to 520px width.

popover protruding artifacts

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.

Legal question

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

overflow-y:scroll

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/

No scrolling

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 ?

Popover - more positioning

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).

Twipsy breaks when using latest jQuery (Uncaught TypeError: Cannot read property 'webkit' of undefined)

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.

Padding in select elements in Firefox 9

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.

popoverdouble - No matching definition

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!

Upgrading to 2.2.2

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

Modals in iframes

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

fbootstrap tabs

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

Add Delivery Method

Delivery Method

                </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>

---

main file - second tab

Add Document Type

Document Type

                </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>

Popover arrow has no border

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

Upgrade base to bootstrap 2.0?

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...

Bootstrap 3?

Any plans to update to BS 3?

container fluid

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

fbootstrap tabs

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?

FB.Canvas.setSize

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);
}());

Remove / Re-style topnav

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.

fbootstrap responsive

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

Wrong facebook colours

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.