Menu icon Foundation

Developer | Neenah, WI

Web developer at the University of Wisconsin Oshkosh.

My Posts


My Comments

Shawn Hansen commented on William Possidento's post over 4 years

You can postfix a button to the input field, and then just style the button to the same background-color and set border-left to none.

Our search form does this on www.uwosh.edu

Shawn Hansen commented on Rafi Benkual's post about 5 years

Found a breaking change in the grid:

.column.small-centered, .columns.small-centered {
  margin-left: auto;
  margin-right: auto;
  float: none !important;
}

In 5.1.1 the float in that declaration didn't have !important attached to it. This is overriding a class of medium-uncentered (or large-uncentered) which has a float: left applied to it on medium and large breakpoints.

Shawn Hansen commented on Asif's post over 5 years

I've had the same issue and had to add the following to my custom javascript:

 // Fix orbit height issue
setTimeout(function() {
  $(document).resize();
}, 1000);

Shawn Hansen commented on Tushar Khatiwada's post over 5 years

You're looking for source ordering. Look here: http://foundation.zurb.com/docs/components/grid.html#source-ordering

Shawn Hansen commented on Lynda Spangler's post over 5 years

Figured out my problem. I need to trigger a reflow with:

 $(document).foundation('equalizer','reflow');

The content on that page is dynamically loaded from json with AngularJS.

One interesting thing to note, for reference, is that Equalizer won't reflow with:

 $(document).foundation('reflow');

Shawn Hansen commented on Lynda Spangler's post over 5 years

I'm having a similar problem as Julien on this page: http://www.uwosh.edu/beta/

The size of the panels are taller (or shorter on some browser widths) than I would expect on page load, but as soon as the browser viewport size changes, they resize to the expected height.

Shawn Hansen commented on Paddy Ogee's post over 5 years

It seems as if the following section of code in foundation.topbar.js has something to do with it. I would try commenting out foundation.topbar.js and see if you get expected behavior. You are already calling foundation.min.js which includes all the necessary javascript.

 .on('click.fndtn.topbar', '[data-topbar] .has-dropdown>a', function (e) {
          if (self.breakpoint()) {

            e.preventDefault();

            var $this = $(this),
                topbar = $this.closest('[data-topbar]'),
                section = topbar.find('section, .section'),
                dropdownHeight = $this.next('.dropdown').outerHeight(),
                $selectedLi = $this.closest('li');

            topbar.data('index', topbar.data('index') + 1);
            $selectedLi.addClass('moved');

            if (!self.rtl) {
              section.css({left: -(100 * topbar.data('index')) + '%'});
              section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
            } else {
              section.css({right: -(100 * topbar.data('index')) + '%'});
              section.find('>.name').css({right: 100 * topbar.data('index') + '%'});
            }

            topbar.css('height', $this.siblings('ul').outerHeight(true) + topbar.data('height'));
          }

Shawn Hansen commented on Jennifer Stewart's post over 5 years

Hi Jennifer,

If I understand your question correctly, I think you just need to take them out of the row, i.e. don't put them in a div with a class of "row".

I did something similar with the footer on this site: http://www.uwosh.edu/beta

Shawn Hansen commented on Pacelli Oliveira's post over 5 years

I can confirm this behavior, but have not been able to fix it.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on William Possidento's post over 4 years

You can postfix a button to the input field, and then just style the button to the same background-color and set border-left to none.

Our search form does this on www.uwosh.edu

You commented on Rafi Benkual's post about 5 years

Found a breaking change in the grid:

.column.small-centered, .columns.small-centered {
  margin-left: auto;
  margin-right: auto;
  float: none !important;
}

In 5.1.1 the float in that declaration didn't have !important attached to it. This is overriding a class of medium-uncentered (or large-uncentered) which has a float: left applied to it on medium and large breakpoints.

You commented on Asif's post over 5 years

I've had the same issue and had to add the following to my custom javascript:

 // Fix orbit height issue
setTimeout(function() {
  $(document).resize();
}, 1000);

You commented on Tushar Khatiwada's post over 5 years

You're looking for source ordering. Look here: http://foundation.zurb.com/docs/components/grid.html#source-ordering

You commented on Lynda Spangler's post over 5 years

Figured out my problem. I need to trigger a reflow with:

 $(document).foundation('equalizer','reflow');

The content on that page is dynamically loaded from json with AngularJS.

One interesting thing to note, for reference, is that Equalizer won't reflow with:

 $(document).foundation('reflow');

You commented on Lynda Spangler's post over 5 years

I'm having a similar problem as Julien on this page: http://www.uwosh.edu/beta/

The size of the panels are taller (or shorter on some browser widths) than I would expect on page load, but as soon as the browser viewport size changes, they resize to the expected height.

You commented on Paddy Ogee's post over 5 years

It seems as if the following section of code in foundation.topbar.js has something to do with it. I would try commenting out foundation.topbar.js and see if you get expected behavior. You are already calling foundation.min.js which includes all the necessary javascript.

 .on('click.fndtn.topbar', '[data-topbar] .has-dropdown>a', function (e) {
          if (self.breakpoint()) {

            e.preventDefault();

            var $this = $(this),
                topbar = $this.closest('[data-topbar]'),
                section = topbar.find('section, .section'),
                dropdownHeight = $this.next('.dropdown').outerHeight(),
                $selectedLi = $this.closest('li');

            topbar.data('index', topbar.data('index') + 1);
            $selectedLi.addClass('moved');

            if (!self.rtl) {
              section.css({left: -(100 * topbar.data('index')) + '%'});
              section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
            } else {
              section.css({right: -(100 * topbar.data('index')) + '%'});
              section.find('>.name').css({right: 100 * topbar.data('index') + '%'});
            }

            topbar.css('height', $this.siblings('ul').outerHeight(true) + topbar.data('height'));
          }

You commented on Jennifer Stewart's post over 5 years

Hi Jennifer,

If I understand your question correctly, I think you just need to take them out of the row, i.e. don't put them in a div with a class of "row".

I did something similar with the footer on this site: http://www.uwosh.edu/beta

You commented on Pacelli Oliveira's post over 5 years

I can confirm this behavior, but have not been able to fix it.

Posts Followed


Following

  • No Content

Followers

  • No Content