So in mobirise 4.0.15 I have noticed that supplied template blocks have "block parameters" enabled, but custom html blocks do not.
Looking at the source, I can see that the parameter properties which flow into sass are defined within <mbr-parameters>.
However copy and pasting <mbr-parameters> into a custom html block does not enable "block parameters" for some reason.
So how can I enable block parameters for a custom html block?
I've noticed that if add one of the supplied templates, then replace everything with my own custom html, the block parameters remain enabled which then allow me to write my own custom block parameters which is pretty cool.
I have contacted the devs asking if whether there is a better approach than this workaround, but at least this will achieve the desired results in the meantime (I will update this post once I have a reply).
An example:
<mbr-parameters>
<!-- Block parameters controls (Blue "Gear" panel) -->
<input inline type="range" title="Margin Top" name="marginTop" min="0" max="8" step="1" value="6">
<input inline type="range" title="Margin Bottom" name="marginBottom" min="0" max="8" step="1" value="6">
<!-- End block parameters -->
</mbr-parameters>
And then in my css:
margin-top: (#marginTop* 15px);
margin-bottom: (#marginBottom* 15px);
Related
I'm using the
U.S. Web Design System (USWDS)
in a project I'm working on, and I'm struggling with something that seems superficially like it should be quite simple: How can I align form labels so they appear to the left of their corresponding inputs, instead of above them?
Some other CSS libraries call this a horizontal form but I've also seen it referred to as "inline" fields.
According to this answer it's possible to achieve the result I want using modern CSS Grid layout, but so far I haven't figured out how to make that play nicely with the USWDS styling, which does not use CSS Grid.
Can anyone help me to either:
Create a horizontal form using some combination of USWDS components and utility classes, or if that's impractical...
Produce a horizontal form by overriding the USWDS styling with custom CSS, but without causing too much conflict or breaking with the standard?
Below is a simplified snippet of my HTML:
<link href="https://cdn.jsdelivr.net/npm/uswds#2.8.0/dist/css/uswds.min.css" rel="stylesheet" />
<form class="usa-form">
<div class="usa-form-group">
<label class="usa-label" for="somefield1">Sample label</label>
<input class="usa-input" type="number" name="somefield1" value=0 />
</div>
<div class="usa-form-group">
<label class="usa-label" for="somefield2">Another label</label>
<input class="usa-input" type="number" name="somefield2" value=0 />
</div>
</form>
You can use flex on the usa-form-group to get them positioned next to each other as shown in this Code Sandbox, with some other minor touchups to the element margins https://codesandbox.io/s/nostalgic-moon-q7i7f?file=/styles.css
I want to make the input class= form control field bigger and multi-line. I managed to do something similar in my last project but have deleted it and forgotten how to do it. Pretty much a text box but when I use text area it won't allow "asp for"
<label asp-for="Incident_Detail" class="control-label"></label>
<input asp-for="Incident_Detail" class="form-control" />
<span asp-validation-for="Incident_Detail" class="text-danger"></span>
The problem is the self-closing. Just try:
<textarea asp-for="Incident_Detail" class="form-control"></textarea>
Note: You really should change this kind of property (size, width, height, etc...) from CSS. It allows you have responsive layouts, and make the whole solution/project a lot easier to maintain. Alternatively you could use rows for height and cols for width: <textarea asp-for="Incident_Detail" class="form-control" rows="4" cols="100" />
Note 2: The self-closing is currently (html 5) invalid html markup for some elements (including textarea). Since MVC Tag Helpers doesn't override what is in your cshtml file, the output end up messed up.
I am using Twitter Bootstrap for Rails, in a 3.2 app, and am not seeing the checkboxes appear.
If I look at the same page in just straight HTML (with checkboxes hardcoded in, and using the regular Bootstrap assets) it works fine.
The HTML code is produced correctly, I believe...e.g.:
<div class="field">
<div class="control-group check_boxes optional"><label class="check_boxes optional control-label">Listing Type</label><div class="controls"><label class="checkbox"><input class="check_boxes optional" id="search_listing_type_id_1" name="search[listing_type_id][]" type="checkbox" value="1" />For Sale</label><input name="search[listing_type_id][]" type="hidden" value="" /></div></div>
</div>
Here is the Rails Code:
<%= f.input :listing_type_id, collection: ListingType.order(:name), as: :check_boxes, label: "Listing Type" %>
Here is a live example. Right beside the text "List square footage", should be a checkbox. Scroll down to amenities, and there you will see a list that obviously should have checkboxes.
This doesn't work in development either.
Not quite sure why it's not showing up.
Thoughts?
Looks like uniform.js is setting the opacity of the checkbox to 0.
Try disabling uniform.js if you're not using it.
Update: It also looks like you're getting a 404 on a sprite image? Probably a uniform theme sprite image?
GET http://realty-cloud.herokuapp.com/img/sprite.png 404 (Not Found)
Another Update: This is definitely the problem. Uniform works by making the opacity of the input 0, so that it's invisible, but still clickable, and changing up the markup a little bit, so it looks like this.
<div class="checker" id="uniform-listing_amenity_ids_4">
<span>
<input class="check_boxes optional" id="listing_amenity_ids_4" name="listing[amenity_ids][]" type="checkbox" value="4" style="opacity: 0;">
</span>
</div>
And it sets a css rule on div.checker span:
div.checker span {
background-image: url(../img/sprite.png);
}
That image is missing, so the input appears to be invisible.
actually the problem in you have the check boxes but its hidden, due to the margin property
input[type="checkbox"] {
float: left;
#margin-left: -20px;
}
so remove or change the margin size
see below, FF with firebug
$('input[type="checkbox"]').css("visibility","visible");
I just started with twitter bootstrap.
I want to create a disabled form field. In the documention I found this snippet:
<input type="text" placeholder="Disabled input here..." disabled>
But in IE9 the placeholder doesn' work. When I use the value attribute to set the content it works (and overwrite the palceholder text, which worked in other browsers like chrome).
There is an alternative way without using the input element:
<span class="uneditable-input">Some value here</span>
This also works in IE9 and chrome. Which solution is better (compatible with old browsers, like IE8, 7 (and 6) ?
I found out, when I want to use the Prepended and appended inputs of twitter bootstrap
I must use the input element. It doesn't work with the span element.
Example:
<div class="input-prepend">
<span class="add-on">#</span>
<input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>
<div class="input-append">
<input class="span2" id="appendedInput" type="text">
<span class="add-on">.00</span>
</div>
IE 7/8/9 doesn't support the HTML5 placeholder. The best solution must be to use a script/plugin that provide the functionality (when it does not exist)
See https://github.com/miketaylr/jQuery-html5-placeholder
I also have had great experiences with http://jquery-watermark.googlecode.com/
They both use the HTML5 if it is available, and emulate it if it's not.
They are incredible simple to use. To use watermark for instance, just include it and add a line to your document.ready()
$("#my-input").watermark('default text');
<span class="uneditable-input">Some value here</span>
is better imho..
Reason- it will act as expected in new and old browsers and it doesn't depend on any external script but only css style uneditable-input
When you can simply echo your value in a span tag than why to use a disabled form field..??
The placeholder attribute is HTML5 and does not work in many browsers, especially older ones, which is why it doesn't work in IE9. (Microsoft doesn't follow standards even in IE9.)
If your question is if a span would be more compatible than the placeholder attribute, then yes it is. A span should be supported by all browsers.
You could go with the javascript alternative...
<input type="text" placeholder="Disabled input here..." onfocus="this.blur()" />
Above is a Form. There are different methods to get the following form above, with the input and text seperated on different lines.
One is to use < br / > and another use fieldset, p-tag, etc.
But I am wondering what the proper way is to seperate the form different things in different lines?
The easiest way is simply:
label, input {
display: block;
}
Edited to add the content of a comment made below, from myself to the OP, since it seems pertinent to the answer:
The 'best' is a very subjective measure. The 'best' is simply the easiest way to achieve your end-result, ideally without mangling the semantics of the HTML. Using div elements in forms gives no meaning to the contained elements, or their relationship to each other.
Using a fieldset gives some idea of the relationship, but typically (possibly should, but I'm unsure) is used to group elements together, rather than simply style them. I'd argue my method is 'best' simply because it relies on no additional (meaningful or meaningless) HTML elements being added to the page.
There are no fast rules. HTML5 seems to favor using the p element, see its example on it. By old HTML specifications, p means a paragraph, but HTML5 defines a paragrapg as virtually any block of inline content.
In practice, it is best to select the markup according to the desired default rendering. If you prefer no vertical spacing, use br or div (in the latter, you would wrap each line in a div element, making it easier to style it if desired). If you prefer spacing (empty lines), use p. Using a table is one possibility but unnecessarily complicated in a simple case like this.
Using <br/> tags to control layout is not recommended. This tag should only use to break a line in a paragraph. Using it for layout purposes is lazy and bad practice.
The best way to create forms in general like the above is to use a <ul> list.
<form>
<ul>
<li>
<label for="firstname">Name</label>
<input name="firstname" type="text" />
</li>
<li>
<label for="surname">Surname</label>
<input name="surname" type="text" />
</li>
</ul>
</form>
This is considered by many the "proper" way of doing it.
Then you can style your list in whichever way you like, so depending on the css the label can be above or next to the input field (this is where the <br/> tag would spoil that).
The basic style you need to apply is:
form ul {
list-style-type:none;
}
This gets rid of the bullet points in the list. Then you can e.g. set the elements inside to block or make them float.
I would use <div> tags and position them manually with CSS. You can also use the clear:both within CSS. I have used <br /> before as well. You do not want to be using <p> tags though because it will confuse the Google Bot which crawls your website to place you on Google Search, from a SEO point of view <p> is bad unless you actually have content within the tags.
Tables may also look a good option but here is a good article on why you should not use tables for layout http://phrogz.net/css/WhyTablesAreBadForLayout.html
Ain't nothing wrong with using br's, though the cleanest way is to just make those items display:block.
http://jsfiddle.net/chad/MdbKE/
Quite semantic way to markup label/field pairs is to use DL list (for example, this is used by default in Zend_Form). For submit button, DIV can be used:
<dl>
<dt><label for="frm-login-username">Username</label></dt>
<dd><input type="text" name="username" id="frm-login-username" /></dd>
<dt><label for="frm-login-password">Username</label></dt>
<dd><input type="password" name="password" id="frm-login-password" /></dd>
</dl>
<div><input type="submit" value="Login" /></div>