b:NavBar brand-image aligned incorrectly

[sometowngeek]

Versions

• BootsFaces: 1.4.2
• Browser: Internet Explorer 11.2x
• JSF: 2

---

Dilemma

I am having trouble getting the image aligned.

• The image shows alignment of the icon.

I tried following the documentation and haven't had any luck on making sure it's aligned properly.

It would be nice if the <b:navBar ... > would make sure there is enough padding/margin to make sure the div tag encompasses the whole content.

This is the MCVE code I used:

    <b:row>
        <b:navBar brandHref="#"
            brandImg="/something/resources/images/dummyLogo.tif" fluid="true">
            <b:form styleClass="navbar-form navbar-left">
                <div class="form-group">
                        <input type="text" class="form-control" />   
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </b:form>
            <!-- Following line is needed for TBS 3.0.1 (panel content overflow issue) -->
            <b:navbarLinks pull="right">
                <b:navLink value="    " href="#"></b:navLink>
            </b:navbarLinks>
            <b:navbarLinks pull="right" styleClass="hidden-xs">
                    <b:navLink value="Link" href="#"></b:navLink>
                    <b:dropMenu value="Dropdown">
                      <b:navLink value="Action" href="#"></b:navLink>
                      <b:navLink value="Another action" href="#"></b:navLink>
                      <b:navLink value="Something else here" href="#"></b:navLink>
                      <b:navLink></b:navLink>
                      <b:navLink header="Nav header"></b:navLink>
                      <b:navLink value="Separated link" href="#"></b:navLink>
                      <b:navLink value="One more separated link" href="#"></b:navLink>
                    </b:dropMenu>
            </b:navbarLinks>
        </b:navBar>
    </b:row>

I think the same thing happens with <b:navBar brand="Foo" ...>

It would be nice to see this bug fixed. :)

[sometowngeek]

Hold on... Don't start researching this yet. I just found something interesting about the code. I'll keep you posted.

[sometowngeek]

Yeah, I still have this issue. Although, my workaround is adding image-style="margin-top:-15px;" attribute to <b:navBar ...>.

Is the navBar supposed to keep the image in the center or does it just offset it?

[geopossachs]

i found in BF 4.0 the css style for the image with vertical-align: top; display: inline-block;

[geopossachs]

@sometowngeek can to try via brandImgStyle if the image need 'vertical-align: top' or / and 'display: inline-block'?