Full calendar is passing the site footer

Question

Full calendar is passing the site footer

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Insert the code here As shown in the image below, fullcalendar when clicking "more" passes my footer when in fact it should push it down by increasing the height of the page, as with all other screens. What css element could you use to fix this problem? I've tried using clearfix, tinkering with z-index, but it did not work ... I may have misused it. I use the INSPINIA template sold on Wrapbootstrap and it is of great quality.

Code:

<div class="col-lg-12 col-md-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5><i class="fa fa-calendar"></i> Agenda</h5>
            </div>
            <div class="ibox-content">
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div id="calendar" class="animated"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   <div class="footer text-center">
        <div>
            <strong>SoftTooth™ 0.3.0-Beta</strong> - 2014-2015 Todos os direitos reservados. By <a>Allan Carvalho</a> e <a>Eduardo Luciano</a>
       </div>
    </div>

CSS:

    .footer {
  background: none repeat scroll 0 0 white;
  border-top: 1px solid #e7eaec;
  bottom: 0;
  left: 0;
  padding: 10px 20px;
  position: absolute;
  right: 0;
}

Does anyone help?

Picture:

css fullcalendar

asked by anonymous 29.08.2015 / 02:58

2 answers

Check if file exists using javascript or jQuery Records being inserted into two tables between Entities with (doctrine - Foreign Key)

score 1 · Answer 1

It would be necessary to see even an online example of this working to see and indicate a particular solution, or what is generating this problem, however I have two solutions to help you with this:

First solution - Add a scrollbar.
In the box where it says August 31, 2015 , there is a blank space inside it and then the numbers (which I think are hours) with a% green_%. Right-click the right part and inspect the element to find out which class "container / wrapper" (or background if you prefer) contains the other numbers with the green background, and adds to this container the following CSS styles: class pai . The goal is to prevent it from extending beyond the footer by adding a scrollbar when this max-height: 100px; overflow-x: auto; is greater than div (or whatever size you want). Here is an example below:

.horas {
    max-height: 100px;          /* Altura máxima da div */
    overflow-x: auto;           /* Adiciona Scrollbar quanto necessário */
    width: 60px;                /* Não Relevante */
    border: 2px solid #C6C6C6;  /* Não Relevante */
}

<div class="horas">
    001<br/>
    002<br/>
    003<br/>
    004<br/>
    005<br/>
    006<br/>
    007<br/>
    008<br/>
    009<br/>
    010<br/>
    011<br/>
    012<br/>
    013<br/>
    014<br/>
    015<br/>
    016<br/>
    017<br/>
    018<br/>
    019<br/>
    020<br/>
</div>

Second solution - Use 100px . As already mentioned in @balexandre's comments above, using z-index will make this list stand above footer and not the other way around. To find out which class to apply the z-index , follow the same process of inspecting the element mentioned in First solution , but this time inspect the title even "August 31, 2015" / strong> to find out what is the z-index above this title, which will be its div class/id that "boxes" the title, the hours etc, and that will be the class where we will apply class pai . Example below:

.wrapperHoras {
    z-index: 1;                 /* Faz com que as horas fiquem por cima do Footer - Aumenta este valor se for necessário */
    position: absolute;         /* pre-defenido */
    background: #fff;
    width: 60px;                /* Não Relevante */
    border: 2px solid #C6C6C6;  /* Não Relevante */
}

.footer {
    text-align: center;
    background-color: #85CFF9;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 20px;
    position: absolute;
}

<div class="wrapperHoras">
    <div class="horas">
        001<br/>
        002<br/>
        003<br/>
        004<br/>
        005<br/>
        006<br/>
        007<br/>
        008<br/>
        009<br/>
        010<br/>
        011<br/>
        012<br/>
        013<br/>
        014<br/>
        015<br/>
        016<br/>
        017<br/>
        018<br/>
        019<br/>
        020<br/>
    </div>
</div>
<div class="footer">Meu Footer</div>

score 0 · Answer 2

Try to do the following, change the position:absolute of the footer to relative , and if the div is also with that value change it, then use a clearfix in the div that surrounds all content, I believe which will resolve.