Problems configuring Table with CSS

Asked

Viewed 126 times

0

I am creating a commercial project in JSF, and to start the project I started to create the layout of the pages, to create the project, I am doing it by pieces, and in each piece of the project I am creating small projects that will be part of a single project.

The part I wanted to talk about is the page that will display the products.

I would like you to look carefully at the code line below;

<table>
    <ui:repeat var="produto" value="#{pesquisaProdutoBean.produtosListados}" varStatus="status">

        <tr>
            <td> <h:graphicImage library="images" name="relogio.jpeg"/> </td>
            <td> descrição do relogio </td>
            <td> valor do relogio </td>
        </tr>

    </ui:repeat>
</table>

She’s getting like this;

inserir a descrição da imagem aqui

You can see that there is a first column that contains the image and another second column that contains the description, all JSF pages with tables are the same.

Look at this other example;

Already in this example things are very different, the image is in one line, the description is in another line and the values in another line.

While in the first image items are organized in columns, in the second image they are organized in rows.
I wish I could organize my table in rows and not columns, I have made some attempts but I have not succeeded. I need to know how to do this.

inserir a descrição da imagem aqui

I put my XHTML like this;

<h:form>

                        <table>

                            <ui:repeat var="produto"
                                value="#{pesquisaProdutoBean.produtosListados}"
                                varStatus="status">

                                <div class="row">
                                    <div class="col-md-4">
                                        <h:graphicImage library="images" name="relogio.jpeg"
                                            id="imagemProduto" />
                                    </div>
                                    <div class="col-md-4">
                                        <div id="descProduto">RELÓGIO FOSSIL FCH2784N</div>
                                    </div>
                                    <div class="col-md-4">
                                        <div id="descValor">R$ 500,00</div>
                                    </div>

                                </div>

                            </ui:repeat>

                        </table>

                    </h:form>

CSS:

#descProduto{
    position:relative;
    margin-top:50px;
    text-align: left;
}
#descValor{
    position:relative;
    margin-top:50px;
    font-size:18px;
    text-align: left;
    font-style: italic;
}

When it wasn’t what I wanted;

inserir a descrição da imagem aqui

html css jsf

  • @Viniciusdutra Do not add comments as an issue to the question. If you have a question or need clarification from the author, use this comment section, because that’s what it’s for.

  • sorry I didn’t get the comment.

  • the comment was for Vinicius, who had made an issue to his question with the comment: I’m interested in helping you, but I’m having a hard time understanding your doubt. It would be possible to make more clear what you currently have and where you want to get?

  • explaining in a practical way I wanted to know how to configure the css to look like in the second figure. take a look that I just updated my post.

  • @Chun I think he didn’t comment because he doesn’t have enough reputation to comment. p

  • 1

    True. But I already transcribed what he had added as an edit, for comment :)

  • @wladyband you are using bootstrap?

  • I’m using yes.

  • Have you tried to take the <div class="col-md-4"> the description and value?

Show 4 more comments

1 answer

1

I did a test with HTML+Bootstrap+AngularJS and it worked, I believe it will also work on JSF, try to do this:

<h:form>
   <table>
      <div class="row">
         <ui:repeat var="produto"
            value="#{pesquisaProdutoBean.produtosListados}"
            varStatus="status">
            <div class="col-md-4">
               <h:graphicImage library="images" name="relogio.jpeg"
                  id="imagemProduto" />
            </div>
            </br>
            <div id="descProduto">RELÓGIO FOSSIL FCH2784N</div>
            </br>
            <div id="descValor">R$ 500,00</div>
         </ui:repeat>
      </div>
   </table>
</h:form>

Here is the example: http://jsfiddle.net/sinkz/RkykR/1675/

Just increase the size of the result window you will see an image next to the other.

Browser other questions tagged html css jsf

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