html - CSS padding and margin not working? -


for reason padding , margin css aren't working

.optinfield {          width: 100%;          padding: 12px 20px;          margin: 8px 0;          border: 1px solid #ccc;          border-radius: 4px;          box-sizing: border-box;          display: inline-block;      }
<div class="row clearfix" data-mode="optin">        <div class="column full" >          <div class="margin-20" style="text-align: center;">             <form accept-charset="utf-8" id="optin-form" action="http://localhost:3000/landing_pages/optin" method="post">                <input id="optin-external-id" name="optin_external_id" type="hidden" value="{optin_external_id}">                <input id="optin-tags" class="optinfield" name="tags" type="hidden" value="">              <input id="optin-redirect-url" name="redirect_url" type="hidden" value="http://">              <input id="optin-from-url" name="from_url" type="hidden">                <input id="optin-first-name" class="optinfield" name="contact[first_name]" placeholder="first name" required="required" type="text" >              <br>              <input id="optin-last-name" class="optinfield" name="contact[last_name]" placeholder="last name" required="required" type="text">              <br>              <input id="optin-email" class="optinfield" name="contact[email]" placeholder="email" required="required" type="email" >              <br>                            <div style="margin:1em 0 2.5em;">                <input class="btn btn-primary full-width" id="optin-submit" name="commit" title="add me list." type="submit" value="submit">                <br>              </div>            </form>              <script type="text/javascript">              document.getelementbyid("optin-submit").addeventlistener("click", function(clickevent) {                document.getelementbyid("optin-from-url").value = window.location.href              });            </script>          </div>        </div>      </div>

i have read in few questions if set display: inline-block; should work me still not work.

am missing something?

edit: looks enter image description here

and should enter image description here

seems work fine. expect?

document.getelementbyid("optin-submit").addeventlistener("click", function(clickevent) {    document.getelementbyid("optin-from-url").value = window.location.href  });
.optinfield {    width: 100%;    padding: 12px 20px;    margin: 8px 0;    border: 1px solid #ccc;    border-radius: 4px;    box-sizing: border-box;    display: inline-block;  }
<div class="row clearfix" data-mode="optin">    <div class="column full">      <div class="margin-20" style="text-align: center;">        <form accept-charset="utf-8" id="optin-form" action="http://localhost:3000/landing_pages/optin" method="post">            <input id="optin-external-id" name="optin_external_id" type="hidden" value="{optin_external_id}">            <input id="optin-tags" class="optinfield" name="tags" type="hidden" value="">          <input id="optin-redirect-url" name="redirect_url" type="hidden" value="http://">          <input id="optin-from-url" name="from_url" type="hidden">            <input id="optin-first-name" class="optinfield" name="contact[first_name]" placeholder="first name" required="required" type="text">          <br>          <input id="optin-last-name" class="optinfield" name="contact[last_name]" placeholder="last name" required="required" type="text">          <br>          <input id="optin-email" class="optinfield" name="contact[email]" placeholder="email" required="required" type="email">          <br>            <div style="margin:1em 0 2.5em;">            <input class="btn btn-primary full-width" id="optin-submit" name="commit" title="add me list." type="submit" value="submit">            <br>          </div>        </form>      </div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more