Accordion display full content - javascript

My problem is that my accordion shows a scrollbar in every content section.
So I decided to set overflow:hidden:
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
overflow: hidden;
Scroll-bar is gone. That's what I want.
Now the problem is that I cannot see the text that is way down there since there is no scroll-bar.
Is there a way to make the accordion content space automatically detect how much space is needed for different text lengths. Right now I feel like having a fixed spaced. If there is little text, there is a huge margin to the bottom. If there is too much text, only the part will be visible.

you can use the code:
$('#accordion').accordion({
heightStyle:"content"
});
add heightStyle:"content"

Related

White Space occur only in mobile view because of scroll up icon

I am creating a website using a free template Click here to go on the website
When you scroll up after scroll down you will notice a red standing arrow at the bottom right corner this is an image of the red arrow on which if you hit it will scroll the page to top #Home.
Now the problem is on my laptop it looks ok but when I do inspect to see mobile view then I can notice a white space created by this feature.
this is the image :
Click here to see image
I already tried using :
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
and notice that only overflow-x: hidden remove white space but also affect then arrow scroll functionality and also still little bit space persist towards right size with a bottom scrollbar.
I tried to remove the entire scroll code also but still unable to remove this white space which is occurring only in mobile view.
I gave a link to the entire website instead of mentioning here as I don't know which code is causing a problem and can't provide a code of entire website at here.
Please see the link and over there you will find the entire website with this scrolling feature on each page. Thanks
The image used as the background of your #toTop element is 32px wide, so change the width:
#toTop {
width: 32px;
}
If you need to push it away from the right hand side, use a margin-right.

when a div is not displayed, forget this css rule

I have a situation where I have 3 divs :
- Menu - Header (#rt-top-surround)
- Showcase (#rt-showcase)
- Main Body content (#rt-mainbody-surround)
The Menu is 'sticky' with position: fixed. Therefor I have to move the div that is rendered below it with padding (padding-top: 120px; margin-bottom: -120px;).
The problem that I run into is that on some pages the second DIV is #rt-mainbody-surround. (Than this div is rendered properly.)
But on other pages I have #rt-showcase (that displays some promotional images) as second DIV followed by the main body DIV.
So what I would need to implement is a rule that not adds the padding & margin on the rt-mainbody-surround div when the rt-showcase is displayed. And I'm not wether to do this with Javascript or with PHP and how to accomplish this.
I've made an illustration to show what I exactly mean.
Hope anyone can help me out here! Thanks!
Illustration
If I understand the question correctly you want a margin below a specific div only if another div isn't actively visible. The best way to handle this is to add a bottom margin to the top div and negative margin to the div below it (that can be shown and hidden). The css for that is:
.top {
margin-bottom: 20px;
}
.middle {
margin-top: -20px;
}
Sometimes a picture is worth more than some code though so I created a fiddle here. Enjoy!

Mismatch in text width between div and textarea

I'm trying to create a textarea control in which it is possible to mention other users. The feature is pretty much similar to the one found in Facebook, and the implementation is similar too. When the user types an "#", a dropdown is presented from which a user can be selected which is then displayed with a highlight in the textarea. To be able to selectively render highlights in the textarea, I'm using an overlay div with the same text, but with span tags to create highlights.
The overlay has the same width, the same font and font-size, the same letter-spacing, same line-height, etc., to make sure all highlights will align properly with the text in the textarea. All the text in the overlay div, except for the highlights themselves, is transparent to avoid artifacts of rendering anti-aliased text over text.
This all works pretty well, except that when there is a mention highlight, the text in the highlight is somehow just slightly less wide than the text below it in the textarea, which causes a very slight mismatch. Worse, this small mismatch accumulates when there are multiple highlights, and it can sometimes cause a line to wrap in the textarea but not in the div, after which the whole illusion just falls apart.
I have verified that all text rendering options are exactly the same for the text in the textarea and in the overlay and in the highlights. All have equal font, font-size, letter-spacing, line-height, there's no margin, border or padding on the highlights, etc.. I have also looked in the WebKit Inspector to see if I might have missed any properties that could still affect text rendering, but couldn't find any. Simply put, I can't explain where this slight rendering difference comes from.
Please note that the rendering difference does not occur as long as the overlay doesn't contain any highlights.
I have also tried only rendering the overlay and not rendering the textarea at all (instead of having the overlay be transparent outside of the highlights), but this has the nasty side-effect that I won't see any cursor anymore.
Is there some CSS property that I still might have overlooked or is there some other reason why breaking the text into multiple spans would cause the total width of the text to slightly differ from an uninterrupted text node? Any suggestions would be greatly appreciated!
Update: For any others who might run into this problem, it's illustrated in the following jsfiddle: http://jsfiddle.net/brt8w85z/5/
<style type="text/css">
.parent {
text-rendering: optimizeLegibility;
position: relative;
}
textarea {
border: 0;
color: #000;
resize: none;
}
.overlay {
color: transparent;
pointer-events: none;
}
textarea,.overlay {
font-family: Helvetica,sans-serif;
font-size: 12px;
left: 10px;
letter-spacing: normal;
margin: 0;
padding: 0;
position: absolute;
top: 10px;
width: 200px;
}
.highlight {
background-color: #00f;
color: #fff;
}
</style>
<div class="parent">
<textarea>Tom Kleijn, Mark van der Velden and Arend van Beelen</textarea>
<div class="overlay"><span class="highlight">Tom Kleijn</span>, <span class="highlight">Mark van der Velden</span> and <span class="highlight">Arend van Beelen</span></div>
</div>
The problem can be fixed by adding "text-rendering: geometricPrecision" to the "textarea,.overlay" rule.
Seems I have found the solution myself: On the body there's a definition of "text-rendering: optimizeLegibility". Setting this back to "text-rendering: geometricPrecision" on the textarea fixed the problem. The reason this was not obvious before was because the WebKit Inspector did not show the inherited text-rendering on the textarea, even though it does so for (most?) other inherited properties.

How can I stop the spry menu from wrapping when zooming in and out with the browser?

I have been to the end of the internet and back trying to solve this. Here is the page withe the spry menu. You will notice some inline styling to get it to fit the design of 980px wide.
The HTML
Here is the spry CSS.
[CSS][2]
I set this in firebug:
ul.MenuBarHorizontal {
width: 1200px;
}
Which shows the navigation menu is wider than 980, which is why it is wrapping around. You need to strip off five or ten pixels from the padding or margins of your menu items.
ul.MenuBarHorizontal a {
padding: 9px 20px;
}
Seems to work well. And actually, you can take that second padding value up to 26px without it wrapping around.

Get rid of useless scroll bars on fancybox iframe

I have some content I want to show in iframe with fancybox. When I use it, it pops up with horizontal and vertical scroll bars even though all the content is inside of it. Inspecting it in Firefox shows that when I click on html everything is inside but there is a little left over that is outside of the highlighted box. The next level up is iframe.fancybox-iframe which includes the scroll bars. I looked at the css and that has padding and margins set to zero so I don't know why the scroll bars are there. Right now as far as options I just have autoSize:false. All I have inside the body of the page I want to show is a form.
If anyone wonders which class name to use
.fancybox-inner {
overflow: hidden !important;
}
And if you found a small white background you can reset it using
.fancybox-skin {
background: inherit;
}
Try adding this to the css:
.style{
overflow: hidden;
}
If it didn't help, please post your HTML and CSS.

Categories

Resources