I have a block in my MailChimp email template something like this:
Latest news
[Introductory text]
[Repeatable news item]
[Link to all news on site]
The whole block is set to be mc:hideable, and the news item uses mc:repeatable.
The problem is that when I hover over the area inside the block but outside the news item, I see the eye icon to hide the whole block - it appears in the middle, over the news item. But when I move to click it, the news item's edit / repeat control appear and the block's hideable icon disappears!
Am I missing something? The only workaround I can think of at the moment is creating 3 blocks, the heading / intro (hideable), and the news item (repeatable, presumably that can be hidden by removing the default item), and the link. They'll each need the same background colour and to fit flush together to look like one block, and in order to hide the lot editors will have to remember to hide each part. Seems a bit long-winded.
Infuriating isn't it? Which is why I hacked Chimps own CSS by adding this to my template style tag CSS:
.tpl-hidewrap { left:auto !important; right:0 !important; }
Of course you could add different CSS to position it to suit your template, but it certainly worked for me, as the area to be hidden was wider than the repeating area.
Humans 1 Chimps 0 :)
KevAdamson's answer was a good starting point for me. I had to go one step further though:
.tpl-hidewrap {
left: 0 !important;
right: 0 !important;
display: block !important;
height: 100px !important;
text-align: center;
}
Related
I have a html panel and i want to add the html panel to browser screen hence i used rootPanel.get().add(htmlPanel);. But their is a extra space between the starting of the screen and the first widget in html panel (As in image). I tried with setting rootPanel.get().setheight("100%") and rootPanel.get().setsize("100%","100%") but it doesn't seem to work please help i want to remove the extra space and so that the widget starts from beginning.
This padding is added by GWT Bootstrap for its NavBar widget. See the note in the javadoc:
NOTE: We assume that most people will use the ResponsiveNavbar, so, we automatically add a padding-top: 50px in body.If you don't want this, you have to put a padding-top: 0px; manually in your document body tag.
See also https://github.com/gwtbootstrap/gwt-bootstrap/issues/120
I'm using Twenty Eleven theme of Wordpress.
In other themes, there is no problem but in twenty eleven there is a problem with Facebook like button's comments popup window. it's half shown. when I click "Like" button, the view is like below:
http://i.stack.imgur.com/Hgawi.png
I use Facebook plugin for Wordpress. How can I fix this problem?
Thank you so much for your help!
It's a bug in Twenty Eleven (and a few other themes, probably copy-pasted). Open your style.css and look for:
embed,
iframe,
object {
max-width: 100%;
width: 100%;
}
If you remove the max-width line, it should work! Maybe there's a more elegant solution but honestly, I don't know why the size of an iframe should always be limited to its container (in this case the FB button).
Maybe thats a better way of doing it!
Put a class on your Facebook Like Button div, in this case I used "fb-like" class.
.fb-like iframe,
.fb_iframe_widget iframe {
max-width: none;
}
Looking/testing for a lot of solutions I found one that hides the comment window (source here: https://stackoverflow.com/a/12829375/3687838 ) and then I wrote one that shows the window without being displayed in half. I'm not a programmer but from my small experience from tweaking wordpress plugins I came up with this ideea:
.fb-like {
z-index: 200;
position: absolute;
}
Copy/Paste it in your Custom CSS theme file. The z-index value can be changer even to 10000 if you want your window to be on top of everything.
If you want to hide the comment window, use the solution provided in the link above with a value of 27px instead of 20px.
I have two tricky issues that are intertwined. I have an inset box shadow vignette on four sides of a box but I have clickable images inside that I can’t click because the shadow/vignette is above the images (which are at z-index: -1). I read some about using the pointer-events: none but I think it is affecting everything in the box when I try to use it so it hasn’t worked. Any suggestions on how to make these images clickable but still behind the shadow?
Also, I’ve read through previous posts about scrolling speed with the box shadows. I’ve made it as small as possible but has anyone figured out how to make that go faster yet? I really like the look but the functionality doesn’t work if the scroll is going to be so slow.
Here are links to the site as constructed so far.
http://www.official-design.com/TEST_PROJECT.html
http://www.official-design.com/TEST_GRID.html
Please be nice – I am a novice at this – I’m an architect not a web designer. Any advice would be greatly appreciated.
Why do you have z-index: -1 for the links? Remove that and the links work fine, and the shadow is still visible.
I would also recommend applying the box shadow to the img or a elements directly, rather than the td that contains them.
Removing the negative z-index won't work with inset shadows. There are 3 things to do to achieve what you need:
Remove superfluous float: left from #makeMeScrollable
div.scrollableArea img rule. This is to ensure that the <a>
element wraps the image properly.
Remove box-shadow properties from .SHADOW rule.
Add the following CSS for your links:
.SHADOW a {
display: block;
-webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
}
Note that I've used rgba value instead of #ccc, since the shadow will be overlaid on the image.
As a side note, there is no need to name classes in all caps. It decreases the readability.
I need to make a alert box or dialog box when popup it lock the back screen like a Modal type alert box. but this time i need in fbjs. or fbml any one can help me please...
One way to cheat this is to give the div a css attribute of position: absolute and align your div on top of your content, with a z-index of something higher than everything else on your page (typically, people use something like 100). This becomes your modal container, and within it you'll just want to mimmic/copy the styles of a typical FB modal window.
Also, create another div at the top or bottom of your content, and give it css properties of position: absolute; width: 100%; height: 100%; background: #000; opacity: .5; z-index: 50 (make sure z-index is less than your modal container). This is your overlay, which blocks the content of the page from being interacted with until the user does something with your modal.
I would suggest going about the solution this way because like #dragonjet pointed out, FBML is deprecated, and you can't create new FBML applications anymore. Without FBML there is no FBJS.
I have some elements in my iPhone website that don't have any text in them but require the user to click and hold on them (DIVs). This causes the text-highlighting/editing loop/cursor to show up, which is really distracting.
I know there is a CSS rule for removing the black-box that shows up on clickable elements when they are touched. Is there anything like that to disable the text magnifier?
Just got a response from the Developer Center help desk. I needed to add this CSS rule:
-webkit-user-select: none;
Add this to the CSS
body {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */}
Use these CSS rules:
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
This is also useful in protecting content that you don't want copied or saved, such as an image:
#yourdiv img {-webkit-touch-callout: none; }
This solved it for me, in JS:
document.getElementsByTagName("body")[0].addEventListener("touchstart",
function(e) { e.returnValue = false });
Seems to bypass whatever the OS has in there to catch the touch.
I found this out while trying it out myself. First of all you have to add this rule to the enclosing element:
-webkit-user-select: none;
But that, by itself, is not enough on the iPhone. It turns out that the magnifying glass can still appear because, for example, a parent element would accept selection, or just because it feels like it.
However, I then discovered something cool - if your element adds a touchend and click handler to an element, then Apple's Safari finally avoids the annoying code path that causes the magnifying glass to appear, probably realizing that this element is meant for some UI interaction, and not selecting text. On an equally awesome note, if you do this on elements near the top of the screen, it will also cancel the appearance of the navigation in landscape mode! Not sure however how to cancel the appearance of navigation when clicking on elements on the bottom, does anyone have a solution for that one?
On IOS 15.2 -webkit-user-select: none; fixed the issue, but only partially.
A long press doesn't show the magnifier anymore. However, if you double-tap and hold, it magically still appears.
There is still no 100% reliable way except event.preventDefault on touchstart. But this also blocks underlying actions so things like buttons with long-press tooltips break. Therefore, it is not always an option...