I'm trying to center an entire embedded Mailchimp form in my nonprofit's Shopify but after trying a few things I'm not sure how to do this properly.
Code below:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:center; font:14px Helvetica,Arial,sans-serif; width:600px;}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://caffelena.us6.list-manage.com/subscribe/post?u=46238df01d2ba6f28a9a0f68d&id=e2eee316a5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe To Our Mailing List!</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; center: -5000px;" aria-hidden="true"><input type="text" name="b_46238df01d2ba6f28a9a0f68d_e2eee316a5" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Related
I am trying to resize the input field with Bulma. However, the input field stretches out across the entire screen width. Instead, I would like to center the user input with a width of say a quarter screen width.
Whatever size I enter in a div class, doesn't do anything, ie
<div class="is-size-3" >
or,
<input
class="input is-small"
size="5"
type="text"
v-model="enteredTask"
placeholder="name"
/>
Would appreciate any advice.
This is what I have:
Thanks
<template>
<section>
<form >
<div class="is-size-3" >
<div class="has-text-centered">
<h1 class="title is-3">User registration</h1>
<form class="box">
<div class="field">
<label class="label">Username</label>
<div class="control">
<input
class="input is-small"
size="5"
type="text"
v-model="enteredTask"
placeholder="name"
/>
<!-- #keyup.enter="enterUser" -->
</div>
</div>
<button class="button is-primary" #click="enterUser">OK</button>
<p v-if="enteredTask.length > 10">input is too long.</p>
</form>
</div>
</div>
</form>
</section>
</template>
Use the column system of bulma: https://bulma.io/documentation/columns/basics/
You could do something like this:
<div class="columns">
<div class="column is-4 is-offset-4">
<div class="field">
<div class="control">
<input class="input" type="text" />
</div>
</div>
</div>
</div>
I'm trying to get a full width button inside my materialize css card and I've achieved the following result so far.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
<div class="col s12">
<div class="card teal lighten-4">
<div class="card-content">
<article id="post-946650" class="post-946650 page type-page status-publish hentry">
<p><input id="id_func_calc" type="hidden" value="[[{"assign":["#_z"],"eval":"#y/#x"}]]">
</p>
<div class="mathquill-embedded-latex mathquill-rendered-math"><span class="text">Travel time(in minutes)</span>
<input id="x" class="oInp" size="3" type="text" autocomplete="off"><br>
<span class="text">Miles to destination</span> <input id="y" class="oInp" size="3" type="text"><br>
<span class="text">Avg speed</span> <input id="_z" class="oInp oOutp" disabled="disabled" size="3" type="text" style="width: 3em;">
</div>
<p><input class="clcbtn waves-effect waves-light btn col s12" type="button" value="Solve"></p>
</article>
</div>
</div>
</div>
</div>
But the issue is the button is not inside the card and only half. Any help is appreciated.
Add row to the 4th div which is with the class name card-content
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
<div class="col s12">
<div class="card teal lighten-4">
<div class="card-content row">
<article id="post-946650" class="post-946650 page type-page status-publish hentry">
<p><input id="id_func_calc" type="hidden" value="[[{"assign":["#_z"],"eval":"#y/#x"}]]"></p>
<div class="mathquill-embedded-latex mathquill-rendered-math">
<span class="text">Travel time(in minutes)</span>
<input id="x" class="oInp" size="3" type="text" autocomplete="off"/><br>
<span class="text">Miles to destination</span>
<input id="y" class="oInp" size="3" type="text"><br>
<span class="text">Avg speed</span>
<input id="_z" class="oInp oOutp" disabled="disabled" size="3" type="text" style="width: 3em;"><br>
<p><input class="clcbtn waves-effect waves-light btn col s12" type="button" value="Solve"></p>
</div>
</article>
</div>
</div>
</div>
</div>
I tried customizing the angular material forms field using ::ng-deep in my angular project the problem I am facing is css applied gets applied only I refresh the page or when I click on it.
I tried using ::ng-deep and tried to set the Encapsulation.None on my ts files.
<div class="input-row">
<div class="call-out-grt">
<div class="box">
<mat-label class="arrival">GRT-NRT-DWT</mat-label>
<div class="box-1">
<mat-form-field class="cranes" appearance="outline">
<input matInput type="text">
</mat-form-field>
</div>
<div class="box-1">
<mat-form-field class="cranes" appearance="outline">
<input matInput type="text">
</mat-form-field>
</div>
<div class="box-1">
<mat-form-field class="cranes" appearance="outline">
<input matInput type="text">
</mat-form-field>
</div>
</div>
</div>
<div class="call-out">
<mat-form-field class="flag-field">
<input matInput type="text" placeholder="Flag">
</mat-form-field>
</div>
<div class="call-out-date">
<mat-form-field class="flag-field">
<input matInput type="text" placeholder="Built Date">
</mat-form-field>
</div>
</div>
::ng-deep .cranes .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline {
width: 55px ;
height: 50px;
margin-left: 2px;
}
The form css should get applied without refreshing it
My form is to be capable of switching between view and edit modes. By default the form should display in view mode and when I click edit button the fields should be available for change. The form is working good between view and edit modes as expected, but in view mode the span element (for display value) is misaligned with the label, I mean the span element's value is displaying a bit higher to the horizontal line of the label.
Below is a piece of code from my form:
div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<span class="control-label" *ngIf="!editMode">{{model.name}</span>
<div class="col-sm-6" *ngIf="editMode">
<input class="form-control" type="text" name="name" [(ngModel)]="model.name" />
</div>
</div>
</form>
</div>
Use a form static control instead of a <span> element:
div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6" *ngIf="editMode">
<p class="form-control-static" *ngIf="!editMode">{{model.name}}</p>
<input class="form-control" type="text" name="name" [(ngModel)]="model.name" />
</div>
</div>
</form>
</div>
Here is a "static" Bootstrap snippet (view in full page):
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6">
<input class="form-control" type="text" name="name" value="model name" />
</div>
</div>
</form>
</div>
<div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6">
<p class="form-control-static">model name</p>
</div>
</div>
</form>
</div>
It works now. Thanks for the help. However I have modified the code to meet my requirement and it's as below.
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6">
<p class="form-control-static" *ngIf="!editMode">{{var1}}</p>
<input class="form-control" *ngIf="editMode" type="text" name="var1" [(ngModel)]="var1" />
</div>
</div>
I have the following Bootstrap markup and and screen shot below. I want the entire group of (4) items to appear in one line and not to break. I've been tweaking for a couple hours and cannot make it happen. Is it possible to get them to all align in 1 row?
<div class="container-fluid">
<div id="sys-page-headerBar-container">
<div class="row">
<!--<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div> <!-- left gutter -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<!-- header -->
<form class="form-horizontal" method="post">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="report_date">Service Date(s):</label>
<div class="col-md-2" id="dispatchLog-container">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="start" value="<?php echo date( DATE_SZ, strtotime( "today" ) ); ?>" tabindex="1" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" value="<?php echo date( DATE_SZ, strtotime( "today" ) ); ?>" tabindex="2" />
</div>
</div>
<label class="col-md-2 control-label" for="report_time">Service Time:</label>
<div class="input-group bootstrap-timepicker timepicker col-md-1">
<input id="timepicker" type="text" class="form-control input-small" data-minute-step="30" name="tour_time" tabindex="3"><input type="hidden" id="tour_time_value" value="<?php echo date( DATE_TP, strtotime( "12:00 AM" ) ); ?>">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
<label class="col-md-1 control-label" for="report_order">Sort Order:</label>
<div class="col-md-1">
<select id="report_order" name="report_order" class="form-control" tabindex="4">
<option></option>
</select>
</div>
<div class="col-md-1">
<button id="submit" name="submit" class="btn btn-default" value="1" tabindex="5">Go</button>
</div>
</div>
</fieldset>
</form>
</div> <!-- .col-xs-10.col-sm-10.col-md-10.col-lg-10 -->
<!--<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div> <!-- right gutter -->
</div> <!-- .row -->
</div> <!-- #sys-login-container -->
</div> <!-- .container-fluid -->
One of the things to learn about bootstrap is when to not use bootstrap :-)
In your case just use your own css.
You can:
float them all;
make them all in-line-block
use flexbox with a fallback for older IE (IE Conditional css) to one of the above methods
Flexbox is probably what I'd use http://caniuse.com/#feat=flexbox, https://css-tricks.com/snippets/css/a-guide-to-flexbox/ but inline-block might just do it; In any case you can use your own media queries to change the display format if you need to.