I have created a field style called right1 which I use to put this css code on certain fields: 

div.right1 {
padding-left: 15px;
}

This works fin as long as the field doesn't has a label displayed (inline or above). If the field has a label the custom style seems to be ignored.

My fault, bug or something else?

CommentFileSizeAuthor
working without label.PNG12.06 KBdddave
broken by label.PNG14 KBdddave

Comments

pfrenssen’s picture

pfrenssen
Location Sofia
commented
Status: Active » Postponed (maintainer needs more info)

Can you please post the HTML that is generated by Display Suite in both cases? That would be more helpful than those screenshots. This might be a mistake in your CSS file.

dddave’s picture

dddave commented
Status: Postponed (maintainer needs more info) » Active

Sorry for not getting back to this earlier. You can visit this issue live at http://www.fromwaydowntown.de/content/paris-revisited
On the right hand the first pic gets a nice padding applied as should the slideshow. Am I using the field display option wrongly or did I misunderstand the CSS to be applied?

 <div class="group-right">
      <div class="field field-name-field-image field-type-image field-label-hidden right1 view-mode-full">
    <div class="field-items">
          <figure class="field-item">
        <a href="http://www.fromwaydowntown.de/sites/default/files/styles/large/public/field/image/SDC15105.JPG" title="Paris revisited" class="colorbox" rel="gallery-61"><img typeof="foaf:Image" src="http://www.fromwaydowntown.de/sites/default/files/styles/large/public/field/image/SDC15105.JPG" width="640" height="480" /></a>              </figure>
      </div>
</div>
<section class="field field-name-field-imslideshow field-type-image field-label-inline clearfix right1 view-mode-full">
      <h2 class="field-label">Slideshow:&nbsp;</h2>
    <div class="field-items">
          <figure class="field-item">
        <div id="field-slideshow-1-wrapper" class="field-slideshow-wrapper">

  <div class="field-slideshow field-slideshow-1 effect-fade timeout-4000 with-controls" style="width:180px; height:180px">
          <div class="field-slideshow-slide field-slideshow-slide-1 even first">
        <a href="http://www.fromwaydowntown.de/sites/default/files/styles/large/public/SDC15003.JPG?slideshow=true&amp;slideshowAuto=true&amp;slideshowSpeed=6000&amp;speed=350&amp;transition=elastic" class="colorbox-load" rel="field-slideshow[nid-61]image" title="Notre Dame mit Weihnachtsbaum"><img class="field-slideshow-image field-slideshow-image-1" typeof="foaf:Image" src="http://www.fromwaydowntown.de/sites/default/files/styles/square_thumbnail/public/SDC15003.JPG" width="180" height="180" alt="Notre Dame mit Weihnachtsbaum" /></a>                  <div class="field-slideshow-caption">
            <span class="field-slideshow-caption-text">Notre Dame mit Weihnachtsbaum</span>
          </div>
              </div>
          <div class="field-slideshow-slide field-slideshow-slide-2 odd" style="display:none;">
        <a href="http://www.fromwaydowntown.de/sites/default/files/styles/large/public/SDC15043.JPG?slideshow=true&amp;slideshowAuto=true&amp;slideshowSpeed=6000&amp;speed=350&amp;transition=elastic" class="colorbox-load" rel="field-slideshow[nid-61]image" title="Blick vom Palais Tokio auf Eifelturm "><img class="field-slideshow-image field-slideshow-image-2" typeof="foaf:Image" src="http://www.fromwaydowntown.de/sites/default/files/styles/square_thumbnail/public/SDC15043.JPG" width="180" height="180" alt="Blick vom Palais Tokio auf Eifelturm " /></a>                  <div class="field-slideshow-caption">
            <span class="field-slideshow-caption-text">Blick vom Palais Tokio auf Eifelturm </span>
          </div>
              </div>
          <div class="field-slideshow-slide field-slideshow-slide-3 even" style="display:none;">
        <a href="http://www.fromwaydowntown.de/sites/default/files/styles/large/public/SDC15073.JPG?slideshow=true&amp;slideshowAuto=true&amp;slideshowSpeed=6000&amp;speed=350&amp;transition=elastic" class="colorbox-load" rel="field-slideshow[nid-61]image" title="Grab auf Pérè LaChaise"><img class="field-slideshow-image field-slideshow-image-3" typeof="foaf:Image" src="http://www.fromwaydowntown.de/sites/default/files/styles/square_thumbnail/public/SDC15073.JPG" width="180" height="180" alt="Grab auf Pérè LaChaise" /></a>                  <div class="field-slideshow-caption">
            <span class="field-slideshow-caption-text">Grab auf Pérè LaChaise</span>
          </div>
              </div>
          <div class="field-slideshow-slide field-slideshow-slide-4 odd" style="display:none;">
        <a href="http://www.fromwaydowntown.de/sites/default/files/styles/large/public/SDC15097.JPG?slideshow=true&amp;slideshowAuto=true&amp;slideshowSpeed=6000&amp;speed=350&amp;transition=elastic" class="colorbox-load" rel="field-slideshow[nid-61]image" title="Weihnachtsbaum im Lafayette"><img class="field-slideshow-image field-slideshow-image-4" typeof="foaf:Image" src="http://www.fromwaydowntown.de/sites/default/files/styles/square_thumbnail/public/SDC15097.JPG" width="180" height="180" alt="Weihnachtsbaum im Lafayette" /></a>                  <div class="field-slideshow-caption">
            <span class="field-slideshow-caption-text">Weihnachtsbaum im Lafayette</span>
          </div>
              </div>
          <div class="field-slideshow-slide field-slideshow-slide-5 even last" style="display:none;">
        <a href="http://www.fromwaydowntown.de/sites/default/files/styles/large/public/SDC15125.JPG?slideshow=true&amp;slideshowAuto=true&amp;slideshowSpeed=6000&amp;speed=350&amp;transition=elastic" class="colorbox-load" rel="field-slideshow[nid-61]image" title="Nächtlicher Blick vom Tour Montparnasse"><img class="field-slideshow-image field-slideshow-image-5" typeof="foaf:Image" src="http://www.fromwaydowntown.de/sites/default/files/styles/square_thumbnail/public/SDC15125.JPG" width="180" height="180" alt="Nächtlicher Blick vom Tour Montparnasse" /></a>                  <div class="field-slideshow-caption">
            <span class="field-slideshow-caption-text">Nächtlicher Blick vom Tour Montparnasse</span>
          </div>
              </div>
      </div>
dddave’s picture

dddave commented
Status: Active » Postponed

Hmm. I am currently playing around with various themes and the problem might in fact be related to the themes in use. I remember that the problem existed on adaptive themes and Bartik.
Let's see what comes out of this jurney...

pfrenssen’s picture

pfrenssen
Location Sofia
commented
Status: Postponed » Active

I see that in one case the right1 class is applied to a <div> element, while in the other case it is applied to a <section> element. This is probably because you are using an HTML5 theme. You could fix this by finding the theme function that is responsible for generating the <section> element and overriding this (see Overriding themable output), but the easiest solution would be to use this CSS:

div.right1,
section.right1 {
  padding-left: 15px;
}
dddave’s picture

dddave commented
Status: Active » Fixed

Thanks a million. That did the trick.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.