Develop Reference

Weird body padding on mobile layout

If you go to https://www.biznessapps.com on mobile layout, inspect element in Google Chrome and disable overflow-x: hidden from body and resize again, then you will find the white vertical stripe (padding) in the right side.
I had to add overflow-x:hidden to body to hide this, but not sure what causes this. Is there any other way than using overflow-x:hidden ?

So what you are doing with the overflow-x solution is a viable solution, but if you'd like to learn how to debug ghost elements, read below:
Basically, I debugged your site and saw that some of your sections (mainly ones in columns of 2 or 3, that float) extend past the wrapper's width. You can see this as well by inputting this into your CSS
*{
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
Scroll down and look for sections that extend past the main div, such as this:
Most of these are the results of a little extra margin or padding on the floated section.
Like I said, the width:100%; and overflow-x:hidden; is still a very common solution, this is just how to debug it if you'd like to fix the structure.
Hope this helps!

It's a scroll bar. Since the default behaviour for overflow is to add the scroll bar,
overflow-x: visible;
might be the correct way to go.

Scrollbar some times visible and shows like extra padding or margin in body hiding overflow-x will work.
html, body {
width: 100vw;
overflow-x: hidden;
}

Appending elements increases div's width visually

Whenever I append new element the div's width will increase. I want it to act as a static one. Why don't I just put it to static pixel value? Well I need to have it working on all monitors and resolutions. I need the width of 100% so it goes to the right border and after appending it acts as the static one letting me scroll through the div.
In JSFiddle I set the width to 50% so you can see how it acts(In real environment it will be 100%) Try clicking 10 or more times on Add Tab to see what's happening. After that change the width to static one to see how I want it to behave.
fiddle
Change this code:
.l_tabs {
height: 57px;
display: block;
width: 50%;
/*Changing this to px works as i want it to work but then i have screen resolution problems TRY to set the width to 500px to see*/
background: #474544 none repeat scroll 0 0;
overflow: hidden;
}

Bootstrap Accordion - Set to specific height

I have a bootstrap accordion that has a list a mile long, and I would like to set the OPENED height to roughly 200px. When I do this in the CSS, the accordion opens, but to full height, THEN sets to the 200px after it has been opened.
I attempted to style not only the collapse class, but the collapsing and collapse in classes, and all that does is have the accordion pop open with no animation.
CSS:
.collapse.in, .collapse{
height: 200px;
overflow-y: scroll;
}
Where do I need to set the height so that the accordion only opens to 200px and stops the animation at 200px?
Example: http://jsfiddle.net/murphy1976/c8nw2jmo/1/

The content height of the to-be-opened page is bigger. Bootstrap accordion is build to display all.
If you make the wrapping html element a fixed height, it works, as demonstrated in the updated fiddle
<form id="max200">
#max200 {
height: 200px;
overflow-y: scroll;
}

Never mind. I was styling the wrong element.
A HEADS UP for anyone who wants to do this. Style the WELL, the accordion will automatically take the height of it's contents. If you set the .well to a specific height, the collapse animation will ease smoothly to the desired height.
see jFiddle example to see where I placed the .well, and then modify your CSS to your taste.

try this and also i have edit your jsfiddle example
check that i am sure it will work fine
.collapse.in, .collapse{
height: 200px;
overflow-y: scroll;
max-height:200px;
}
#instrument.collapsing{
max-height:200px;
}

Bootstrap v. 4.5.0. Please check for the older versions too.
This does the job.
.collapse,
.collapsing {
overflow: auto;
max-height: 50vh;
}
.collapsing is added when the transition of the accordian starts, and removed when it finishes

Why does css transition occur upon revealing an element, but doesn't upon hiding?

Long story short - check the question title :)
I'm working on a nav for my project, and recently I've encountered a strange error. Here's a little background:
I want some custom animated hide/reveal behavior implemented, so simply using jQuery 1.10 show() and hide() methods won't suffice: I'm toggling a class on the element in question.
The class I toggle is called .hidden. It's used along with the class .toReveal to avoid having to set overflow:hidden; to each of the items I want revealed. I've also mentioned I'm going for animated hide/reveal behavior, so I'll provide the relevant CSS:
*{-webkit-transition:0.3s all;-moz-transition:0.3s all;}
.hidden, .hidden * {
padding-top:0 !important;
padding-bottom:0 !important;
margin-top:0 !important;
margin-bottom:0 !important;
height:0 !important;
border-top-width:0 !important;
border-bottom-width:0 !important;
}
.toReveal, .toReveal * { overflow:hidden; height:auto; }
So the experience I get is rather strange: when I expand the hidden element - the transition is going as planned. But when I try to hide the element - the transition doesn't happen.
I've found little traces of what's actually causing the trouble: if I remove height:0 !important; line from the code - the transition does happen, but the element doesn't collapse, while collapsing is the whole point of this :)
Here's a jsFiddle to the simplified prototype: http://jsfiddle.net/KCAHe/
Steps to see the desired behavior:
Click on dev/local
Advanced button will appear: click on sandbox
Steps to reproduce the issue:
Click on dev/local Keep clicking on Advanced

Option 1:
Generally animating/transitioning from 0 to auto does not work. Changing the height from auto to some fixed value for the .toReveal CSS class will fix the issue.
.toReveal{
overflow: hidden;
height: 30px; /* set height such that it is big enough to accomodate its contents.*/
}
.toReveal * {
overflow: hidden;
height: auto;
}
Note: The transition part from height: 0 to height: auto is already working for you by using Option 2. But you might want to have a look at this article also.
Option 2: (used by OP based on feedback to comments)
Remove the overflow: hidden and it seems to fix the issue.
Also, as you have mentioned in the OP comment, adding display: block will make it slide from top because <input> is inline by default.
Modified CSS
.toReveal, .toReveal * {
display: block;
height: auto;
}
Working Fiddle
Alternatively, adding overflow: visible !important; to the .hidden, .hidden * CSS also seems to work.

overflow-x: hidden; overflow-y: inherit

I have a div (id="c_content) which I want to expand vertically depending on how long the content is without displaying the contents which overflow horizontally.
I am using the following code at the moment and it doesn't seem to work:-
#c_content {
min-height: 645px;
max-height: 2000px;
overflow-y: inherit; overflow-x: hidden;
}
When I use the above code, the content which overflows vertically is hidden. What should happen is, the div should expand vertically in order to show the content. But that doesn't seem to happen.
edit: when I set overflow-y: visible; instead of overflow-y: inherit;, I get a scroll bar for y axis (http://prntscr.com/108wsm) - still not what I wanted.
I would like to know if there is any way to fix this even if I have to user another code like Java or Jquery

Use cross browser min-height trick .. It will expand div when necessary.
#c_content {
min-height: 645px;
height:auto !important;
height: 645px;
max-height:2000px;
}

inherit is not a valid value for the overflow-y property. Try setting it to overflow-y:visible;