Javascript Chosen PlugIn with Grid System - javascript

I have implemented the Chosen Plug-in on my web page and it worked great. Recently I decided to switch over to the 960 grid system to give my page a facelift. When I did this though, the styles in the Chosen Plug-in seem to be messing with the grid system causing the outlines on the grid to go off of the screen to the left. I have a feeling this has to do something with how the grid is floated relatively and the styles in the plug in are just throwing it off. However, I can't seem to find what exactly in the styles that is causing this or how I can change it. Has anyone had any experience with this plug in who might be able to give me advice? I would rather not have to strip this plug in, since functionally, it works great!
EDIT: Although, when I click on the drop down, the styles seem to look right. It is only when the drop down items are not showing.

Figured this one out.
I had to change the CSS property of the dropdown to display: none instead of absolute positioning -99999px left.
Here is my code:
.chzn-container .chzn-drop {
width: 100% !important;
display: none;
background: #f6fbfd;
border: 1px solid #9fbeca;
border-top: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 900;
width: 100% !important; /*to line up the right side visually*/
-moz-box-sizing : border-box;
-ms-box-sizing : border-box;
-webkit-box-sizing: border-box;
-khtml-box-sizing : border-box;
box-sizing: border-box;
Then I just set the value to inline here:
.chzn-container.chzn-with-drop .chzn-drop {
left: 0;
display: inline;
}

Related

html page not full width on google dev tool device toolbar

I am trying to make my website responsive with mobile phones but for some reason when the screen gets small enough there is whitespace on the right side of the phone in which the html page is not the full width, ive tried adding css which include :
html
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-width: fit-content;
position: absolute;
}
but currently the page looks like this:
https://i.stack.imgur.com/Axz5O.png
any idea how to fix this?
It's hard to tell without knowing all child elements.
You can try adding an outline to all tags like
* {
outline: 1px solid green;
}
and check which element is overflowing

Can't change content and sidebar width

I am trying to change content and sidebar width of my site http://www.howto-connect.com/. Unfortunately, I can't get a positive result. You can laugh at this simple question. But after making changes in CSS is not giving output. Thanks in advance for a help.
Have you tried to delete cache?
If you have a cache plugin on your site, try to delete cache and you can reload your browser without cache as well.
I had a look and it is #sidebar-container { width: 38%; position: relative; }
Answering "I want more space between sidebar and content and decrease the sidebar width"
Your #content is 70%, and #sidebar-container is 30%. Change these to how wide you need the sidebar, then add this css to your #content:
padding-right: 40px;
box-sizing: border-box;
Changing the 40px to how much "more space between sidebar and content" you need.
You can paste this css in your stylesheet
#content {
width: 69%;
}
#sidebar-container {
margin-left: 22px;
width: 28%;
}
If still does not work for you then use ! important like that.
#sidebar-container {
margin-left: 22px !important;
width: 28% !important;
}
It will prioritise your css.

How to keep autoresize textarea text away from the very bottom of screen?

