Jump to content
Peter Knight

UIKit layout bug - IE 11

Recommended Posts

 

Hi guys

I know some of you are UIKit fans like me. I built a site recently using UIKit 3 and I'm having some layout issues on IE 11 and largest breakpoints.

You have to set quite a big resolution or have a large monitor to experience this as it only happens on largest breakpoints.

The main column in the above URL is successfully centered in most browsers except IE11.

On IE 11, it shifts to the right. Basically it's a DIV using the uk-width-expand selector and then I have a custom max width and a margin in there to centre the content horizontally.

Here's a simple CodeKit and JSFiddle of the issue

https://codepen.io/edenstudios/pen/qvWpGo

https://jsfiddle.net/EdenSt/auekfgqt/8/

Thanks
P

 

 

Share this post


Link to post
Share on other sites

Hi @Peter Knight

Change uk-width-expand to uk-width-1-1

IE11 has some strange bugs with flex - I believe the issue is with flex: 1 and max-width, it's respecting both but it's treating it like space-between. For whatever reason, I don't know. As you have a max-width defined in this instance uk-width-1-1 will work fine. 

  • Like 3

Share this post


Link to post
Share on other sites

For me removing the uk-width-expand from the inner div (the one with class=' uk-width-1-1@s uk-width-1-2@m uk-width-4-6@l uk-width-expand pk-col-bod') seems to fix it (not verified other aspects of the layout). But I won't consider a width of 1700 pixels to be a quite big resolution nowadays.

amoss-ie.thumb.jpg.c381745f4f248c50f3b65ce406744dd7.jpg

  • Like 2

Share this post


Link to post
Share on other sites
1 hour ago, Tom. said:

Hi @Peter Knight

Change uk-width-expand to uk-width-1-1

IE11 has some strange bugs with flex - I believe the issue is with flex: 1 and max-width, it's respecting both but it's treating it like space-between. For whatever reason, I don't know. As you have a max-width defined in this instance uk-width-1-1 will work fine. 

Thanks Tom. That largely works ok. I've yet to test it fully.

The tricky part here is that the layouts across the site are using bespoke widths and stepping outside the normal UIKit columns widths etc.

But that's a huge help and seems promising enough to start testing from. 

 

  • Like 1

Share this post


Link to post
Share on other sites
15 minutes ago, Autofahrn said:

For me removing the uk-width-expand from the inner div (the one with class=' uk-width-1-1@s uk-width-1-2@m uk-width-4-6@l uk-width-expand pk-col-bod') seems to fix it (not verified other aspects of the layout). But I won't consider a width of 1700 pixels to be a quite big resolution nowadays.

amoss-ie.thumb.jpg.c381745f4f248c50f3b65ce406744dd7.jpg

