Download buttons stretching through entire width of the screen [SOLVED]

[jazzbird]

Hello Arno,

The following issue has unfortunately come back from the dead with a recent jDownloads update:
https://www.jdownloads.com/forum/index.php?topic=13924

As I indicated in the old thread, download buttons stretch through the whole width of the screen due to this CSS:

jd_content_wrapper {
    width: 100%;

I previously had some code in jdownloads_custom.css that fixed it, but for some reason that file got erased.

Please forgive my beginner's question, but what CSS should I put in jdownloads_custom.css so that the download buttons remain just the width of the text and not through the whole screen?

Not like this: https://www.jdownloads.com/forum/index.php?action=dlattach;topic=13924.0;attach=17377;image
But like that: https://www.jdownloads.com/forum/index.php?action=dlattach;topic=13924.0;attach=17383;image

Thank you!

[ColinM]

Hi
Could you advise which layout you are using please.
Also version of Joomla and jD
Thanks
Colin

[ColinM]

Hi
code for the jdownloads custom.css file that will sort out the challenge
/*  css to float DOWNLOAD label left */
.jd_title_right {
  float: left !important;
  display: inline-block;
}
.jd_download_url_position, .jd_rating {
  position: relative;
  top: -3px !important;
  float: left;
}

ColinM

[jazzbird]

Thanks, Colin, but that solution doesn't really work.

It just shoves the download button to the left (and misaligns it vertically - it's now too high), but the whole download bar still stretches through the entire width of the screen.



See here:
https://www.catholicsforisrael.com/bible-course/part-i

That's not the way it used to be. The download bar was only as wide as the handout name + download button, and I could align the bar left, right, or center. What happened to that functionality?

[ColinM]

Hi
It seem that the solution is specific to a individual layouts!
On my layout it worked AOK as shown below.
Could you please advise which layout you are using.

Will also send you a PM

Colin

[jazzbird]

Interesting. It looks like the layout I'm using for the content plugin is 'Files Layout Single Line v. 3.9.'

As I mentioned above, the cause of the unwanted behavior is simply this bit of CSS:

jd_content_wrapper {
    width: 100%;
}

How could I disable or override this CSS? It seems like this would be simple, but my command of CSS is very basic!

[jazzbird]

I tried adding into jdownloads_custom.css the following:

jd_content_wrapper {
    width: auto !important;
}

But this did nothing.

So I went and modified the jdownloads_fe.css file, changing the width property of .jd_content_wrapper from '100%' to 'auto'

.jd_content_wrapper {
 padding:3px 0px;
 width: auto;

This finally fixed the problem and got the buttons to do what I want. But I understand the jdownloads_fe.css file will be overwritten at every update. So how do I get jdownloads_custom.css to produce the same result?

[ColinM]

Hi
The CSS you identified as fixing the problem, namely
.jd_content_wrapper {
 padding:3px 0px;
 width: auto;
}
should be placed into the custom.css
Actually you really only need

The custom.css is loaded last so any of its definitions overwrite any preceding css

Actually you really only need
.jd_content_wrapper {
 width: auto;
}

Colin

[jazzbird]

Oops!

Yes, you are right. My mistake. It wasn't working because - as you can see above - I forgot the dot before jd_content_wrapper !

I'm almost there. Now the button is the correct width, but it's always aligned left, because of:

.jd_content {
text-align: left;
}

Even though I've inserted the button code like this:
<div style="text-align: center;">{jd_file file==225}</div>

My "text-align: center;" is overridden by the .jd_content left alignment.

How can I control the alignment of the download bar and button? Sometimes I want it aligned left, but sometimes I want it aligned in the center.

[jazzbird]

Never mind, I got it:

.jd_content {
 text-align:inherit;
}

This CSS amateur is finally starting to learn a few basic tricks.

[ColinM]

jazzbird
Will mark this as solved
Colin