CODEWITHSUNDEEP
csstwitter-bootstrapscreenpopover
Razican
Razican

Reputation: 727

Bootstrap's popovers get out of the screen

I'm having issues with a popover in Bootstrap. I have a form in a dropdown menu, in the navbar, and the popover gets over the top of the screen. Furthermore, the popover is really thin. This is the situation:

Screenshot

I would like to get something like this:

Screenshot

The problem is that if I change values for that popover to work, other popovers get wrong, and if I change the text inside, It won't fit. What could I do? this is the code, by the way:

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        <?php echo lang('register'); ?><b class="caret"></b>
    </a>
    <ul id="register" class="dropdown-menu form">
        <?php echo form_open('#'); ?>
            <input type="text" name="user" placeholder="<?php echo lang('login.username'); ?>">
            <input type="email" name="email" placeholder="<?php echo lang('reg.email'); ?>">
            <input type="password" name="pass" placeholder="<?php echo lang('login.password'); ?>">
            <input type="password" name="pass_conf" placeholder="<?php echo lang('reg.pass_conf'); ?>">
            <input class="btn btn-info" type="button" value="<?php echo lang('reg.submit'); ?>">
        </form>
    </ul>
</li>

It has a bit of PHP code but I think it shows the structure fine. The CoffeeScript for that part is this:

username    = $('#register input[name="user"]')
if ( ! /^([\w_-]{4,15})$/.test(username.val()))
    username.addClass('error')
    username.popover({
        'placement': 'right'
        'trigger': 'manual'
        'title': user_not_valid_title
        'content': user_not_valid
    })
    username.popover('show')
    pass = false

Upvotes: 2

Views: 3205

Answers (1)

Razican
Razican

Reputation: 727

I finally got to a solution without modifying the container of the popover, setting it to body, and then putting a higher z-index than the navbar.

Upvotes: 1

Related Questions