zurb-foundation

Full height columns on Foundation

由 谁说胖子不能爱 提交于 2019-12-21 05:16:17
问题 I'm using Foundation 5 Framework and need to create 3 same height columns. Second columns includes 2 panels, I need to stretch all columns to full height (in the second columns there will be just second panel stretched to full height). Any idea? I don't want to use block grid for this. My code: <div class="row"> <div class="small-12 medium-4 columns"> <div class="panel"> <!-- here comes the content---> </div> </div> <div class="small-12 medium-4 columns"> <div class="panel"> <!-- here comes

How to preload images for Foundation's Orbit image slider?

由 戏子无情 提交于 2019-12-21 04:55:10
问题 Using Zurb's Foundation 4.1.5 (latest version), the Orbit image slider works great. Unfortunately it looks really for the first couple of seconds where all the images appear as a giant bulleted list. Then the JavaScript kicks in and it all is beautiful. How do I avoid the initial ugliness? Can I preload the images? Can I have everything with display: none or visibility: hidden until it's ready? 回答1: Per Foundation documentation We've cleaned up how Orbit initializes by adding a wrapper

Dynamic Alert Box with Foundation

由 有些话、适合烂在心里 提交于 2019-12-21 04:44:06
问题 How should I go about adding a new alert box dynamically to a page with foundation? It looks like I would have to insert the html markup for the box and then reinitialize foundation for the whole page... that can't be right, can it? Is there some easy method for adding an alert box dynamically? I would expect an api such as: $("#myElement").foundation('alert', "foo 123"); Example: $.post("/some/url", {some:'data'}) .fail(function(){ $("#myElement").foundation('alert', 'Process failed!'); });

Creating inline date_select dropdowns using simple_form and zurb foundation

由 放肆的年华 提交于 2019-12-21 04:08:11
问题 I'm using Simple_Form with Zurb Foundation in my rails application. One of more views has a form with the following date_select The form fields are showing up stacked rather than inline. I've checked everything and can't figure out how to get these to show-up correctly. What am I missing? You can see the repo at https://github.com/stanrails/momtomom in the event.html.erb view. The code for the section is below: <div class="row"> <div class="small-5 columns"> <%= f.date_select :eventDate %> <

zurb foundation center content in the grid

由 旧巷老猫 提交于 2019-12-21 03:11:09
问题 I'm trying to center horizontally an image into a zurb column but it seems impossible. I tried everything, searched everywhere, but I cant get it to work. Here is my code: <div class="row"> <div class="twelve columns"><br /> <img src="img_06.jpeg" alt="slide image"> </div> </div> currently landscape images are alright on the 12 column grid, but when a portrait image comes along it is on the left side of the grid. If i give it a 25% padding it goest to the center, but I'm using php to pull all

Using Zurb Foundation Interchange with AngularJS

由 核能气质少年 提交于 2019-12-21 01:57:29
问题 I'm working on an AngularJS project that uses Zurb Foundation as its CSS framework. I'm trying to figure out how to using Foundation's data interchange within the context of an AngularJS view. Is this even possible, I can't seem to get it to work. This is what I currently have: index.html <!DOCTYPE html> <html ng-app='app' xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel=

Creating a Foundation-style Block Grid in Bootstrap 3?

由 百般思念 提交于 2019-12-20 14:13:11
问题 In Zurb Foundation 3+, they have a CSS construct of a "block grid" which is an unordered list where you can specify the number of items in a row. Here's their docs on it. There's no way I can see to do this in Bootstrap 3; there's only columns. I'd like to have the ability to have a repeated element (such as a LI) display easily as a responsive grid, where I can specify how many across by breakpoint, as in Foundation. I figure I can roll my own, but wanted to see if anyone had suggestions or

Why does changing a CSS class name break the styles?

由 99封情书 提交于 2019-12-20 06:27:14
问题 This one is a real head-scratcher for me. I'm using Zurb Foundation with SASS, and a Django dev server. The issue is this: I have a SCSS file with some selectors, and they work as desired; however, if I change the name of the class in both the SCSS and the HTML, the elements under that class no longer render. // the_styles.scss .ad-box { @include panel(); border: none; .ad { width: 728px; height: 240px; border: 1px solid #00f; } } <!-- the_page.html --> <div class="large-12 columns ad-box ">

Issue with foundation used in .vue single file components

由 生来就可爱ヽ(ⅴ＜●) 提交于 2019-12-20 04:15:28
问题 I have realised that there is a problem when using Zurb Foundation classes in .vue single file components. At first I could not get a Reveal Modal to work inside the .vue component but it was working when I use the same code in a blade or html file. Then I noticed a pattern because when I tried to use the Foundation's Orbit inside the component it failed, at first I thought it was an error but then I used the same code in a blade file and it worked. Other foundation classes such as row , grid

Foundation equalizer plug + BS 3.2?

由 时光总嘲笑我的痴心妄想 提交于 2019-12-20 03:53:23
问题 Trying to use equalizer plug, but id doesn't work, and no errors. It`s look like http://goo.gl/OvKy1g. Here is a page http://goo.gl/INMqUL. Do i need include some css for it. 回答1: You can use the Foundation Equalize plugin along with Twitter Bootstrap, but you need to do a couple of things to make it work. DEMO First, your principle issue is that foundation.js is looking for the corresponding foundation.css. Since you're using Twitter Bootstrap as your base styles, you probably don't want to
订阅 zurb-foundation