The Orbit slider that comes as part of Zurb's Foundation seems to add a class of hide-for-small to the navigation.
I need the navigation to still show up however in order to show my content. I have tried removing the hide-for-small part of the wrapper in jquery.foundation.orbit.js line 59 but the class keeps getting added.
Does anyone have an idea how to remove it?
You should add .touch .orbit-bullets { display: block; } to your css. Foundation 4 adds the .touch class when using a touch-enabled device, which hides orbit's bullets and arrows.
Better yet, add the following to your app.css to over-ride the class:
.hide-for-small {
display: block !important;
}
It's more future-proof if you upgrade your Foundation someday.
Update: Please see jmsg1990's answer as it is the proper way to do this now.
Just ran into this problem myself and solved it quite easily by opening up jquery.foundation.orbit.js.
At line 60:
directionalNavHTML: '<div class="slider-nav hide-for-small"><span class="right"></span><span class="left"></span></div>'
Simply remove the class "hide-for-small" like below and it works as expected.
directionalNavHTML: '<div class="slider-nav"><span class="right"></span><span class="left"></span></div>'
Related
Since the last update pack of Linux Mint Debian, GTK3 buttons suddenly need more width than before, so that they don't fit in an application I wrote. The problem is that they allocate more space around the button label (something like 25 pixels each side), and cannot be convinced not to do so.
The button was created with gtk_button_new_with_label, so nothing fancy.
I tried everything to reduce that wasted space, but nothing worked:
gtk_widget_set_size_request(GTK_WIDGET(mybutton),1,1); does nothing.
gtk_widget_set_margin_right(sidebar.button[i],0); decreases the spacing around the button, not inside.
gtk_container_set_border_width(GTK_CONTAINER(mybutton),0); decreases the spacing around the button, not inside.
what have I missed?
I guess that's defined in the stylesheet of the theme you are using. You can try overriding the style of the widget using GtkCssProvider. A python example could look something like
my_style_provider = Gtk.CssProvider()
my_style_provider.load_from_data(b'GtkWidget { padding-left: 0; padding-right: 0; }')
context = widget.get_style_context()
context.add_provider(my_style_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
Note: untested.
I am new to foundation. I have a top bar and I want to hide it for desktop because I have another menu for it.
I try to use hide-for-large class, but it didn't work for me.
How can I resolve this?
Try to use .hide-for-medium-up
The class .topbar uses !important on the display property. To override this behaviour, add the following to the bottom of your app.css file or app.scss file. Since its on the bottom of the file, it is given priority.
#media only screen and (min-width: 1440px) {
.topbar {
display:none !important;
}
}
With Foundation if your hide-for-large class isn't working, it could be that you are selectively include components and have not included the visibility classes in your app.scss file #import "foundation/components/visibility"; , you need this for that class to work.
Using Rubymotion, how can I remove glossy effect on my tabbar item ?
I found this ObjC solution :
[yourTabbar setSelectionIndicatorImage:[[UIImage alloc] init]];
But the glossy effect is still there when I translate it in Ruby this way (in app_delegate.rb) :
#tab_controller.tabBar.setSelectionIndicatorImage UIImage.alloc.init
What's wrong with this ruby translation ?
I'm also using Pixate, so maybe there is an other way with simple css...
Using Pixate and CSS, you could do something like this to hide the selected state, or perhaps place an alternate image in there:
tab-bar tab-bar-item:selected {
background-color: linear-gradient(transparent, transparent);
background-size: 1;
}
What would be the best way to keep the "fixed" and/or "sticky" functionality on Zurb Foundation 4's top-bar in desktop views, but remove for mobile views? Having a fixed top bar is great to have on larger devices, but wastes valuable screen real estate on mobile devices.
I'm actually surprised that it doesn't do this by default (or at least have an option to disable on mobile devices).
My quick solution is as follows:
$(function() {
if (Modernizr.mq('only screen and (min-width: 768px)')) {
$('#header').addClass('fixed');
}
});
There's a probably a more elegant solution though (and one that takes care of screen resizing etc.).
EDIT: re-read my question after and realize it was very unclear. Have updated.
You could modify the .fixed class like so:
.fixed {
width: 100%;
position: relative;
#media #{$small} {
position: fixed;
top: 0;
left: 0;
}
}
This will show the navbar as fixed for views larger than mobile, and it should then be free to scroll for mobile.
I'm not sure if it is more elegant but I think I would use .hide-for-small .show-for-small as appears in some elements on the foundation templates, I know that it implies repetition, but hey, it's maybe an opportunity for a more mobile friendly layout for the top-bar. Hope it helps.
Maybe my answer is too obvious, but have you tried on the media query for the mobile devices?
.top-bar {
display: none;
}
I have a problem with the FreeTextBox rich Text Editor in my ASP.NET site. The problem occurs when I access the site with firefox, and I have a freetextbox instance in a hidden div. The hidden div might also be an AJAX Tab Panel. The actual problem is that when the page loads it throws an uncaught exception (firebug shows the StoreHtml() function) and halts the postback!!
Is anywhere of the problem and a solution for it??
Thanks
I recently met a similar problem with jQuery UI tabs. What you need to do is to change the CSS for hidden tabs to something like:
.hiddentab
{
position: absolute;
left: -99999999999999;
}
This puts hidden tabs far to the left, and in absolute position mode this does not cause horizontal scroll bars to appear. When the tab is shown, simply remove the hiddentab class from the tab element.
This will work if the problem is related to Firefox' odd behavior with display: none.
I have found another solution to the problem in case anyone is looking for it. What I did was use javascript to override the OnSubmit function of the form, thus catching the exception that caused the problem and going on with the rest of the code.
However the solution is kind of "hack" since it does not cover every situation. I found the solution in the FreeTextBox forum and tried it out and it works. The only difference in my code is that I return true in the end of the override function:
function OvrdSubmit()
{
var ftbSubmit=document.forms[0].onsubmit;
if (typeof(ftbSubmit) == 'function')
{
document.forms[0].onsubmit = function()
{
try{ftbSubmit();}
catch(ex){}
}
}
// We are ok
return true;
}
Since my site is an ASP.NET site I also had to add this line in the Page_Load():
ClientScript.RegisterOnSubmitStatement(this.GetType(), String.Concat(this.ClientID, "_OnSubmit"), "javascript: return OvrdSubmit();");
Hope it helps anyone with the same problem.
Firefox has a problem with being inside anything with a style of display:none. What I did was to use a div with a zIndex that hid the div until I needed it displayed. I would start there.
Thanks for your answer, however my problem currently is that the FreeTextBox is inside an AJAX Tab Panel, therefore I would have to reconstruct the whole tab functionality in order to do so, and I do not have adequate time!
For what it's worth, I am close to a solution (I think) by setting the .ReadOnly attribute of the FTB to true and then setting it back to false on the controlo .PreRender. It works for the first time the page loads, so now I have to figure out how to implement this properly for every postback.
I will post the solution if I find it!
Thanks anyway!