I'm trying to create a 100px gap between a textarea that autoresizes using this js library autosize and the very bottom of the screen.
The demo from the link showcases this problem. Once you hit the bottom of the screen there is no space between the text and the window.
Cant seem to find any solutions and margins and paddings dont seem to fix this. Any help appreciated thanks.
An important note is that, in order to work, the script below needs flow-content after the <textarea> element worth of 100px in height. If it doesn't have it, it can't scroll there, so it doesn't work. I provided this scroll-space by setting a padding-bottom:100px on <body> but if you have enough content after your <textarea> to provide the 100px of scroll space, that padding is not necessary. Actually, all of the CSS is there mostly to demonstrate the principle, you shouldn't add it to your project.
The solution is provided by the javascript part.
Another note would be that this is not a fully-working-fit-all-copy-paste-ultimate-solution, but rather a delicate-proof-of-concept. It's up to you to understand what it does and alter it so it works for your specific case. If you have any trouble applying it, just ask/provide details.
And, as a final note, I only added jQuery to it after trying to get scrollTo animated in vanilla without much success. In the end I didn't want to lose more time so just used jQuery.animate(). If you don't need to smooth-scroll to position or if you know how to do it in vanilla, jQuery should be removed altogether (as autosizer is stand-alone too). So, if you need/want it, I could provide a jQuery free non-animated solution.
Here it is:
autosize(document.querySelectorAll('textarea'));
$('textarea').each(function(){
autosize(this);
}).on('autosize:resized', function(){
let fromBottom = $(window).height() - this.clientHeight;
if (fromBottom < 102) {
$('html, body').stop().animate({
scrollTop:(102 - fromBottom) + 'px'
}, 210);
}
});
textarea {
width: 80%;
margin-left: 10%;
}
body {
padding-bottom: 100px;
margin: 0;
min-height: 100vh;
box-sizing: border-box;
}
body::before {
left: 0;
width: 100%;
position: fixed;
bottom: 100px;
content: '';
display: block;
border-bottom: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.20/autosize.min.js"></script>
<textarea>test textarea</textarea>

How to create gutters between pages in a fluid-width carousel?

I'm creating a custom carousel for my current project. Here's a simplified version (only tested in Chrome/Mac):
http://codepen.io/troywarr/pen/LpQzbv
Note that when the carousel scrolls, you can see that each page (1-5) butts up flush against its neighbor on the left and right sides (looking like a single double-thick border). I'd like to add a 5px-wide gutter between the left and right borders of each page so that the borders don't touch.
However, since this is a fluid-width carousel, this has proven to be more difficult than expected.
I need to support IE9+, so I can't rely on calc() values or CSS animations; I'd probably need to do this via jQuery .animate(), but when the horizontal position to which I'm animating is basically 100% + 5px, I can't figure out how to express that in code.
How would I go about that? Is there, perhaps, another clever way to set up the carousel that allows me to use margins, padding, table cell padding, etc. to my benefit? Or, any other ideas? I've played around with different approaches for a couple of hours and I'm running out of ideas.
UPDATE:
Just to clarify what I mean by "gutter" - I'd like there to be a 5px empty gap between the left and right sides of each page in the carousel. Each page should retain its own borders, but there should be empty whitespace between them (only noticeable on scroll). Here's an example that uses calc() and CSS transitions to do exactly what I want (only tested in Chrome):
http://codepen.io/troywarr/pen/GpQYPj
I just need to find a comparable solution that is compatible with IE9+ (which calc() and CSS animations are not).
Applying border-box to everything will allow you to add paddings without breaking the layout.
// See an explanation here:
// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
EDIT:
Sorry, you were already doing this. Here is my take on it:
.window {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
// Add these two rules
// The idea is to make a static frame, except for the right column
// which is the one being repainted.
border: 5px solid #666;
border-right: 0;
}
...
.slider li {
float: left;
width: 20%;
height: 100%;
background-color: #ccc;
display: table;
border-right: 5px solid #666; // <- Paint the right column only
}

Fix 'AddThis' plugin 'more layer' floating

I have implemented AddThis plugin in my website, however, when I resize the browser's width and before it hits the #meduim screen style the more layer get displayed in a wrong floating position.
I snapped this css from their out of the box implementation
element.style
{
z-index: 1000000;
position: absolute;
visibility: visible;
top: 681px;
left: 753px;
display: none;
}
#at15s.atm
{
background: none!important;
padding: 0!important;
width: 160px!important;
}
I do reference this js file provided by them, and it takes care of the css I guess. What css should I share with you guys to get familiar with this problem so you may give me suggestions for the floating problem?
I just had the same problem and i added this little css to my page and now the more-layer opens up to the left instead to the right.
You should then try to reset these style´s in your media queries for smaller screens.
#at15s.atm {
left:auto !important;
right:0 !important;
}

Categories

Resources