Twitter Bootstrap Question posted in

Twitter bootstrap – jQuery textFill with bootstrap modal

I use jQuery textFill to fit some dynamic text (from a database) into a div with predefined width.
My problem is that this plugin works great on a page, but i want to use it inside a twitter bootstrap modal. This doesn’t seem to work. I create an example in jsFiddle. I use a div outside of the modal and a div inside. The out-of-modal div works fine. The div inside seems to have some problems 🙂

<div id="out-of-modal"> <span>Lorem ipsum. Lorem ipsum.</span></div>

<div id="inside-modal"> <span>Lorem ipsum. Lorem ipsum.</span></div>

Here is the example in jsFiddle

Do you have any idea of what to do ?

Tags:

2

Answers


  1. 0

    The problem is with the css selector hide you used here, because it has property display:none with important rule

     <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">

    and causing not the modal to show, so remove it and also for transitioning effects use css selector fade if you like

     <div id="myModal1" class="modal fade" tabindex="-1" role="dialog">

    SideNote: In your fiddle you are missing key div elements of modal e.g <div class="modal-dialog"> and <div class="modal-content">

    <div class="modal-dialog">
    <div class="modal-content">
        //Modal Header, Body and Footer Comes Here
    </div>
</div>

    Working fiddle

    Login or Signup to reply.
  2. 0

    I am really late to this thread, but I found a solution to this problem. In the actual script, there’s at some point this code
    var ourText = $(Opts.innerTag + ':visible:first', this);
    which basically tells jquery to pick the first <span> element inside our <div> that is visible. However, our text is obviously not visible, because it’s inside the modal when the page is started, so it’s hidden. There’s a simple fix to this. Just go inside the library and edit that part into this and it should work perfectly:

    var ourText = $(Opts.innerTag + ':first', this);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search