I just tried chosen and in my initial tests (FF) worked fine, but now checking in another browsers is not.
In Firefox, Explorer, Edge is showing fine but in Opera or Chrome doesn't show anything, nor is clickable but inspecting the source, the list elements are present.
I see the sample page in chrome and is working, so, something is wrong on my side but I am not able to even start to look at it. Any advise is welcome.
Versions: (doesn't work)
Chrome: 44.0.2403.157
Opera: 12:16 (1860)
Version working:
Firefox 40.0.3
IE: 11.0.9600.17937
Jquery: 1.6.4 (downloaded yesterday and served locally, not in the CDN)
Chosen 1.4.2 (downloaded yesterday)
You can see in the image the behavior. IN FF, IE the drop down shows the countries as expected.
You can try this now in http://eventos.ai.org.mx/encuentro/registration.php and you can get the files if you need.
Also is the same screen in FF.
Thanks for your time and any help,
In your stylesheet chosen.css on row 160 there is a defined class .chosen-container .chosen-results. Add a floating property to the class:
.chosen-container .chosen-results {
color: #444;
position: relative;
overflow-x: hidden;
overflow-y: auto;
margin: 0 4px 4px 0;
padding: 0 0 0 4px;
max-height: 287px;
-webkit-overflow-scrolling: touch;
float: left;
width: 99%;
}
float: left; will push it to the place.
width: 99%; will set the correct width for every row.
Related
Below are some images of the form which I want to show a dialogue over, and want to blur the background. This works fine on other browsers but in Chrome Version 62.0.3202.94 (Official Build) (64-bit) It is creating problems
Here is the layout and the checkbox,
Its a toggle button to change size input fields
Here is the css for the checkbox
opacity: 0;
padding: 0;
position: absolute;
margin-top: -999999999px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
After applying the blur filter my form is emptied.
Just writing here for the question, I found that the margin-top: -99999999px is quite a big number and when I changed it to margin-top: -999999px it worked.
I was about to ask why my elements are not visible on the page, but as I already have fix it, I want to know the reason for it and to put this question here for other developers.
For me, the issue was with a checkbox positioned absolute and having very high negative margin top. Lowered the number and it is fixed.
I installed the Ubermenu plugin on my site here:
aep.gov.tr
The widths of the menu items are too wide. Therefore the menu does not fit into its container as shown here:
How can I make the width of the menu items narrower?
This is more of a CSS question / issue than related to Wordpress. Your main problem is this right here on line 36 of your style.css:
.navigation ul li a{display:block; float:left; color:#666; text-decoration:none; padding:15px 0 0 0; height:28px; width:130px;}
You need to remove the width property of your <li> tag here. This will bring your menu up on one line.
So what you will have is this instead:
.navigation ul li a{display:block; float:left; color:#666; text-decoration:none; padding:15px 0 0 0; height:28px;}
I would suggest playing around with your width properties and your height properties to force the menu to look right. Another suggestion is to use Firebug for Firefox or for Google Chrome to help debug CSS issues. It helps you find them fast.
Go to admin.css file and note that you may loose your warranty, change the following:
#megaMenu.megaFullWidth
{
width:100%;
}
to
#megaMenu.megaFullWidth
{
width:auto;
}
Hope it will help.
I'm trying to animate a DIV using CSS3 transitions. The example DIV is:
HTML:
<div class="element"></div>
CSS:
.element {
-webkit-transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 2s linear, width 2s linear;
position: absolute;
left: 100px; top: 100px;
height: 10px; width: 50px;
background-color: black;
}
This means that the DIV occupies a region in its container from (100px, 100px) to (150px, 110px) - and the right edge is fixed at 150px.
I would like the DIV to maintain a static right edge at 150px whilst I translate the left edge off the screen, so I've been applying (via Javascript) a transition class to the DIV like so:
CSS:
.transition {
-webkit-transform: translate3d(-200px, 0, 0);
width: 150px;
}
The issue that I'm seeing is that the transition on the width does not keep up with the left edge of the translated DIV, so instead of increasing uniformly in size and left position, the right edge position fluctuates as the DIV slides off at a different rate, flickering slightly (depends on platform how much it flickers).
The issue occurs more vividly on Mobile Safari (a Phonegap webview on the iPhone is my main development platform), rather than on Chrome.
I've put a JSFiddle at http://jsfiddle.net/XwuBz/ which demos it (view it on an iPhone to see it occurring).
Is there another way to achieve this end result?
Thanks in advance,
Dan
Well, it seems that iOS Safari has some weird issues with transitions / transform.
I tried to achieve the same results with jQuery only, and it worked on iPhone 4s, iOS6:
$('.element').animate({left:'-=200','width':'+=200'},2000);
Here is a demo.
How can I insert a new div (not in .js) into fancybox (when fancybox - image is open)? Like this:
I'm also try to make a div css to fit that description :)) still with no avail. I suck at css styling, will get back on this one when i figured it out. my theory is that it should be a div within a div within the div if you get what i mean :))
!!!!!!!!
UPDATE I tried messing around the css and this is what i got (I'm using 1.3.4v for simplicity's sake in my part) and for reference, these images and codes I used are found in the 1.3.4 demo packege from fancybox.net
If I didn't explain my code well, it just means I'm still working on it so I just hope you get why it is vague, but the point is it's doable and you only need to work out the css file. I hope someone has a nicer looking code
Output:
1.I all of these from jquery.fancybox-1.3.4.css
just change these 1 2 3 and mess around with example7 there in the demo
#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
padding-right:50%; /*this part extends the right side of the photo so it would look like thet're on the same page*/
}
2.This re-positions the original title to the upper right part of the image
.fancybox-title-inside {
padding-bottom: 10px;
text-align: left;
color: #333;
position: absolute;
top:0;
left:65%;
border:1px solid black;/*for you to see how large the div is*/
height:100%;
}
3.My new RED div where I will be
div.fancycontent{ /*saviour do word wrap here*/
border:1px solid black;
padding:2px;
color: #333;
background: #FF0000;
width:50%;
height: 100px;
}
I tried using fancybox in one of my projects but had to revert back to implementing my own popup's using the DIV elements. Its pretty easy to create your own popups instead of using fancybox or facebox if you know a bit of JQuery try to have a look at these links. You can customize your div tags to contain what ever you need.
output
source
In your fancybox JS, set the type to iframe:
$(document).ready(function() {
$('.callout').fancybox({
type: 'iframe',
width: '640px',
height: '480px',
});
});
Then you can open up anything you want in the fancybox by simply applying the class to your link:
<a class="callout" href="{path}">{link}</a>
If you have issues with the iframe display, you might try adding a secondary class to tell fancybox what type of content you are linking to (this is a new convention introduced in the latest version, so I don't know if I'd recommend using it by default):
<a class="callout callout.iframe" href="{path}">{link}</a>
Hope that helps!
ty
It just happened that I created this fancybox "a la" facebook demo that looks pretty much like what you want:
http://picssel.com/playground/jquery/fancyboxALAfacebook_26Mar12.html
So, facebooks somehow adds a 1px border to your appplication when using an iFrame.
Is there any way to get remove this?
I checked the source code, and it has frameborder="0"
My .php also contains:
html, body, iframe, div {
border: 0px;
margin: 0px;
padding: 0px;
}
what to do?
(or do I just have to live with only having 748 px?)
I found out it was because I was using some old setting for embedding my app. This setting is no longer available, so this is of no use anymore!
anyway, the facebook frame code has a bug, it should use frameBorder="0" instead of frameborder (note the capital B, needed for it to work in ie7 and below)