question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Problem with window resize

See original GitHub issue

Originally reported on Google Code with ID 259

I have a page that uses another script to change my page background image
on window resize. Oddly enough it the last column of the calendar
(Saturday) is compressed (screen shot included). Looking at the HTML
produced by this plugin (this is the HTML from the intro page of the
FullCalendar site), I see this:

<tr>
 <th class="fc-sun fc-state-default fc-leftmost" style="width: 108px;">Sun</th>
 <th class="fc-mon fc-state-default" style="width: 108px;">Mon</th>
 <th class="fc-tue fc-state-default" style="width: 108px;">Tue</th>
 <th class="fc-wed fc-state-default" style="width: 108px;">Wed</th>
 <th class="fc-thu fc-state-default" style="width: 108px;">Thu</th>
 <th class="fc-fri fc-state-default" style="width: 108px;">Fri</th>
 <th class="fc-sat fc-state-default">Sat</th>
</tr>

So, as you can see the width is not set for the Saturday column. I added a
hack to my window resize code to change the th widths to percentages
(14.3%), which shouldn't require recalculation after every window resize. 

Reported by wowmotty on 2009-12-23 20:57:32


- _Attachment: [saturdaycolumn.jpg](https://storage.googleapis.com/google-code-attachments/fullcalendar/issue-259/comment-0/saturdaycolumn.jpg)_

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:20 (20 by maintainers)

github_iconTop GitHub Comments

1reaction
arshawcommented, Aug 19, 2015
Ex: http://jsfiddle.net/rK5ZK/

Adjust on the following functions in fullcalendar.js v2.0.0-beta2 (not min.js):

line 3167
    function setWidth(width) {
        viewWidth = width;
        colPositions.clear();
        colContentPositions.clear();

        weekNumberWidth = 0;
        if (showWeekNumbers) {
            weekNumberWidth = head.find('th.fc-week-number').outerWidth();
        }

        colWidth = Math.floor((viewWidth - weekNumberWidth) / colCnt);

        //
        // CHANGE - REMOVE SLICE
        //setOuterWidth(headCells.slice(0, -1), colWidth);
        //

        setOuterWidth(headCells, colWidth);
    }

line 3954
    function setWidth(width) {
        viewWidth = width;
        colPositions.clear();
        colContentPositions.clear();

        var axisFirstCells = dayHead.find('th:first');
        if (allDayTable) {
            axisFirstCells = axisFirstCells.add(allDayTable.find('th:first'));
        }
        axisFirstCells = axisFirstCells.add(slotTable.find('th:first'));

        axisWidth = 0;
        setOuterWidth(
            axisFirstCells
                .width('')
                .each(function(i, _cell) {
                    axisWidth = Math.max(axisWidth, $(_cell).outerWidth());
                }),
            axisWidth
        );

        var gutterCells = dayTable.find('.fc-agenda-gutter');
        if (allDayTable) {
            gutterCells = gutterCells.add(allDayTable.find('th.fc-agenda-gutter'));
        }

        var slotTableWidth = slotScroller[0].clientWidth; // needs to be done after axisWidth
(for IE7)

        gutterWidth = slotScroller.width() - slotTableWidth;
        if (gutterWidth) {
            setOuterWidth(gutterCells, gutterWidth);
            gutterCells
                .show()
                .prev()
                .removeClass('fc-last');
        }else{
            gutterCells
                .hide()
                .prev()
                .addClass('fc-last');
        }

        colWidth = Math.floor((slotTableWidth - axisWidth) / colCnt);

        //
        // CHANGE - REMOVE SLICE
        //setOuterWidth(dayHeadCells.slice(0, -1), colWidth);
        //

        setOuterWidth(dayHeadCells, colWidth);
    }

    ********

    And to set more speed to reset all the widths of cells, change:

line 785
    function windowResize() {
        if (!ignoreWindowResize) {
            if (currentView.start) { // view has already been rendered
                var uid = ++resizeUID;
                setTimeout(function() { // add a delay
                    if (uid == resizeUID && !ignoreWindowResize && elementVisible()) {
                        if (elementOuterWidth != (elementOuterWidth = element.outerWidth())) {
                            ignoreWindowResize++; // in case the windowResize callback changes the height
                            updateSize();
                            currentView.trigger('windowResize', _element);
                            ignoreWindowResize--;
                        }
                    }

                //
                // CHANGE - NEW VALUE
                //}, 200);
                //

                }, 5);

            }else{
                // calendar must have been initialized in a 0x0 iframe that has just been resized
                lateRender();
            }
        }
    }

    *******

Put this adjustments in the next version of fullcalendar, please?

Reported by rempel.oliveira on 2014-04-29 00:27:31

0reactions
arshawcommented, Aug 19, 2015
hi,

Why the height is not resized when the browser is resized.

Reported by nidhiS.agile on 2015-06-30 07:32:23

Read more comments on GitHub >

github_iconTop Results From Across the Web

8 Fixes When You Can't Resize Window in Windows 11 and 10
1. Try Keyboard Shortcuts to Resize a Window · 2. Turn Off Tablet Mode · 3. Uninstall TeamViewer · 4. Close All Apps...
Read more >
Windows 10 Screen resize issue. - Microsoft Community
Right click on desktop and select Display settings. · Change the Change the size of text, apps, and other items, and click on...
Read more >
FIX: Can't move or resize Windows and Apps on Windows 10
FIX : Can't move or resize Windows and Apps on Windows 10 · Go to Windows 10 Settings » System. · Select Tablet...
Read more >
html/css window resize issue - Stack Overflow
But I have a problem where whenever I open the site on my laptop which has a smaller screen than my PC or...
Read more >
Resizing of windows is not reliable - Visual Studio Feedback
Simply grabbing a splitter in the VS UI and dragging it fails about 1/3 of the time for me. I grab the splitter...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found