Posted by dddave on November 8, 2011 at 8:55pm
3 followers
Jump to:
| Project: | Display Suite |
| Version: | 7.x-1.x-dev |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
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?
| Attachment | Size |
|---|---|
| broken by label.PNG | 14 KB |
| working without label.PNG | 12.06 KB |
Comments
#1
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.
#2
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: </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&slideshowAuto=true&slideshowSpeed=6000&speed=350&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&slideshowAuto=true&slideshowSpeed=6000&speed=350&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&slideshowAuto=true&slideshowSpeed=6000&speed=350&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&slideshowAuto=true&slideshowSpeed=6000&speed=350&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&slideshowAuto=true&slideshowSpeed=6000&speed=350&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>
#3
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...
#4
I see that in one case the
right1class 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;
}
#5
Thanks a million. That did the trick.
#6
Automatically closed -- issue fixed for 2 weeks with no activity.