JSF2 tags does not work inside a Bootstrap tag

Asked

Viewed 278 times

2

I created a Java Web project that is using JSF2 + Bootstrap, both CSS file and Bootstrap are correctly configured in my project, and in previous Web Java project was always responsible for the Back-End part, only now am I starting to learn the Frond-partEnd, and I’m having a hard time keeping up with myself for three weeks.

Every JSF tag that falls outside the Bootstrap tags usually works using the CSS file link, but when I put a JSF tag inside a Bootstrap tag it doesn’t work, JSF tags only work when I apply the CSS configuration directly to the XHTML page, and this is not good Frond-End development practice as shown below;

Model that is working:

<h:graphicImage library="images" name="carolina.jpg" style="margin-left: 50px;"/>

What I need to know is why this happens, the settings should be those below, and they don’t work. is that I am creating the codes in the wrong way on the page?

That’s on the page:

<h:graphicImage library="images" name="carolina.jpg" styleClass="foto_carolina"/>

This is in the CSS file:

@CHARSET "UTF-8";



.foto_carolina{
        margin-left: 50px;
}

I even tried this way, and it didn’t work either:

This is my full page:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <h:outputStylesheet library="css" name="bootstrap-theme.css" />
    <h:outputStylesheet library="css" name="bootstrap.css" />
    <h:outputStylesheet library="css" name="sistema.css" />


    <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="bootstrap.js" />



</h:head>


<style>

body {
    width:80%;
    margin: 0 auto;
    padding-top: 40px;
}

</style>

<h:body>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <h:graphicImage library="images" name="logotipoK.png" />
                </div>
                <div class="col-md-6">
                    <ul class="breadcrumb">
                        <li><a href="#">Inicio</a><span class="divider"></span></li>
                        <li><a href="#">O PLano</a> <span class="divider"></span></li>
                        <li><a href="#">Loja Virtual</a> <span class="divider"></span></li>
                        <li class="active">Contato</li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h:graphicImage library="images" name="legumes.png" />
                </div>
                <div class="col-md-6">
                    <h:graphicImage library="images" name="plano_carolina.png"
                    style="margin-left: 50px;" />
                    <h:graphicImage library="images" name="carolina.jpg" styleClass="foto_carolina/>    
                </div>
            </div>
            <div class="row">
                <div class="col-md-6"></div>
                <div class="col-md-6"></div>
            </div>
            <div class="row">
                <div class="col-md-6"></div>
                <div class="col-md-6"></div>
            </div>
            <div class="row">
                <div class="col-md-6"></div>
                <div class="col-md-6"></div>
            </div>
        </div>



    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</h:body>

</html>

I accept suggestions.

If by chance the post is not very clear, please ask me questions so I can clarify the doubts so that you can help me.

I am at all disposal, and eagerly awaiting help.

css jsf-2.2 bootstrap-3

  • Image tag does not display image or style is not applied? .

  • Answering your question, it is not applied, and other, does not display error message.

2 answers

0

is missing a " to close 

    styleClass="foto_carolina"/>

  • That’s not the problem.

0


Actually the problem is that I need to study more how to work the structure of Bootstrap, I will put the answer, but who gave me the result of the answer was a fellow from the Facebook community of Algaworks called Maike Meneguetti.

<div class="col-md-6">
            <div class="row">
                <div class="col-md-12">                     
                    <h:graphicImage library="images" name="plano_carolina.png" styleClass="img-responsive"/>
                </div>
                <br/>
                <br/>
                <div class="col-md-12">
                    <h:graphicImage library="images" name="carolina.jpg" styleClass="foto-carolina img-responsive img-rounded"/>
                </div>
            </div>
        </div>

The CSS file looks like this;

@CHARSET "UTF-8";

body {
    width: 80%;
    margin: 0 auto;
    padding-top: 40px;
}

.foto-carolina{
        max-width: 60%;
}

I put the answer because I believe that there are other people who have doubts, and I would like the people in the forum community not to be upset with me for having put the merit to the Facebook Algaworks community, 'Cause besides, it’s been four days and no one’s had the time to try to help me out.

  • 1

    Please mark your answer with certain if it really solves the problem.

  • you should know that I myself cannot mark my answer as certain, the forum system does not allow.

  • On the contrary. Try to click next to your question, below the votes. Move the mouse and a green check should appear. If you can’t, ask for help in chat or right here. I’ve done it myself.

Browser other questions tagged css jsf-2.2 bootstrap-3

You are not signed in. Login or sign up in order to post.