a need apply boostrap style in mi DropDownList only in the view, not my model
<% using (Html.BeginForm(FormMethod.Post))
{ %>
<%: Html.ValidationSummary(true) %>
<div class="form-group">
<div class="row">
<div class="col-md-6 text-right">
Pais:
</div>
<div class="col-sm-6">
<%: Html.DropDownList("CodPais", String.Empty) %>
<p class="label label-danger"><%: Html.ValidationMessageFor(model => model.CodPais) %> </p>
</div>
</div>
</div>
<% } %>
someone has documentation on how to apply bootstrap in visual .aspx
i try:
Related
I am trying to copy this simple design into edit mode.
Here is the code displaying the image above :
<div class="user-description-container col-md-6 col-md-offset-3">
<div class="col-md-3">
<%= image_tag #user.image.standard.url, class: "user-picture img-circle" %>
</div>
<div class="user-description-box col-md-7">
<div class="user-name"><%= #user.full_name %></div>
<div class="user-stats">
<div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
<%= #user.groups.length %></b><% if #user.groups.length == 0 %>
<p> débat</p><% else %><p> débats</p>
</div>
<% end %>
<div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= #user.followers.length %></b> <%if #user.followers.length == 0%>
<p> disciple</p> <% else %><p> disciples</p>
<% end %>
</div>
</div>
<div class="user-description">
<%= #user.description %>
</div>
</div>
<div class="col-md-2 edit-profile">
<% if current_user == #user %>
<%= link_to(edit_user_path(#user),:class =>"edit-button") do %>
<i class="glyphicon glyphicon-pencil"></i>
<% end %>
<% end %>
</div>
</div>
I copied the main design of the page to the edit mode.
Unfortunately, here is what I get :
I am using the simple form gem with rails and I can't get bootstrap working properly. Here is my code on the edit mode :
<div class="container">
<div class="row">
<div class="user-description-container col-md-6 col-md-offset-3">
<%= form_for #user do |form| %>
<div class="user-upload-preview col-md-3">
<%= image_tag #user.image.standard.url, class: "user-picture img-circle object-fit-covered" %>
<div class="form-input">
<label class="btn btn-sm btn-primary image-browse-button" >
Choisir une photo
<span style="display:none;">
<%= form.file_field :image %>
</span>
</label>
</div>
</div>
<div class="user-description-box col-md-7">
<div class="user-name">
<%= #user.full_name %>
</div>
<div class="user-stats">
<div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
<%= #user.groups.length %></b><% if #user.groups.length == 0 %>
<p> débat</p><% else %><p> débats</p>
</div>
<% end %>
<div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= #user.followers.length %></b> <%if #user.followers.length == 0%>
<p> disciple</p> <% else %><p> disciples</p>
<% end %>
</div>
<div class="form-input inline-flex">
<%= form.text_field :description, placeholder: "Description", class: "form-control" %>
</div>
<div class="form-input save-edit">
<%= form.submit "Sauvegarder", class: "form-control profile-submit-button" %>
</div>
<% end %>
<div class="col-md-2">
</div>
</div>
</div>
</div>
</div>
Any answer would be much appreciated.
So in terms of the way you are using bootstrap you are supposed to input all the items that you want in a row which you did but it all the col-md- should add up to a total of 12 for it to be a complete row you have col-md-7 which you should add with an col-xs to make it full also in terms on how to make it like this I think this should suffice
here is some layout that looks like what you are trying to do
<div class="container">
<div class="row">
<div class="col-md-4">
IMAGE
</div>
<div class="col-md-8">
<div class="header">
<h1 class="page-header text-center">MY NAME</h1>
</div>
<div class="row">
<div class="col-md-6">
<h3 class="text-center">insert contents here</h3>
<center>
<div class="center">
<button class="btn btn-primary">BTN</button>
</div>
</center>
</div>
<div class="col-md-6">
<h3 class="text-center">insert contents here</h3>
<center>
<div class="center">
<button class="btn btn-primary">BTN</button>
</div>
</center>
</div>
</div>
</div>
</div>
</div>
It looks like you are inputting user information stay away from #user tags and information like .file and other such things use tags and set them with an ID and then be sure use javascript to manipulate them
I want to to loop through each post and display a left and right layout of image and its content in every other row
like this Theme
basically the html is:
<div class="container">
<div>
<div class="images"><img src="image1"></div>
<div class="images-content">content 1 here</div>
</div>
<div>
<div class="images images-right"><img src="image2"></div>
<div class="images-content images-content-right">content 2 here</div>
</div>
<div>
<div class="images"><img src="image3"></div>
<div class="images-content">content 3 here</div>
</div>
<div>
<div class="images images-right"><img src="image4"></div>
<div class="images-content images-content-right">content 4 here</div>
</div>
<div>
<div class="images"><img src="image5"></div>
<div class="images-content">content 5 here</div>
</div>
<div>
<div class="images images-right"><img src="image6"></div>
<div class="images-content images-content-right">content 6 here</div>
</div>
</div>
I have tried this cycle example
<% #posts.each do |post| %>
<div class="<%= cycle('images', 'images images-right') %>">
Image here
</div>
<% end %>
but the problem is how to add the respective content div classes which goes with the images
You can use with_index to add classes dynamically to your odd-indexed posts.
Also, please prefer using image_tag instead of using raw HTML to create <img> tag.
<div class="container">
<% #posts.each.with_index do |post, index| %>
<div class="images <%= 'images-right' if index.odd? %>"><%= image_tag post.image %></div>
<div class="images-content <%= 'images-content-right' if index.odd? %>"><%= post.content %></div>
<% end %>
<div>
It on what attributes your Post model has. Presumably it has content and image attributes?
<% #posts.each do |post| %>
<div>
<div class="<%= cycle('images', 'images images-right') %>">
<%= post.image %>
</div>
<div class="<%= cycle('images-content', 'images-content images-content-right') %>">
<%= post.content %>
</div>
</div>
<% end %>
Im trying to customise the "<%= f.text_area :content %>" in rails 5.0.
To a text_area that materialize has like this one
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">mode_edit</i>
<textarea id="icon_prefix2" class="materialize-textarea"></textarea>
<label for="icon_prefix2">First Name</label>
</div>
</div>
</form>
</div>
The problem is that I tried to figure it out on how to insert the default text_area that I have in to this one, erasing the ugly box the I have to type a text. (I'm a bit fancy)
This is my form:
<%= form_for(#micropost, html: { multipart: true }) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= f.text_area :content %> >>>>>>#This is the one I want to change
<%= f.submit "Post", class: "waves-effect waves-light btn green accent-3 z-depth-4" %>
<span class="picture">
<%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %>
</span>
<% end %>
This is what I tried:
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">mode_edit</i>
<textarea id="icon_prefix2" class="materialize-textarea"><%= f.text_area :content %></textarea>
<label for="icon_prefix2">First Name</label>
</div>
</div>
</form>
</div>
But i'm unlucky to make it work, and I tried many other ways that I haven't figure out how to customise this feature to my app.
I spend to much time figuring out on how to erase that box and put a single fancy line style materialize way.
I will appreciate too much you help!
What's the problem you have?, you just need to add the corresponding class:
<%= f.text_area :content id: 'icon_prefix2', class: 'materialize-textarea' %>
How can I string concatenate in ASPX view engine?
I want to use my variable in generating ids dynamically (in below example, allow ability to add multiple education details).I want to replace (<%=CurrentEducation%>) with id count. I can easily do this in Razor but not in aspx views. Can you also point me the syntax declarations for <% %> things in aspx view engine please? I can find examples only in razor examples.
<% dim currentEducation = 1 %>
<% for each item As EducationDetailsViewModel in Model.EducationDetails %>
<div class="row">
<div class="col-md-11">
<div class="row">
<div class="col-md-3">
<%= Html.LabelFor(Function(x) item.Educationlevel, New With {.class = "control-label" + "test", .id="EducationDetails_(<%=CurrentEducation%>)_EducationLevel"})%><span class="text-danger">*</span>
<%= Html.TextBoxFor(Function(x) item.Educationlevel,New With{.class="form-control"})%>
</div>
<div class="col-md-4">
<%= Html.LabelFor(Function(x) item.SchoolName, New With {.class = "control-label"})%><span class="text-danger">*</span>
<%= Html.TextBoxFor(Function(x) item.SchoolName,New With{.class="form-control"})%>
</div>
<div class="col-md-3">
<%= Html.LabelFor(Function(x) item.YearsAttended, New With {.class = "control-label"})%>
<%= Html.TextBoxFor(Function(x) item.YearsAttended,New With{.class="form-control"})%>
</div>
<div class="col-md-2">
<%= Html.LabelFor(Function(x) item.IsGraduated, New With {.class = "control-label"})%>
<%= Html.RadioButtonFor(Function(x) item.isGraduated, False, new with {.style="width:auto"})%>No:
<%= Html.RadioButtonFor(Function(x) item.isGraduated, True, new with {.style="width:auto"})%>Yes:
</div>
</div>
<div class="row">
<div class="col-md-12">
<%= Html.LabelFor(Function(x) item.AreaOfStudy, New With {.class = "control-label"})%>
<div class="">
<%= Html.TextBoxFor(Function(x) item.AreaOfStudy,New With{.class="form-control"})%>
</div>
</div>
</div>
<br />
</div>
<div class="col-md-1">
<span class="text-danger">X</span>
</div>
</div>
<% currentEducation = currentEducation + 1 %>
<% next %>
I am having trouble aligning my caption to the right of my image within a bootstrap thumbnail
My HTML
<div class="container">
<div class="row">
<div class="span8 offset2">
<% #response.each do |f| %>
<% f.each_pair do |k, v| %>
<h3 class="smallTitle">Available on <%= k %></h2>
<% v.each do |film| %>
<div class="thumbnail">
<img src="http://placehold.it/180x200">
<div class="caption">
<%= link_to film[1], film[0] %> : <%= link_to "remind me", "#", :class => 'remind' %>
</div>
</div>
<% end %>
<% end %>
<% end %>
</div>
</div><!--Row-->
</div><!--/container-->
So at the moment my image is to the left and the caption is below the image.. Is there a simple way with css to get the caption to div to sit to the right of the image
You could just float the image and caption within the thumbnail div
<div class="thumbnail clearfix">
<img src="http://placehold.it/180x200" class="pull-left">
<div class="caption" class="pull-right">
<%= link_to film[1], film[0] %> : <%= link_to "remind me", "#", :class => 'remind' %>
</div>
</div>