Geek Answers Handbook

Move element using responsive CSS in GWT

I have three elements similar to this in GWT:

HorizontalPanel picturePanel = new HorizontalPanel();
picturePanel.setStylePrimaryName("picturePanel");
image.setStylePrimaryName("picture");
leftArrow.setStylePrimaryName("arrow-left");
rightArrow.setStylePrimaryName("arrow-right");
picturePanel.add(leftArrow);
picturePanel.add(image);
picturePanel.add(rightArrow);

Now, after compilation, GWT becomes the following structure:

<table class="picture-container">
    ...
    <td align="left" style="vertical-align: top;">
        <img class="arrow-left" src="../images/icons/left2.svg"></img>
    </td>
    <td align="left" style="vertical-align: top;">
        <img class="picture mission-picture" src="../pictures/d5edc879-fe9b-4980-92e3-9bb4ac020abb.jpg"></img>
    </td>
    <td align="left" style="vertical-align: top;">
        <img class="arrow-right" src="../images/icons/right2.svg"></img>
    </td>
</table>

This HTML structure can be very well (hopefully) changed in the next version of GWT. To the question, is it possible to write CSS for this (without worrying about the current HTML structure) so that the left arrow and right arrow appear in the center and not on the sides? Please note that the image size is dynamic. I prefer not to change the GWT code, since CSS code should only be used when the page gets smaller than a certain width, for example

@media only screen and (max-width: 420px) {
    .arrow-left{}
    .arrow-right{}
}

Update:

, ResizeHandler GWT, , 420 . , , CSS. , .

jsfiddle, : http://jsfiddle.net/YZSAr/

+4
3

TL; DR A JSFiddle.

: -, SimplePanel ( GWT), CSS, , arrow-container-left arrow-container-right .

css :

.picture-container {
    position: relative;
    width: 100%;

    background-color: yellow;
}

.picture {
    display: block;
    min-width: 190px;
    margin-left: auto;
    margin-right: auto;

    background: #fa0; /* orange */
}

.arrow-container-left,
.arrow-container-right {
    position: absolute;
    bottom: -65px;
    display: block;
    width: 50%;
    height: 66px;

    background-color: green;
}

.arrow-container-right {
    right: 0;
}

.arrow-left {
    position: absolute;
    right: 0;
    width: 62px;

    background-color: red;
}

.arrow-right {
    position: absolute;
    left: 0;
    width: 62px;

    background-color: blue;
}
+3

, td tr, , CSS. -, ( ), CSS/Javascript.

CSS, Javascript. :

$('img.picture').parents('tbody').append(
  $('<tr></tr>').append(
    $('td .arrow-left, td .arrow-right').parent()
  )
);

, .arrow-right .arrow-left, , img.picture.

, , , , , , , ResizeHandler.

: http://jsfiddle.net/YZSAr/5/

0

, CSS HTML. , , HorizontalPanel ( VerticalPanel) GWT , .

FlowPanel? divs, , .

-1

More articles:


All Articles