The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Altering spoiler width when opened to display whole content

3 posters

Go down

Solved Altering spoiler width when opened to display whole content

Post by Waffles December 2nd 2015, 4:25 am

Firstly, I hope this is in the correct place.. I'm pretty much a total newb when it comes to scripting and despite searching the solved topics and the tutorials I still can't find a solution to my problem. I'm an Admin on a friend's RP site and she asked if anyone knew how to make the spoiler background transparent, which I did in CSS (this isn't the forumotion site listed on my profile. That is an empty site I'm using to test out codes with so I don't potentially damage her site), along with a couple of other things.

Now, onto the main issue. The spoilers are of course being used to contain large amounts of text or large images so they don't take up space in a post. Our problem is that some images that are very large get cut off within the spoilers when they are opened, and we'd like the images to either be automatically fitted within the restrictions of the spoiler box, or preferably for the box to expand to the size of the image or have a scrollbar. It is a pain not being able to see the whole images. If this isn't solved, we'd have to make a rule of maximum image sizes and it's just another thing to have to control.

The screenshot below (from my phone, sorry) shows how the cat image is cut off within the spoiler.
Altering spoiler width when opened to display whole content 14n4cek

Many thanks in advance. Smile



Last edited by Waffles on December 4th 2015, 4:34 am; edited 1 time in total
Waffles
Waffles
New Member

Posts : 5
Reputation : 1
Language : English

http://testforumfortails.forumotion.co.uk/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by SLGray December 2nd 2015, 4:30 am

Have you tried to using the image re-sizer in the administration panel?  You can resize large images.


Last edited by SLGray on December 3rd 2015, 4:27 am; edited 1 time in total


Altering spoiler width when opened to display whole content Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51567
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by Waffles December 2nd 2015, 4:36 am

Not personally, no. The friend who owns the site tried that first of all and she said that it seemed to just make the images not appear at all.
Waffles
Waffles
New Member

Posts : 5
Reputation : 1
Language : English

http://testforumfortails.forumotion.co.uk/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by SLGray December 2nd 2015, 10:57 am

Could you please post a link to a topic that has a spoiler with images that guests can see?


Altering spoiler width when opened to display whole content Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51567
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by Waffles December 2nd 2015, 9:01 pm

We didn't have one as the site is in progress and most of the categories are hidden right now. So I made one:

http://tailsofkings.forumotion.com/t25-random-topic

As you can hopefully see, I figured out how to add a scrollbar by using "overflow: auto;" in CSS. But we ideally want the whole images to be shown without a scrollbar. Also, is there any way to get rid of the line that goes across the page at the bottom of the spoiler codebox?
Waffles
Waffles
New Member

Posts : 5
Reputation : 1
Language : English

http://testforumfortails.forumotion.co.uk/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by SLGray December 3rd 2015, 4:26 am

Look for this in the CSS Stylesheet:
Code:
dl.codebox dt {
    border-bottom: 1px solid #CCC;
    display: block;
    font-size: 0.8em;
    font-weight: 700;
    margin-bottom: 3px;
    text-transform: uppercase;
}
Remove this part to remove the line:
Code:
border-bottom: 1px solid #CCC;


Altering spoiler width when opened to display whole content Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51567
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by Ange Tuteur December 3rd 2015, 1:57 pm

Hi @Waffles,

Try the following CSS rule :
Code:
.spoiler_content img {
  max-width:99%;
}

It should set a maximum width for the images inside the spoiler. ( i.e. the images will only be the size of the spoiler width )
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by Waffles December 3rd 2015, 3:55 pm

That works wonderfully, thank you!

Is there anything I can do about that line? I already have the CSS rule set to having no border so it's troubling me.


Last edited by Waffles on December 4th 2015, 4:31 am; edited 1 time in total
Waffles
Waffles
New Member

Posts : 5
Reputation : 1
Language : English

http://testforumfortails.forumotion.co.uk/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by SLGray December 3rd 2015, 9:25 pm

SLGray wrote:Look for this in the CSS Stylesheet:
Code:
dl.codebox dt {
    border-bottom: 1px solid #CCC;
    display: block;
    font-size: 0.8em;
    font-weight: 700;
    margin-bottom: 3px;
    text-transform: uppercase;
}
Remove this part to remove the line:
Code:
border-bottom: 1px solid #CCC;


Altering spoiler width when opened to display whole content Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51567
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by Waffles December 3rd 2015, 9:47 pm

Ah, right. That "dl.codebox dt " rule wasn't in the CSS Stylesheet so I added it and set the border-bottom to none. I must've overlooked that. Thanks a bunch!
Waffles
Waffles
New Member

Posts : 5
Reputation : 1
Language : English

http://testforumfortails.forumotion.co.uk/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by SLGray December 4th 2015, 9:55 am

Topic solved and archived


Altering spoiler width when opened to display whole content Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51567
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum