Using jQuery UI for my project and I can't seem to find the CSS to remove the 10 px or so white space between the actual tabs and the tab content.
Any help is appreciated.
try this in your css file/definition
.ui-tabs .ui-tabs-nav li {
margin: 1px 0 0 0 !important;
}
You're going to want to target .ui-tabs .ui-tabs-panel and remove the top padding; here's the default styling for this selector:
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none;
Here's a fiddle demonstrating a basic tabs widget with an example black box like the one in your picture.
I'd strongly advise against using !important to override any styles, especially with regard to the jQuery UI widgets, as the script generates dynamic selectors with (in some cases) a high level of specificity.
I wrote an article on Medium about how to style jQuery tabs; while not directly relevant to your existing problem, I do touch upon the specific dynamic classes for the widget. If you're looking for further help, it might aid you in some way.
Cheers!
I finally fixed it, many wasted hours digging through CSS just to figure out that it was a freakin' <p></p> tag set in this line:
tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
All other answers were fine and I didn't post enough of a code sample to give anyone else a chance at a solution. Was not sure who to award the answer to so I answered myself since this is what actually fixed the issue.
Thanks to the other folks who responded with info.
Related
I've been playing around with changing the way my portfolio looks and I've been struggling with getting my expander to push elements down (like google images does).
My test is here: http://chris-carpenter.co.uk/new/
I've used this as a starting point to add a filterable option for my work:
queness.com/post/14577/create-a-simple-responsive-portfolio-page-with-filtering-and-hover-effect
This is what is causing the problems. I've found ways to create the filterable portfolio, and ways to create a static portfolio that has an expanding content section but combining them is blowing my mind. I can't seem to figure it out.
At the moment this opens and pushes elements down, but the width is limited by the parent div, so anything below & to the right doesn't seem to shift.
<div class="portfolio--expand is-expanded">
</div>
I'm now looking at inserting a content div at the end of the row clicked. Much like this.
http://jsfiddle.net/JfcAu/450/
I'm not experienced enough with JS to understand what's happening and apply it to what I have though. Could anyone help me achieve a filterable grid which has a click to expand option?
I don't expect to retain any current styling ofcourse, since I haven't changed it at all from the original source yet, I just want the function working.
This has been hurting my brain for ages.
Useful things I've looked at:
isotope.metafizzy.co/filtering.html
oriongunning.com/blog/thumbnail-grid-expanding-preview/
You might have to do some width adjustment, but this:
#portfoliolist .portfolio {
box-sizing: border-box;
width: 23%;
margin: 1%;
display: none;
float: left; /* <-- this is taking it out of the DOM */
}
has a float:left - that is taking it out of the DOM - you have to remove the float:left - and then adjust width to maybe 22% or something to let the expanded content push everything out of the way.
Examples of two menus with similar behaviours:menu example 1
and menu example 2
Both are implemented with jquery. I want an angular implementation if possible.
I would like to toggle my partials as you see there without the use of jquery at all.
I have tried with the following approach:
http://plnkr.co/edit/yttY9PrZBdgeUZfQXXMx?p=preview--a menu/submenu directive
(plunker found here at stackoverflow )
I both considered modifying the bootstrap 3 nav bar and hoped to use it with ui-router but I
do not believe there is any easy way to use ui-router to achieve this toggling of states from the
same menu selection.
Here is the css for arrow down:
.arrow-down {
position: absolute;
top: 0;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #000;
}
Any suggestions appreciated. I just need a push.
Here is a working fiddle to my question:
Working example
<submenu data-caption="Contact">
<div class='arrow-down'></div>
<pre><div ng-include src="'style.css'"></div></pre>
</submenu>
The partials are of course injected using ng-include and only if you remember those pesky ''.
The fiddle wont display the .css file which was added for proof of concept but this works in plunker.
Also this example uses a minimum of not-so-great-css. My next step will be to see if the many css selectors needed can be packed in without sacrificing too much on readability. If you jquery guys check out the amount of js code needed for this as opposed to the minimal amount of code written in the directive---it quite a "shocking" difference. Will post a better version if i get that far and i still think this toggle between clicks behaviour would be a good option to add in ui-router.
I have been trying to wrap my head around this issue for the past few hours but with no success. If you look at this page.
On the left side, where its titled "Latest Tweets", there is a mysterious left-padding to the list of tweets. I can assure you that I have not added any styling to it to have that padding... not to my knowledge anyway.
For a past few hours ago, before I made major changes around the page, it looked perfect. Here is a screenshot of how it should be aligned.
Its 11.15pm, I'm tired and I want to watch Game of Thrones. Can someone kindly assist me in solving this issue so that I can call it a night?
You have margin-left: 15px; on .projects li.
That is what causes the move to the right...
Perhaps you added it for the list of videos, but it is affecting the list of the tweets since both are under the projects element.
Add .projects .sidebar_left li{margin-left:0} to fix it..
Update
or better yet, since you already have a rule for them #twitter_update_list li add the margin-left:0 to that.
Gaby beat me to posting the answer, but you could have found it yourself inspecting the elements using Google Chrome for example - you can click an element and it tells you what style the element has, like this:
.projects li {
width: 202px;
display: block;
float: left;
margin-right: 15px;
margin-left: 15px;
margin-bottom: 40px;
}
Better yet, you appear to be able to test style changes LIVE. Pretty cool, actually.
I ma helping someone out to make a web site but I cant find solution how to add HTML & CSS instead of images in the javascript "ContentFlow" it has been downloaded here: http://www.jacksasylum.eu/ContentFlow/
here you can see how it looks with html text:
http://portfoliodummy.medienbayer.de/ContentFlow_mb_test/
as you can see when you move the blocs the text goes up and down! I have tried to add padding to it. not to assign font-size... but it wont work. I need to know if anyone has any idea or maybe solution. I know that images are the best way to go but he wants it to be with HTML.
Thank you for your Help
.ContentFlow * {
margin: 5%; /*adjust the value as you prefer */
}
.ContentFlow .flow .item div.content {
overflow: hidden;
}
tested only on chrome/linux. :-)
This improves the situation. Not sure if further improvement is possible.
You could use
.ContentFlow .flow .item div.content {
overflow:hidden;
white-space:nowrap;
}
Then do hard breaks <br /> on the content to ensure each item fits in the box. There'll be some clipping on resize but you won't have a bounce. You could probably automate where to put the breaks with a little javascript magic too.
I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?
There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/
Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript
If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.
i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image
For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.
You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.
you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/