Agreed. I just need to add some custom widths to the pk-col-bod to make it mimic the previous layout etc.

  • Like 1

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Noel Boss
      Admin Theme Boss
      A light and clear theme based on Uikit 3
      Features
      Five unique color options Beautifully redesigned login screens Modern typography using Roboto Condensed Extended breadcrumb with edit links Extends AdminThemeUikit, so you can continue using all current and future AdminThemeUikit features Option to activate theme for all users Compatibility with AdminOnStreoids and other third party modules   Updated and Releases
      There is a shiny new release page where you can subscribe to updates for new releases of AdminThemeBoss.   Color Variants:
      ProcessWire Blue


       
      Dark Black


       
      Vibrant Blue

       
      Happy Pink

      Smooth Green *new with 0.6.1*

       
      Requirements
      Requires a current ProcessWire version with AdminThemeUikit installed and activated.
      Installation
      Make sure AdminThemeUikit is activated Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeBoss“ into the field “Add Module From Directory“ Click “Download And Install“ On the overview, click “Download And Install“ again… On the following screen, click “Install Now“

      Manual Installation
      Make sure the above requirements are met Download the theme files from GitHub or the ProcessWire Modules Repository. Copy all of the files for this module into /site/modules/AdminThemeBoss/ Go to “Modules > Refresh” in your admin Click “Install“ on the “AdminThemeBoss“ Module
    • By snobjorn
      I have been searching a while for pre-made UIkit 3 themes that I can download in some form and use. But I have not found much. I work with variables and compile most times, but sometimes I would prefer working with a "finished" theme as a starting point
      I have found the following resources:
      https://github.com/zzseba78/Kick-Off https://github.com/uikit/awesome-uikit Do anyone else know of UIkit 3 themes that you could list?
    • By AndZyk
      Gallery Claeys is a art gallery in Freiburg, Germany, with focus on exhibitions of female artists. Our agency designconcepts developed a website that features the latest exhibitions of the gallery as well as an archive of previous exhibitions. Every artist has its own page with an excerpt of their works and a vita of the artist.
      The website was build with help of the framework UIkit and Barba.js for smooth transitions between pages.
      www.galerie-claeys.de
       
      Features:
      Exhibitions Page transitions  
      Exhibitions
      On the homepage you can find a preview of upcoming or current exhibitions as well as an archive of previous exhibitions. Based on the date the exhibitions get automatically sorted in one of the three categories (preview, current or archive). Each category has its own deep-link with URL segment.
       
      Page transitions
      The smooth fading page transitions are made with Barba.js.
       
      Modules used:
      Front-End Page Editor Markup Sitemap XML ProCache Tracy Debugger Upgrades  
      Regards, Andreas
    • By AndZyk
      This is a website for the musical area of the protestant town church Pforzheim, Germany. Our agency designconcepts developed a website that provides informations about the choirs, ensembles and orchestras as well as dates for their rehearsals, services and concerts.
      The website was build with help of the framework UIkit.
      www.musik.stadtkirche-pforzheim.de
       
      Features:
      Events Download dates  
      Events

      The events for rehearsals, services and concerts were created in Microsoft Excel and then imported as pages from CSV. For better organization, events are cross-referenced with choirs, ensembles and orchestras. Services and concerts are displayed in a events list, but rehearsals are only displayed on the page of the choir, ensemble or orchestra, to make the events list more compact.
       
      Download dates

      It is possible to download every event date as ICS file, which will be generated on clicking the download button. You can then add this event easily to your calendar app and stay up-to-date.
       
      Modules used:
      Email Obfuscation (EMO) Front-End Page Editor Import Pages from CSV Markup Sitemap XML ProCache Tracy Debugger Upgrades Wire Mail SMTP  
      Regards, Andreas
       
    • By Chris Bennett
      Not sure where I originally saw it while lurking around the forums, but someone, somewhere at some time was asking about styling Uikit checkboxes as toggle-style switches, much like the ones at the bottom of this post asking me if I want to be notified of replies.
      So here is my humble offering, rough and ready,  which can be thrown in at the bottom of your Uikit css as a starting point.
      Everything is based on ems and rems, so you can increase size as you desire by altering the single instance of font-size.
      It only targets single instances of labels within a specific field to a) try to limit unintended consequences and b) because in those cases it often seems more user-friendly to have an on/off binary switch rather than a checkbox. It's still totally a checkbox, just styled differently.
       
      .uk-form-controls-text label:only-of-type input.uk-checkbox { font-size:.8rem; margin-top:0; position:relative; -webkit-appearance:none; outline:none; width:4em; height:2.4em; border:2px solid #D6D6D6; border-radius: 3em; box-shadow:inset 5em 0 0 0 #DDD; flex-shrink: 0; } .uk-form-controls-text label:only-of-type input.uk-checkbox:after { content:""; position:absolute; top:.25em; left:.25em; background:#FFF; width:1.6em; height:1.6em; border-radius:50%; transition:all 250ms ease 20ms; box-shadow:.05em .25em .5em rgba(0,0,0,0.2); } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked { background-color: transparent; box-shadow:inset 5em 0 0 0 #4ed164; border-color:#67bba5; } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked:after { left:1.85em; box-shadow:0 0 1em rgba(0,0,0,0.2); } label:only-of-type input.uk-checkbox:checked + span { color:#008a00; transition:all 250ms ease 20ms; } .InputfieldCheckbox .InputfieldContent label:only-of-type {display:flex;} label:only-of-type input.uk-checkbox + span { color:#c3c3c3; display:flex; align-items:center; line-height:1.1; } /* Below is only necessary if you want the optional "tick" after items when selected */ label:only-of-type input.uk-checkbox + span:after { flex-shrink:0; margin-left:.5em;width:2em; opacity:0; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Ccircle cx='125' cy='125' r='125' fill='%23231F20' opacity='.1'/%3E%3Cpath fill='%230B8B44' d='M95.823 139.432l-32.492-32.56-31.872 31.883-.008-.008 63.72 63.732L218.549 79.116 187.494 47.52z'/%3E%3C/svg%3E"); } label:only-of-type input.uk-checkbox:checked + span:after { opacity:1; transition: opacity 250ms ease 150ms; }  

×
×
  • Create New...