JSF2 tags do not work inside a Bootstrap tag [closed]

Navigation
2

I created a Java Web project that is using JSF2 + Bootstrap, both the CSS file and Bootstrap are correctly configured in my project, and in previous project Web Java was always responsible for the Back End part, only now I'm starting to learn the part of Frond-End, and I'm having a difficulty that has been with me for 3 weeks.

Every JSF tag that falls outside the Bootstrap tags works normally using the CSS file link, but when I put a JSF tag inside a Bootstrap tag it does not work, JSF tags only work when I apply the CSS settings directly on the XHTML page, and this is not a good Frond-End development practice as you see 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 do not work. Am I creating the wrong codes on the page?

This is 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 it this way, and that did not 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><!--LatestcompiledandminifiedJavaScript--><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</h:body>

</html>

I accept suggestions.

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

I am at your disposal, and anxiously awaiting help.

    
asked by anonymous 27.08.2015 / 16:29

2 answers

0

Actually the problem is that I need to study more how to run the BooTstrap framework, I'm going to put the answer, but who gave me the answer was a fellow from the AlgaWorks FaceBook community named 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 have put the answer because I believe that other people with doubts have, and I would like the staff of the forum community not to be annoyed at me for having put the merit to the AlgaWorks community of FaceBook, because in addition it spent 4 days and no one had the availability of the manos to try to help me.

    
30.08.2015 / 13:34
0

is missing some "to close" 

    styleClass="foto_carolina"/>
    
30.08.2015 / 04:34
How to prevent the user from entering a "." before any number? How to make the form update correctly?