Reduce padding around event

John Poll
(@john-poll)

11 years, 4 months ago

Have searched the forum and tried various suggestions but still cannot reduce the padding around the individual event cells, any suggestions welcome.Secondly how can I change the content and format of the cells, I would like to have wordwrap and the various elements as one sentence.

https://ww.wp.xz.cn/plugins/wp-fullcalendar/

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Support angelo_nwl
(@angelo_nwl)

11 years, 4 months ago

do you have sample link to your site with this issue for us to see and analyze?

thanks

Nathum
(@nathum)

11 years ago

Hi Angelo,

I have the same issue, spent hours trying to find the cause.

Screenshot attached.
http://upload.adfteam.com/files/1432634710.jpg

Thanks
Nathum

Plugin Support angelo_nwl
(@angelo_nwl)

11 years ago

you can use browser such as chrome Inspect Element and then point to the fullcalendar html element to get the css class or id name which then you can override in your theme style.css

Nathum
(@nathum)

11 years ago

Thanks for your reply,

I tried that and firebug, I can not seem to locate the css for it. However I did find out that the theme is what’s causing the issue.

I’ll have another crack at it tonight.

Nathum

Nathum
(@nathum)

11 years ago

Another 6 hours and, I can not come up with anything.

This line seems to be created by JS, no hard code or CSS.

<a href="https://www.revive2survive.com.au/events/first-aid-for-childcare/" class="fc-event fc-event-hori fc-event-start fc-event-end" style="position: absolute; left: 483px; border-color: rgb(195, 22, 193); color: rgb(255, 255, 255); width: 36px; top: 360px; background-color: rgb(195, 22, 193);" aria-describedby="ui-tooltip-0"><div class="fc-event-inner"><span class="fc-event-time">9a</span><span class="fc-event-title">Childcare First Aid</span></div></a>

Something not right.

https://www.revive2survive.com.au/

Nathum

jeroenroelofsen
(@jeroenroelofsen)

11 years ago

Quite simple

Your parent CSS (the page) has a padding around it. Because the calendar is displayed inside of this div it uses the same padding.

The trick is something like
`
.fc-event-inner{
padding-left: 0px;
padding-right: 0px;
}

Play around a bit, then stuf should start to work

Nathum
(@nathum)

11 years ago

Hi jeroenroelofsen,

Thanks for your reply, It seems that the style is overwritten by some loop generated code which I think is done in java. (Im not good with java.) Which loops through each event setting the color and other details.

The generated hard code is overwriting the style, which is fair. But I can not find where the code is generating the html to be published.

Two things could be possible.
1. Some of the element.style is caused by the sites theme.
2. Some script is generating the lot.

Attached a screenshot which should help.
http://upload.adfteam.com/files/1434593248.png

I have changed the width and left to show that I have the correct element.

Nathum

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Reduce padding around event’ is closed to new replies.