Highlighted

Prevent Muse from creating a <div>

Explorer ,
Aug 10, 2018

Copy link to clipboard

Copied

I'm using a MuCow widget:

<?xml version="1.0" encoding="UTF-8"?>

<HTMLWidget name="Form" formatNumber="6" localization="none" creator="Ananya Mangwani" defaultWidth="250" defaultHeight="36" isResizable="true" minWidth="50" minHeight="36" supportedSizePolicies="fixed,fluidWidth,fluidWidthHeight,browserWidth" maxHeight="36">

<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></div>]]>

</pageItemHTML>

</HTMLWidget>

and this is the CSS for it:

<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 {

vertical-align: top;

    float: right;

}

@media screen and (max-width: 420px)

{

   .form

{

        float: none;

vertical-align: top;

display:table;

        margin: 0 auto;

   }

}

</style>

The problem is, I want the height of the form to be just 36px so that I can manage the spacing between the form and the text. However, when I publish to check the changes (or even in preview mode), I can notice a lot of space around the <div>. I checked using this Google Chrome extension: Page Ruler - Chrome Web Store  with its Element mode on (the top left - blue button as shown in the screenshot), I am not seeing the height as 86px of the <div>. So, I checked in the Developer tools which is showing me a parent <div> on top of my MuCow widget.

So, my question is, how can I remove that extra space around the form?

TOPICS
Mucow development

Views

387

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Prevent Muse from creating a <div>

Explorer ,
Aug 10, 2018

Copy link to clipboard

Copied

I'm using a MuCow widget:

<?xml version="1.0" encoding="UTF-8"?>

<HTMLWidget name="Form" formatNumber="6" localization="none" creator="Ananya Mangwani" defaultWidth="250" defaultHeight="36" isResizable="true" minWidth="50" minHeight="36" supportedSizePolicies="fixed,fluidWidth,fluidWidthHeight,browserWidth" maxHeight="36">

<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></div>]]>

</pageItemHTML>

</HTMLWidget>

and this is the CSS for it:

<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 {

vertical-align: top;

    float: right;

}

@media screen and (max-width: 420px)

{

   .form

{

        float: none;

vertical-align: top;

display:table;

        margin: 0 auto;

   }

}

</style>

The problem is, I want the height of the form to be just 36px so that I can manage the spacing between the form and the text. However, when I publish to check the changes (or even in preview mode), I can notice a lot of space around the <div>. I checked using this Google Chrome extension: Page Ruler - Chrome Web Store  with its Element mode on (the top left - blue button as shown in the screenshot), I am not seeing the height as 86px of the <div>. So, I checked in the Developer tools which is showing me a parent <div> on top of my MuCow widget.

So, my question is, how can I remove that extra space around the form?

TOPICS
Mucow development

Views

388

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 10, 2018 0

Have something to add?

Join the conversation