Display span target element as block when extended only

  • Hi everyone,

    I am new here so I apologize for my ignorance. I’m seeking your help because I am facing a target display issue (here : https://datadrama.info/2016/11/21/trumpsondages/). I am using collapse-o-matic triggers inline inside paragraphs. Tag and Targtag attriutes as set as span and I have this special styling for the trigger and target :

    .my_trigger {
background-color: #e4e7f5 !important;
padding-bottom:1px !important;
}
.my_trigger:hover {
text-decoration: none !important;
background-color: #b9c1e5 !important;
padding-bottom:1px !important;
}
.backtarg {
border: .1em solid #acb5e0 !important; ; margin: 5px !important;
padding-bottom:10px !important;
padding-top:10px !important;
padding-right:10px !important;
padding-left:10px !important;
margin-right:0px !important;
margin-left:0px !important;
}

    So my shortcode looks like this :
    [expand title=”Title” trigclass=”my_trigger arrowright” targclass=”backtarg”]Target text[/expand]

    Everything works fine except I would like to justify the paragraph containing my span. When I do so, everything appears fine when the collapsible element in hidden. But in extended mode, the trigger text appears distended (i.e extended on one line) above the target text (because it inherits the text-align: justify style of the paragraph).

    Distended text above target

    I figured via firebug that one way to avoid this could be to change the display property of the (span) target element, from the default display: inline-block to display: block. (I cannot simply set the target as div because it breaks my containing paragraph in two, before and after the div).

    div

    Anyway, I can’t figure how to change this display property of the target element when extended only. When I add display: block to my custom .backtarg class, it displays my target the way I want it, but the target is always extended (and not hidden by default as I want it to be).

    .backtarg { display: block;}

    I would like to achieve this result while still having a hidden target before clicking the trigger text.

    Is it even doable ?

    Thanks in advance !

    • This topic was modified 8 years, 3 months ago by mangematin.
Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author twinpictures

    (@twinpictures)

    try simply giving your target the class of: maptastic
    Also, a link to your page would be very helpful.

    [expand title=”Title” trigclass=”my_trigger arrowright” targclass=”backtarg maptastic”]Target text[/expand]
    Thread Starter mangematin

    (@mangematin)

    Hi,

    Thank you very much for your quick reply. I tried adding the maptastic class in the shortcode as you suggested. (I still need to add display: block to my custom .backtarg class, otherwise nothing changes.) When I do so , there is an improvement but the whole issue isn’t solved :

    – It displays the trigger text the way I want it (not justified/distended)
    – The target is not extanded by default (it is hidden by default as I want it to be)
    – But after the first time the trigger is clicked, it is not possible to hide the target again. The target stays visible

    Here is the link to the page as I mentionned in my first post : https://datadrama.info/2016/11/21/trumpsondages/

    Any ideas ?

    Thanks again

    • This reply was modified 8 years, 3 months ago by mangematin.
    Plugin Author twinpictures

    (@twinpictures)

    you can not add the display: block !important; as it prevents hiding/collapsing the target content.

    Why are your targets span elements? they should be div elements, as div’s are already block elements.

    Thread Starter mangematin

    (@mangematin)

    Hello again,

    As I mentionned in my first post, it seems I cannot simply set the target as div because it breaks my containing paragraph in two, before and after the target/div element, and I want the trigger+target inserted in a paragraph, with text before and after without line breaks.

    But maybe you know a way I can avoid that behaviour ?

    Plugin Author twinpictures

    (@twinpictures)

    Guess it’s unclear what you mean, exactly.
    Please set up an example using a div for the target so we have a better idea of how best to solve your issue.

    Thread Starter mangematin

    (@mangematin)

    I set the target as div : https://datadrama.info/2016/11/21/trumpsondages
    Trigger is still a span.

    As you can see in the screenshot in my first post, the paragraph breaks in two, with a linebreak after the div element, which is what I want to avoid by setting it as span.

    DIV

    Plugin Author twinpictures

    (@twinpictures)

    so, to be clear, you do not want the paragraph to break after the trigger correct?
    you might want to try a) removing any spaces around the shortcode in your page content, and if that does not work, then b) try the roll-your-own method. The problem is empty p tags are being injected into your content after the shortcode.

    Thread Starter mangematin

    (@mangematin)

    I do not want the paragraph to break after the trigger or the target in non-expanded view.

    Since the paragraph does not break after the trigger when I set the trigger and the target as span, but breaks only when I set the target as div, I believe the problem comes from the div element.

    Removing the spaces doesn’t work.

    I’ll try the roll-your-own method.

    • This reply was modified 8 years, 2 months ago by mangematin.
    Plugin Author twinpictures

    (@twinpictures)

    ok. so your target, you want to be a block element, so the paragraph will clearly have to break to fit this block. However, when the target is collapsed, you want the trigger to appear inline as part of the paragraph. We’ll put togher a demo on this and share a link in a bit.

    Plugin Author twinpictures

    (@twinpictures)

    we were able to recreate this issue on your test server and are working on an update that will address this issue. Thank your for your patience.

    Thread Starter mangematin

    (@mangematin)

    Thank you very much ! Keep us posted !

    Hi! I’m trying to do the same thing. I can see from @mangematin’s site that he has managed to do it (https://datadrama.info/2016/11/21/trumpsondages/)…. how?

    I would like to know how that’s done. Would you care to explain, @mangematin, or do you know how to, @twinpictures?
    Thanks for your answer!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Display span target element as block when extended only’ is closed to new replies.