My content in slick is not loading properly. However, if I click or change the window size of the browser it works fine. How can I fix the same?
I have added the below CSS but still not working.
.slider-container {
overflow: hidden;
}
.slick-slide: nth-of-child(n+1) {
display: none;
}
.slick-initialized,
.slick-slide:first-child {
display: block;
}
The issue is fixed since the tags were not closed properly.
Related
How can I have multiple rows with tabs on Firefox 57+, after the add-on Tab Mix Plus no-longer works (all legacy extensions are dropped with Firefox 57). Perhaps I should just wait?
This is perhaps the only functionality which I couldn't find in Opera or Chrome (and Chrome has some privacy issues), the last time I tested them. So it seems I have a few options, not just a single one.
As suggested in this thread, I can downgrade to FF 52 ESR (with possible issues...) or use a nightly build...
Another possible option is to use a [FF Current Profile Folder]/chrome/userChrome.css file (folder may need to be created), where I can place some code. Here is what I tested under FF 57, using 500+ tabs:
(EDIT 1: Added few css rules to hide some spaces/buttons, similar to the R4zen's answer, as mine contain one more rule and is perhaps more complete... but the result could be the same for most people! I had this code tested when I posted the question, but decided to post less code for easier understanding of what is happening. Now I am posting my full code, so others can benefit from it.)
#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#tabbrowser-tabs .arrowscrollbox-overflow-start-indicator,
#tabbrowser-tabs .arrowscrollbox-overflow-end-indicator,
#tabbrowser-tabs #alltabs-button {
display: none;
}
#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
display: block;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
/*
display: block;
*/
overflow-y: auto !important;
min-height: var(--tab-min-height); /* default */
max-height: calc(5*var(--tab-min-height)) !important;
}
#tabbrowser-tabs .tabbrowser-tab {
flex-grow: 1;
flex-wrap:wrap;
min-width: 150px;
vertical-align: bottom !important;
}
#tabbrowser-tabs .tabbrowser-tab,
#tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
height: var(--tab-min-height);
}
#tabbrowser-tabs .tabbrowser-tab .tab-stack {
width: 100%;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] {
min-width: 0px;
max-width: 40px;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] .tab-icon-image:not([src]) {
visibility: hidden !important;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] .tab-text {
display: none !important;
}
/* Active tab's style - visuallyselected="true" === ACTIVE TAB */
#tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] {
font-weight: bold;
}
#tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] .tab-background {
background-color: lime !important; /* green, lime, LawnGreen-7CFC00, LimeGreen-32CD32, SpringGreen-00FF7F */
}
Where 5 in max-height: calc(5*var(--tab-min-height)) !important; are 5 rows, dynamically calculated height.
The above code shows tabs, but their behavior is quite bad:
the worst thing - when you scroll between the tabs using Ctrl+Tab (in the last recent order), and the tab switched to is on a different row (5+ rows away), the row with the tab doesn't scroll to the active tab. The slider must be used to manually scroll the rows and visually find the selected one...
(To clarify: I have set 5 visible rows out of 15 rows total)
tabs can't be dragged as FF core calculates it incorrectly and moves the tab to a random position
To use a fork of the legacy code, someone mentioned WaterFox (or another fork).
Are there any other (better) solutions as of today?
I'm pretty sure we'll have more options in the future, so the correct answer today may not be the best after a week or month(s)...
EDIT April 2019 (Firefox 66.x): After updating to Firefox 66, I had too many rows covering entire screen (that's 1000+ tabs). I needed to edit the original code above and added a few extra rules:
#tabbrowser-tabs .arrowscrollbox-scrollbox {
max-height: calc(5*var(--tab-min-height)) !important;
overflow: auto;
margin-bottom: calc(1.25 * var(--tab-min-height)) !important;
}
You may need to adjust them for you, in case you have different rows number (I have 5 rows with tabs). Good luck!
Multirow tab bar with working tab dragging (tested on FF 61):
Download and extract https://luke-baker.github.io/Firefox_chrome.zip
Copy userChrome.xml to your chrome folder.
Add content from userChrome.css to your userChrome.css.
Download MultiRowTabLiteforFx.uc.js
to your chrome folder.
Your chrome folder is a folder named chrome located under your user profile, e.g. ~/.mozilla/firefox/g7fa61h3.default/chrome. It does not exist by default, so create it if needed.
UPDATE
userChrome.xml file could now be obtained from Izheil's Quantum-Nox-Firefox-Dark-Full-Theme repo. There are also two versions of MultiRowTab script, for limited and unlimited number of tab rows.
I did few modifications, now should be without bugs (even if you pin tabs, move/drag window, scroll between tabs e.t.c.):
#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
display: block;
}
.scrollbutton-up,
.arrowscrollbox-overflow-start-indicator,
.scrollbutton-down,
.arrowscrollbox-overflow-end-indicator {
display: none !important;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
/*
display: block;
*/
overflow-y: auto !important;
min-height: var(--tab-min-height); /* default */
max-height: calc(5*var(--tab-min-height)) !important;
}
#tabbrowser-tabs .tabbrowser-tab:not([pinned]) {
flex-grow: 1;
flex-wrap:wrap;
min-width: 150px;
vertical-align: bottom !important;
}
#tabbrowser-tabs .tabbrowser-tab,
#tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
height: var(--tab-min-height);
}
#tabbrowser-tabs .tabbrowser-tab .tab-stack {
width: 100%;
}
#titlebar-buttonbox {
display: block !important;
vertical-align: top !important;
}
#main-window[tabsintitlebar] #tabbrowser-tabs {
-moz-window-dragging: no-drag;
}
If you find the first row of tabs is invisible, open about:config and change the value of browser.tabs.drawInTitlebar from the default value of true to false.
browser.tabs.drawInTitlebar false
if you want to drag firefox window by clicking on free space of titlebar more than using 5 or more rows just delete code:
#main-window[tabsintitlebar] #tabbrowser-tabs {
-moz-window-dragging: no-drag;
}
It's enable to scroll between rows by holding scrollbar when it's more then 5 rows, but on the other hand is disable posibility to drag ff windows by titlebar.(If you don't use more then 5 rows then you can delete it)
For those interested in how this CSS UI change works, there is a helpful article on ghacks.net that describes what's being done: https://www.ghacks.net/2017/11/13/customize-firefox-57-with-css/
The article refers to the git hub project "Custom CSS tweaks for Firefox 57+" https://github.com/Aris-t2/CustomCSSforFx That project contains many different UI tweaks that can be mixed and matched. The README file there gives good insight into how to pick and choose among the options.
With regards to whether or not the chrome directory needs to be created:
On the Fedora system I used, that directory did need to be created. On the Mac system, it was already present and contained example files, userChrome-example.css and userContent-example.css.
In the userChrome-example.css file was the following:
/*
* Do not remove the #namespace line -- it's required for correct functioning
*/
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
Although I needed to set browser.tabs.drawInTitlebar to false, once I did that, R4zen's code worked fine for me both with and without the #namespace line present.
Just thought I'd add how to do this. (though it's provided on other linked websites, it's better to have all the info in one place.)
Start firefox
enter "about:support" in the address bar
In the table, there is a row "Profile folder". Click the button "Open folder".
under "chrome" there should be files "userChrome-example.css" which you can rename to "userChrome.css" and edit.
This saved me a lot of time because in my case, the %appdata% pointed to the wrong drive. Moreover I had to install notepad++ because the line endings were not seen by notepad.
Izheil's github repo has been referred to in the comment stacks above though the URL shared above did not work for me (hence re-sharing). The steps called out there helped me recover my Firefox look and feel to an acceptable level after upgrading to FF66 betas (non-dark and scrollable tab bar with 3 rows). I've been stuck on the FF Quantum beta channel so these may or may not help you.
The following steps have worked for me on OSX starting with FF 66 b4.
.
The selected 4 files shown above are needed at a minimum in your profile's chrome folder.
Further if I wanted to add my own customizations (unloaded, pinned tab colors, etc) I made changes to the respective files (the js files) and went through steps 3 and 4 to make them effective.
cleared all files in Macintosh HD -> Users -> [ACCOUNT] -> Library -> Caches -> Firefox -> Profiles -> [PROFILE_NAME] -> startupCache. Note the [PROFILE_NAME] folder is hidden by default.
and then I restarted my Firefox instance.
Make sure your chrome folder only has the css, js, and xml files you want to use. Backup/move everything else to some other [safe] location.
I am thinking maybe editing the prefs.js file? See post here for why. Thanks.
I found a solution. It is not the same as Tab Mix and lacks a whole bunch of usefulness, but it does put the tabs on multiple rows.
First, locate your profile directory (see e.g. Mozilla Support), mine is at
~/.mozilla/firefox/xxxxxxxx.default
(where xxxxxxxx is some random characters), on a typical Linux system.
If it does not exist yet, create a subfolder chrome and within that a file userChrome.css (I think the capitalization of the filename does matter, but I did not test that):
~/.mozilla/firefox/xxxxxxxx.default/chrome/userChrome.css
In userChrome.css, add the following code, which I got from this source:
.tabbrowser-tab {
flex-grow:1;
min-width:150px;
}
.tabbrowser-tab,.tab-background {
height:29px;
}
.tab-stack {
width: 100%;
}
.tabbrowser-tabs .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
}
.tabbrowser-tabs .arrowscrollbox-scrollbox {
overflow: visible;
display: block;
}
.tabbrowser-tabs .scrollbutton-up,.tabbrowser-tabs .scrollbutton-down,#alltabs-button{
display: none;
}
After saving, you need to restart Firefox.
Bonus: another nice feature that Tab Mix brought, is the placement of a close button on each separate tab. This can be done by adding another piece of code to the same file (from this source)
.tab-close-button:not([pinned="true"]) {
display: -moz-box !important;
}
I was wondering if there is way to have conditional statements in SASS for Internet explorer
FOr e.g. lets say this is what I am looking for:
.container {
background-color: black
}
if ie10 {
.container {
background-color: yellow;
}
}
I found a few hacks that work fine like for e.g.
#media screen\0 {
.container {
background-color: yellow;
}
}
This one works fine but it is a HACK!! And I want to avoid it because who knows when IE fixes this issue and then I would have to re-write my whole code.
Here is one more hack that works
.container {
background-color: black;
background-color: yellow\0/
}
So in this case the second statement is read by IE but not by chrome and Mozilla or Safari so this also does the trick but again, this is also a HACK!!
I dont want to use any kind of hacks in to my project because they dont have a certain life-time.
So is there anyone who has figured out a way to apply IE conditional SASS without using hacks but using something official.
I would really appreciate the help.
You could just import an ie partial (ie10.scss)
base SCSS
.ie10 {
#import "ie10";
}
HTML
<!--[if IE 10]> <html class="ie10"> <![endif]-->
I'm using twitter bootstrap dropdown menu in a fixed navbar at the top of my page.
It all works fine but am having issues with the drop down menu items showing behind other page elements rather than in front of them.
If I have anything on the page with position: relative (like jquery ui accordion, or a google chart) then the drop down menu shows behind it. Tried changing the z-index of the dd menu and of the nav-bar, but doesn't make any difference.
The only way I can get the menu to sit above the other content is to change the content to position: fixed; OR z-index: -1; -but both of these solutions cause other problems.
Appreciate any help you can give me.
I think this is probably some standard issue with CSS positioning that I've misunderstood, so haven't posted any code, but can do if needed.
Thanks.
Just realized what's going on.
I had the navbar inside a header which was position: fixed;
Changed the z-index on the header and it's working now - guess I didn't look high enough up the containers to set the z-index initially !##!?
Thanks.
IE 7 on windows8 with bootstrap 3.0.0.
.navbar {
position: static;
}
.navbar .nav > li {
z-index: 1001;
}
fixed
Ran into the same bug here. This worked for me.
.navbar {
position: static;
}
By setting the position to static, it means the navbar will fall into the flow of the document as it normally would.
This will fix it
.navbar .nav > li {
z-index: 10000;
}
In my case in addition to z-index I had to set overflow: visible in parents elements
I had the same problem and after reading this topic, I've solved adding this to my CSS:
.navbar-fixed-top {
z-index: 10000;
}
because in my case, I'm using the fixed top menu.
Still the issue with Bootstrap v3, navbar and dropdown have same z-index ;-( I just increased .dropdown-menu z-index to 1001.
Solved by removing the -webkit-transform from the navbar:
-webkit-transform: translate3d(0, 0, 0);
pillaged from https://stackoverflow.com/a/12653766/391925
Just give
position: relative;
z-index: 999;
to the navbar
This fixed it for me:
.navbar-wrapper {
z-index: 11;
}
Solved this issue by removing transform: translateY(50%); property.
This worked for me:
.dropdown, .dropdown-menu {
z-index:2;
}
.navbar {
position: static;
z-index: 1;
}
I had the same problem, in my case because i forgot this in my NavBar style:
overflow: hidden;
I ran into a situation where a button with a Bootstrap drop down was embedded in a DataTables row. In that instance, I had to remove fixedColumns: true in the settings because that was injecting a position: sticky into the element style.
Did not work:
$(document).ready(function () {
var table = $('#order').DataTable({
fixedColumns: true,
fixedHeader: true, ...
Did work:
$(document).ready(function () {
var table = $('#order').DataTable({
fixedHeader: true, ...
I'm late to the party here but for anyone using the bootstrap sticky-top class beware that it's z-index is higher than what is defined for the dropdown so anything within it will bleed through the dropdown's menu.
https://github.com/twbs/bootstrap/issues/31747
This was my scenario and the other answers here that referenced position: sticky put me onto it.
In my case, this was caused because I had a CSS animation with transform operations applied to a parent <div>. I worked around the problem by moving the animation to a different element.
I would like to use Font Awesome icons:
<i class="icon-edit"></i>
in the jqGrid pager area instead of the physical images by default.
.navButtonAdd('#vw_ComplaintSearchGridPager', { caption: '', buttonicon: 'ui-icon-disk', title: 'Save Grid Settings', onClickButton: function () { $(this).SaveGridSetting(); } })
Does anyone know how to achieve this?
It's very interesting question! I never used Font Awesome icons before, but it seems very interesting project.
jqGrid has currently no direct support of Font Awesome icons, but I prepared the simple demo which shows how to replace the standard jQuery UI navigator icons with the corresponding icons from Font Awesome.
One can see mostly clear the difference to the original navigator icons after zoom of the page. I included below the navigator displayed with zoom 400%:
The original navigator using jQuery UI icons
The navigator with Font Awesome icons:
The code which I used is very simple. Instead of usage
$grid.jqGrid("navGrid", "#pager", {view: true});
I used
$grid.jqGrid("navGrid", "#pager", {editicon: "icon-pencil",
addicon: "icon-plus", delicon: "icon-trash", searchicon: "icon-search",
refreshicon: "icon-refresh", viewicon: "icon-file",view: true});
$("#pager .navtable .ui-pg-div>span").removeClass("ui-icon");
I added the CSS
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span { margin: 0 5px; font-size: 12px; }
I think it's possible to replace more jQuery UI icons to Font Awesome icons, but it's not very simple. I will think about the problem more and will contact the developer of jqGrid (Tony Tomov) to consider to make jqGrid more friendly to Font Awesome icons, so that it could be possible very simple switch to Font Awesome icons.
UPDATED: I added the code which allows top replace more icons from the pager:
var $pager = $grid.closest(".ui-jqgrid").find(".ui-pg-table");
$pager.find(".ui-pg-button>span.ui-icon-seek-first")
.removeClass("ui-icon ui-icon-seek-first")
.addClass("icon-step-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-prev")
.removeClass("ui-icon ui-icon-seek-prev")
.addClass("icon-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-next")
.removeClass("ui-icon ui-icon-seek-next")
.addClass("icon-forward");
$pager.find(".ui-pg-button>span.ui-icon-seek-end")
.removeClass("ui-icon ui-icon-seek-end")
.addClass("icon-step-forward");
As the result one get the following pager:
instead of
UPDATED 2: The code for changing minimizing icon looks a little completer. One should first change the icon initially
$grid.closest(".ui-jqgrid")
.find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>.ui-icon-circle-triangle-n")
.removeClass("ui-icon ui-icon-circle-triangle-n")
.addClass("icon-circle-arrow-down");
and then change it after every click on the icon:
onHeaderClick: function (gridstate) {
if (gridstate === "visible") {
$(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
.removeClass("icon-circle-arrow-up ui-icon-circle-triangle-n")
.addClass("icon-circle-arrow-down");
} else if (gridstate === "hidden") {
$(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
.removeClass("icon-circle-arrow-down ui-icon-circle-triangle-s")
.addClass("icon-circle-arrow-up");
}
}
Additionally one need to add the CSS
.ui-jqgrid .ui-jqgrid-titlebar-close>span { margin: 0 3px; font-size: 16px; }
.ui-jqgrid .ui-jqgrid-titlebar-close { text-decoration: none; }
To fix the sorting icons I used the code
var $sortables = $grid.closest(".ui-jqgrid")
.find(".ui-jqgrid-htable .ui-jqgrid-labels .ui-jqgrid-sortable span.s-ico");
$sortables.find(">span.ui-icon-triangle-1-s")
.removeClass("ui-icon ui-icon-triangle-1-s")
.addClass("icon-sort-down");
$sortables.find(">span.ui-icon-triangle-1-n")
.removeClass("ui-icon ui-icon-triangle-1-n")
.addClass("icon-sort-up");
and the CSS
.ui-jqgrid .ui-icon-asc { height: auto; margin-top: 0; }
.ui-jqgrid .ui-icon-asc, .ui-jqgrid .ui-icon-desc {
height: auto; margin-top: 0; margin-left: 5px;
}
.ui-jqgrid .s-ico>.ui-state-disabled, .s-ico>.ui-state-disabled { padding: 0; }
As the result one will get the following:
UPDATED 3: In the next demo one can find more full replacement of jQuery UI icons to Font Awesome icons.
UPDATED 4: The answer provides solution for Font Awesome version 4.x.
Figured I would put a CSS alternative answer for those interested. One of our developers implemented a JS option, which did functionally work, however, there was a delay before it rendered correctly (not ideal).
We used font-awesome icons for our paging options, and here is how we implemented it.
Found the four classes that jqGrid was using for the paging icons we desired to customize and created the following css to apply base font awesome styles
.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
Then it is simply a matter of grabbing the content from font-family icon and using them as your own.
.ui-icon-seek-next:before
{
content: "\f105";
}
.ui-icon-seek-prev:before
{
content: "\f104";
}
.ui-icon-seek-end:before
{
content: "\f101";
}
.ui-icon-seek-first:before
{
content: "\f100";
}
So the entire CSS together looks like this
.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.ui-icon-seek-next:before
{
content: "\f105";
}
.ui-icon-seek-prev:before
{
content: "\f104";
}
.ui-icon-seek-end:before
{
content: "\f101";
}
.ui-icon-seek-first:before
{
content: "\f100";
}
And the output on our grid without JS and without delay
By looking at answer from Oleg above, I did the following to simplify things.
Additional CSS
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span.fntawsm { margin: 0 5px; font-size: 12px; padding-left:2px;padding-right:2px;}
** padding-left:2px;padding-right:2px; is optional
And this only works with icons only with no caption ...
And then just start adding fontawesome icons in navButtonAdd like
caption:"", // important for above
title:"Give any",
buttonicon:"fntawsm icon-remove"
buttonicon:"fntawsm icon-eject icon-rotate-90"
etc .. You can use all extra functionality from font-awesome like icon-rotate-XX too.
Thisway i did`nt have to remove ui-icon class from spans.
Inspired by #afreeland answer, I created a css available on github which allows you to convert your icons to Font-Awesome icons.
The performance advantage of this over the jquery method that #Oleg described is important in my opinion.
It is also a very elegant solution in my opinion.
You are welcome to use it: https://github.com/guylando/ToAF
Note: you must give priority for this ToAF.css file styles over your other icons styles so that can be achieved for example by copying the css content into a tag in your document.