I am using twitter's Bootstrap css framework and want to make the File Upload fields look better. With Paperclip I can do something as simple as:
<%= asset_fields.file_field :asset %>
And this renders:
<input id="recommendation_assets_attributes_3_asset" name="recommendation[assets_attributes][3][asset]" type="file" >
I can add classes just not sure what makes the most sense in Bootstraps case.
thanks
I just looked around some webs and found info that it's a custom control, so bootstrap have not added style for it to the core. But, fortunately, some one did it :). Take a look a this jasny bootstrap and jquery for upload with styled bootstrap also.
Related
I just come across a good write up for a new ASP.NET Core feature called Tag helpers.
From there, I understood that one can replace the following code:
#model MyProject.Models.Product
#using (Html.BeginForm())
{
<div>
#Html.LabelFor(m => p.Name, "Name:")
#Html.TextBoxFor(m => p.Name)
</div>
<input type="submit" value="Create" />
}
with:
#model MyProject.Models.Product
#addtaghelper "Microsoft.AspNet.Mvc.TagHelpers"
<form asp-controller="Products" asp-action="Create" method="post">
<div>
<label asp-for="Name">Name:</label>
<input asp-for="Name" />
</div>
<input type="submit" value="Save" />
</form>
There's some new syntax such as asp-controller, asp-for, etc. But what does it do? And what's the advantage of this new approach?
The most important improvement I've seen so far is the control it guarantees over your HTML elements. While convenient, the Html helpers used by MVC create problems when you try to do things they weren't built for.
A simple example can be seen when using the TextBox in MVC5:
#Html.TextBoxFor(m => p.Name)
The resulting HTML markup looks like:
<input class="form-control" id="Name" name="Name" type="text" value="">
Nice and simple. But what if you want to add a placeholder attribute? What if you want to use bootstrap's validation states? What if you have some 3rd party super cool javascript library which needs custom attributes. None of these things were possible in the initial release of MVC5. Though they were eventually added via update in the form of htmlAttributes. Even now adding custom attributes is kludgey at best.
#Html.TextBoxFor(m => p.Name,
new {#class="form-control has-error", placeholder="Enter Name",
superCoolFeature="Do something cool"})
While you could argue this is still less code that straight HTML, it is no longer a significant advantage. Worse, this solution still doesn't cover dashes in attributes which are fairly common. If you need them you are stuck with a workaround such as ActionLink htmlAttributes
I've gone down the route of fixing these deficiencies with custom editors, and tried building my own TextBox controls. It became obvious pretty quickly that replacing the included TextBox templates would require a lot of work. Worse, your templates have to have knowledge of any extensions you are adding to use them.
It seems like the inclusion of Bootstrap and other 3rd party tools into MVC have made it more obvious that the current design has problems with extending HTML which need to be fixed. Hopefully the tag helpers implementation is complete enough that we can avoid them in the future.
Not to mention, your Web Designers will have real HTML tags to edit that they recognize to re-design your pages. Designers shouldn't have to be coders and there's enough for these sharp folks to keep up with, studying the moving targets of HTML5 and CSS3 specs.
A few things come to mind:
As #ChrisWalter points out, these tag helpers give HTML tags an Open/Closed quality. Rather than just letting you write extension methods for common HTML patterns, you can extend an HTML element. This lets you pick-and-mix multiple extensions per component, rather than having to choose between them.
HTML Helpers tend to not work super well for elements that need to have inner HTML provided as an argument. They came up with a clever pattern so you can say:
#using (Html.BeginForm(...)){
{
<input ... />
}
But there's nothing about BeginForm() that would force you to put it in a using statement, and there's nothing to prevent you from using incorrect HTML structure. (<input> technically isn't allowed to be directly inside a <form> tag.)
This gives us a really easy transitional stepping stone into the Web Components world of HTML5. A component that you write today for jQuery or Bootstrap to pick up and enhance may make more sense as an Angular 2 or Polymer component in a few years. Using HTML syntax makes it possible to write your HTML the way you want it to look when it's a web component, and have it automatically translated into the structure it has to take on for now (or for specific browsers, later).
Accepted answer is correct but just a correction.
Html Helpers cover dashes in attributes by use of underscore. for example if you want html like
my-attr=value
then you can use html helpers like
#Html.TextBoxFor(m=>m.id,
new { my_attr = value })
then it will convert accordingly.
I know the original question asks about advantages but for the sake of completeness I have to mention one disadvantage:
With tag-helpers enabled you cannot inject C# code inside tag attributes.
I.e. this code will break:
<!-- this won't work -->
<input class="#GetMyClass()">
<!-- this won't work too -->
<input type="checkbox" #(condition ? "checked" : "") >
To work around this problem you can use custom tag helpers or just disable tag helpers altogether like described in this answer: https://stackoverflow.com/a/65281018/56621
P.S. My humble opinion that can be safely ignored: tag helpers are "magic". And "magic" is always bad in programming. If something looks like an HTML tag, walks like a tag and quacks like a tag - then it should probably be an HTML tag. Without me knowning "oh, it's not *really* a tag".
From building a basic web app from the ground up in .NET 7/Razor pages, I haven't encountered a single instance where a tag helper has an advantage over simply coding the HTML. I don't come from an MVC background so maybe that is where the advantage lies but as seen before...Microsoft has released yet another version of wheel-reinvention that instead of making things easier for some simply adds more confusion to others.
I'm making a one-page website for a friend of mine. She's a fashion designer, and she would love to have a one-page website based on the "Stylish Portfolio" Bootstrap template --> http://startbootstrap.com/stylish-portfolio
However, I want to put in a lightbox gallery in the section below where it says "Some of our work".
I was thinking of getting the BlueImp Lightbox gallery or the Bootstrap Lightbox: http://www.jasonbutz.info/bootstrap-lightbox/#usage
Both match what I was looking for.
However, I have tried to insert it into the HTML-code, but without any luck!
Does anybody have any experience in inserting/adding lightbox galleries to a Bootstrap template? And if so, how should I approach this task?
Like the comments from your question, they wanted to see your code so they know where and how they can help you. It would also let us know how much code we would need to supply without actually spoon-feeding you the answers so that you can get your answers as well as still learn :)
With that, I'm gonna assume that you're a beginner and thus supply most of the codes that you need as well as explanations on what I'm doing. I'm gonna take bootstrap-lightbox as an example.
First off, you need to download the files from the site. After downloading the files, you would be able to see that this contains 4 files, namely bootstrap-lightbox.css, bootstrap-lightbox.js and their min files. (min files are just compressed versions of the files in order to lessen its size)
Now, it's basically just needing to plug-in those files into your project.
Assuming that you put the files into their respective js and css folders in your project, this is how they would look like:
<link href="css/bootstrap-lightbox.css" rel="stylesheet"> //plug this inside your <head> tags
<script src="js/bootstrap-lightbox.js"></script>
After plugging those in your files, then its a matter of just using the html code that you found in the site :)
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="image.png">
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
Solved.
I used BlueImp instead to insert a lightbox gallery :-)
how to integrate hebo html template into yii framework
I am new to using yii framework.I download hebo template from
http://www.webapplicationthemes.com/hebo-responsive-html5-theme/
I can installed template hebo but i don´t work with ie.
Don´t work fluid bootstrap.
go to views/layouts/main.php and delete html comment " <- Require the header ->" instead you can add it as php comment. This comment appears before tag and it causes IE doesn´t understand HTML5.
Did you convert the theme to work with Yii?
One of the problems with this kind of theme is that it has multiple page types and this is harder to replicate in Yii. By default, Yii has no concept of page type unless you code this into the controller using layouts ....
At the very simplest level, the conversion could be based on the fullwidth page,, converting the mainContent divs to inject $content. You would then need to change a layout to use single column ...
I've just completed this for another of their templates and it doesn't take too long - though if any one has a better idea for page types I would be very interested ....
I am using the rails 3 gem nested_forms and would like to change how the default blueprint for insertion is generated. I can not figure out how/where this code would comes from, and how/where I would add code to modify it.
I am currently using a partial for my form:
/app/views/units/_unit.html.haml
%tr
%td=f.text_field :units
%td=f.text_field :dispatched
%td=f.text_field :onscene
%td=f.text_area :actions
The code snippet that calls the partial:
/app/vies/reports/_form.html.haml
...
%table.units
%th Unit
%th Dispatched%th On Scene
%th Actions
=f.fields_for :units
%p= f.link_to_add "Add a unit", :units
...
I have all of the core functionality working, except for the template. That is auto created at run time by the gem. This template results in very simple HTML markup being used for the template.
Which is similar to the following:
<div id="units_fields_blueprint" style="display:none">
<p class="fields">
<input id="report_units_attributes_new_units_unit" name="report[units_attributes][new_units][unit]" size="30" type="text">
<input id="report_units_attributes_new_units_dispatched_1i" name="report[units_attributes][new_units][dispatched(1i)]" type="hidden" value="2011">
...
</p>
</div>
I would like the blueprint to have the tabular format that is in the partial, I just don't know how to get there.
Any help would be appreciated.
A partial which contains only a table row, such as listed above will not be valid markup when placed within the blueprint div.
The following code is not valid markup.
<div>
<tr>
<td>Content</td>
</tr>
</div>
Certain browsers (chrome for example) will attempt to correct this bad markup, which is done by stripping out the tr and td markup.
To get this type of code to work with nested_form would be complex requiring that the blueprint be created in a javascript string, and would require a modification to the builder to stop automatically surrounding inserted code in a block of code.
These changes are addressed in issue #73 for nested_form which refers to a branch created by the github user elmatou.
Another option to get a similar look and feel is to use divs and spans and create a grid structure using CSS. This is a CSS intensive process, but allows nested_form to be used without requiring alteration.
I'm working on a Rails 3.1 app using JavascriptMVC and ejs templates within the client to do some complicated features on my application. Unfortunately ejs syntax is very similar to erb syntax, to the point where I can't keep the code in the same file (although if someone knows of a good way to do this, I'd be ecstatic). Ultimately I want to be able to apply some rails code within the ejs template (say for I18n) but at this point I will just settle for getting this to work
Following the example from this question I have created a custom template handler that looks like this:
module CommonModel
class Handler < ActionView::Template::Handler
include ActionView::Template::Handlers::Compilable
def compile(template)
template.source.inspect
end
end
end
ActionView::Template.register_template_handler :ejs, CommonModel::Handler
Then I created a partial template that has my ejs code in it:
_jmvc_templates.html.ejs
<script type="text/ejs" id="my_ejs_template">
<div>Some ejs here</div>
</script>
Within my existing template, I attempt to include my partial:
<%= render 'path/to/my/ejs/templates/jmvc_templates' %>
At this point, the file is included and my handler is used, but everything is escaped, so my div in my template gets rendered to the page like this:
<div%gt;
I'm sure I'm missing something obvious here, but I don't know what it could be... How can I get this template handler to just include my ejs based template without escaping all of the html in it?
Edit:
I've found that calling render with html_safe works:
<%= render('path/to/my/ejs/templates/jmvc_templates').html_safe %>
This seems like a kludge though - there has to be a way to get the erb renderer to treat text from my handler as html safe text.
Maybee you should be using raw. Check this
def compile(template)
raw template.source.inspect
end