Copy link to clipboard
Copied
I have made this MuCow widget:
<?xml version="1.0" encoding="UTF-8"?>
<HTMLWidget name="Form" formatNumber="6" localization="none" creator="Ananya Mangwani" defaultWidth="250" defaultHeight="50" isResizable="true" minWidth="50" minHeight="50" supportedSizePolicies="fixed,fluidWidth,fluidWidthHeight,browserWidth" maxHeight="50">
<pageItemHTML>
<![CDATA[<div class="form"> <form class="form-inline" action="https://app.99inbound.com/api/e/oAqXPKz_" method="post">
<label>
E-mail:
<input id="e-mail" name="E-mail" type="email" required/>
</label>
<input type="submit" value="Update">
</form>]]>
</pageItemHTML>
</HTMLWidget>
Yeah, it's a very basic HTML form tht's just collecting users' e-mail address. I know I could have added that code as an HTML object, but, I want it's height to be 50px only. Muse is generating previews and it's loading the cookie consent from my <head> which is changing the 50px height that I'm setting to 68px or 70px. If anyone knows how to turn these previews off, my problem would be easily solved. So, to overcome this problem, I had to create the MuCow widget.
Now, I have 4 breakpoints: 1200px. (expandable), 960px., 770px. and 420px. (min. width is 320px.). The widget is loading and working fine in the 961-1200px.+ breakpoint, however, as soon as I touch 960px. and below, the webpage hides all the text and other elements from it and displays only the imager resized to their original size, that too all aligned vertically in the left. The webpage stays in the same layout even if I then resize my browser to 961px.+. The only way out of this is to set my browser width to 961px.+ and refresh the page, however, that doesn't solve the problem of the breakpoints below that.
That's how it's looking. The problem goes away when I delete the MuCow widget.
This is the CSS styling for the widget in my A-Master page's <head>:
<style>
input[type=email]
{
padding: 10px 10px;
margin: 25px 0px;
box-sizing: border-box;
}
input[type=submit]
{
background-color: #000000;
border: none;
color: white;
padding: 10px 10px;
text-decoration: none;
margin: 25px 0px;
cursor: pointer;
}
.form
{
float: right;
}
</style>
This is the cookie consent again in my A-Master page's <head>:
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#000"
},
"button": {
"background": "#f1d600"
}
},
"theme": "edgeless",
"content": {
"message": "Broken Hearts' website and app stores cookies on your device. ",
"dismiss": "Got it.",
"link": "Why?",
"href": "https://www.brokenhearts.ml/privacy-policy.html"
}
})});
</script>
Can anyone point why this is happening? As I said before, disabling the preview in Muse's Design mode can help me already, but, I can't find such an option. Thus, can someone left me know what's wrong with the MuCow widget?
Just so everyone knows, there's another MuCow widget on the same page but that's not creating any issues. I had to create it also because of the same preview thing. I wanted its height to be just 16px., but, it was being rezised to 68px. automatically.
This is the other MuCow widget:
<?xml version="1.0" encoding="UTF-8"?>
<HTMLWidget name="OneSignal" formatNumber="6" localization="none" creator="Ananya Mangwani" defaultWidth="100" defaultHeight="16" isResizable="true" minWidth="50" minHeight="16" supportedSizePolicies="fixed,fluidWidth,fluidWidthHeight,browserWidth">
<pageItemHTML>
<![CDATA[<center><a href="#" id="notification-button" style="display: none;">Subscribe</a>
<script>
function onManageWebPushSubscriptionButtonClicked(event) {
getSubscriptionState().then(function(state) {
if (state.isPushEnabled) {
OneSignal.setSubscription(false);
} else {
if (state.isOptedOut) {
OneSignal.setSubscription(true);
} else {
OneSignal.registerForPushNotifications();
}
}
});
event.preventDefault();
}
function updateMangeWebPushSubscriptionButton(buttonSelector) {
var hideWhenSubscribed = false;
var subscribeText = "Subscribe";
var unsubscribeText = "Unsubscribe";
getSubscriptionState().then(function(state) {
var buttonText = !state.isPushEnabled || state.isOptedOut ? subscribeText : unsubscribeText;
var element = document.querySelector(buttonSelector);
if (element === null) {
return;
}
element.removeEventListener('click', onManageWebPushSubscriptionButtonClicked);
element.addEventListener('click', onManageWebPushSubscriptionButtonClicked);
element.textContent = buttonText;
if (state.hideWhenSubscribed && state.isPushEnabled) {
element.style.display = "none";
} else {
element.style.display = "";
}
});
}
function getSubscriptionState() {
return Promise.all([
OneSignal.isPushNotificationsEnabled(),
OneSignal.isOptedOut()
]).then(function(result) {
var isPushEnabled = result[0];
var isOptedOut = result[1];
return {
isPushEnabled: isPushEnabled,
isOptedOut: isOptedOut
};
});
}
var OneSignal = OneSignal || [];
var buttonSelector = "#notification-button";
OneSignal.push(function() {
if (!OneSignal.isPushNotificationsSupported()) {
return;
}
updateMangeWebPushSubscriptionButton(buttonSelector);
OneSignal.on("subscriptionChange", function(isSubscribed) {
updateMangeWebPushSubscriptionButton(buttonSelector);
});
});
</script>]]>
</pageItemHTML>
</HTMLWidget>
Copy link to clipboard
Copied
Unfortunately, there's no way to disable previews in design mode and it varies, depending on your default browser, which Muse uses to render the page items. One thing I did notice is you don't have a closing div tag on your form wrapper. That might explain some things.
I hope this helps,
David
Creative Muse
Copy link to clipboard
Copied
Oh, yeah! That seems to have fixed it! Thanks for pointing it out. It's odd
that at first, I had tried without writing
at all and it still wasn't
working. However, adding the
worked!