ASP.NET4
This is my aspx page, which has a css file defining #div1, #div2, #div3 styles, and javascript code to have some dynamic change with divs. My question is in a page, there can't be 2 same ids. So div2 can pass here. What's the best way to work around this? Having a div2a, div2b, and in css file - having #div2a, #div2b using same style? And having javascript to select both div2a, div2b? Please advise.
<form id="form1" runat="server">
<div>
<%if (condition) { %>
<div id="div1"> ... </div>
<%} %>
<%else { %>
<div id="div2"> ... </div>
<%} %>
...
...
<%if (condition) { %>
<div id="div2"> ... </div>
<%} %>
<%else { %>
<div id="div3"> ... </div>
<%} %>
</div>
</form>
You can use "class" attribute to define same style. You can have more elements using the same class attribute value and it's still xhtml valid.
Related
I have created an app in ruby on rails and am using bootstrap ,i am using a 2 column layout ,the problem is the post sizes are unequal and an awkward gap ensues which i want to get rid of.
What my index page currently looks like:
What i want my index page to look like:
my index.html.erb
<div class="container">
<% #posts.each_slice(2) do |posts| %>
<div class="posts-wrapper row">
<% posts.each do |post| %>
<div class="col-lg-4 col-md-offset-1">
<%= post.body %>
</div>
<% end %>
</div>
<% end %>
</div>
Move .row out of the loop and it will be fixed
or try the following code this should also work
<div class="container">
<div class="posts-wrapper row">
<% #posts.each do |post| %>
<div class="col-lg-6">
<%= post.body %>
</div>
<% end %>
</div>
</div>
I would have used JQuery Masonry Library
If you look at the twitter-bootstrap website their jumbotron touches their nav-header. That's what I'm trying to replicate.
I added it to the top of my valuations index like so:
<div class="jumbotron">
<div class="container">
<h1>Values <small>subjective, put here whatever inspires you. </small></h1>
</div>
</div>
I also tried it without the container even though bootstrap says,
"To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within."
Is it because my application.html.erb is broken down into columns and so the jumbotron will only expand to the width of the col-md-9?
<body>
<%= render 'layouts/header' %>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<div class="container-fluid">
<div class="container">
<div class="col-md-9">
<%= yield %>
</div>
<div class="col-md-3">
<% if current_user.present? %>
<%= render 'layouts/sidebar' %>
<% end %>
</div>
</div>
I tried putting in its own partial but then there was padding between the nav-header and the jumbotron that I don't want. Like I said I want it like the bootstrap site. The other problem with a partial is I'd need a lot of them because I want to change the words in the jumbotron depending on the page.
How can we do it like bootstap?
Thanks for your time!
Yes, it's because whatever is rendered in the <%= yield%> gets wrapped in col-md-9. You can either:
close col-md-9 in views where you want to have the full-width jumbotron, and re-open it again in the footer.
don't use col-md-9 in application.rb if most of your views need to be expanding to full width.
EDIT:
To avoid repetition, you can paste the jumbotron styling in between your layouts/header and container-fluid, and use a variable for populating it with page-specific text. Here is what I mean:
<%= render 'layouts/header' %>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<div class="jumbotron">
<p class="text-center">
<%= #jumbotext %> <!-- this variable should be assigned in your controller action-->
</p>
</div>
<div class="container-fluid">
<div class="container"> <!-- check this too. not sure why you have two containers-->
<div class="col-md-9">
...
Right now my users are displaying vertically. I would like them to display horizontally side by side. I know this is a very simple to do however, I am having a hard time getting it to be how I would like. Thank you in advance.
User/Index
<div class="page-header">
<center><strong><h1> All Users </h1></strong></center>
</div>
<% #users.each do |user| %>
<div class="user horizontal-align col-md-2">
<%= link_to image_tag(user.avatar.url(:thumb)), user %>
<br><%= link_to user.name, user %></br>
<% if current_user.admin %>
<%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
<% end %>
</div>
<div class="center">
<%= will_paginate #users, renderer: BootstrapPagination::Rails %>
</div>
User CSS
.user {
width: 200px;
display: inline-block;
}
Try the following:
Isolate .user from the .col-x-x containers. The col containers should be used for layout only. Styling the .user element is overriding the BS3 layout styles.
Remove any width definitions in your CSS for .user. Allow width to fall.
Wrap nested columns with .row
jsFiddle: http://jsfiddle.net/zktfu52t/2/
EX:
<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">
<div class="row">
<% #users.each do |user| %>
<div class="horizontal-align col-md-2">
<div class="user">
<%= link_to image_tag(user.avatar.url(:thumb)), user %>
<br><%= link_to user.name, user %></br>
<% if current_user.admin %>
<%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
try this
<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">
<% #users.each do |user| %>
<div class="user col-md-2 col-lg-2 text-center">
<%= link_to image_tag(user.avatar.url(:thumb)), user %>
<p><%= link_to user.name, user %></p>
<% if current_user.admin %>
<%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
<% end %>
</div>
With this css
.user{
margin:0.2%;
display:block;
}
This will give you 5 across on medium and large screens and vertical stacks on small and extra small screens. A Quick jsFiddle for you.
Also you have unclosed div tags here:
<div class="panel panel-default">
<div class="panel-heading center">
First things first: stop using the center tag. It's deprecated and unreliable. Use CSS for your styling needs.
To get your users displayed horizontally, you need to wrap all of the user details (links, in this case) in some sort of element. A div is probably best. Then you need to set those elements to display: inline-block.
I try to use bootstrap twitter to format my site. When I add my several divs into the row-column format. I ve got a 9x9 grid with divs. I want to put one more element outside the grid in a fixed position. I use row-fluid and span class for my elments. How can i place my last element fully right of my page ??
My Code:
<body onload='drawAll();'>
<section>
<div class="container-fluid">
<div class="row-fluid">
<div id="mapWidget" class="debug span8">
<canvas id="map"
width="500"
height="280"
></canvas>
<canvas id="layer"
width="500"
height="280"
style= "position:absolute;
left:0px;
top:0px;"></canvas>
</div>
</div>
<div class="row-fluid">
<div id="profiles" class = "span4">
<script id="profileTemplate" type="text/template">
<div class= "hashTags" id = 'redLine'>
<h1> <img src="images/tagIcon.png"/> HASHTAGS</h1>
<br><font size = "6"><%= tagsCloud.tags[0] %> </font>
<%= tagsCloud.tags[1] %>
<%= tagsCloud.tags[2] %>
<%= tagsCloud.tags[3] %>
<font size = "5"><%=tagsCloud.tags[4] %> </font>
<%= tagsCloud.tags[5] %>
<%= tagsCloud.tags[6] %>
<%= tagsCloud.tags[7] %></br>
<br> <%= tagsCloud.tags[8] %>
<%= tagsCloud.tags[9] %>
<%= tagsCloud.tags[10] %>
<font size = "6"><%= tagsCloud.tags[11] %> </font>
<%= tagsCloud.tags[12] %>
<%= tagsCloud.tags[13] %>
<%= tagsCloud.tags[14] %>
<%= tagsCloud.tags[15] %></br>
<br><font size = "6"><%= tagsCloud.tags[0] %> </font>
<%= tagsCloud.tags[1] %>
<%= tagsCloud.tags[2] %>
<%= tagsCloud.tags[3] %>
<font size = "5"><%= tagsCloud.tags[4] %> </font>
<%= tagsCloud.tags[5] %>
<%= tagsCloud.tags[6] %>
<%= tagsCloud.tags[7] %></br>
</div>
</script>
</div>
<div class = 'usersCloud debug span2'>
<h2 ><img src="images/chat.png"/>TOP COMMENTERS</h2>
<img src="images/userCloud.png" />
</div>
<div class = ' button span2'>
<img src="images/menu.png"/>
</div>
</div>
<div class="row-fluid">
</div>
<div class="row-fluid">
<div id="footer" class="debug span4"><img src="images/logo.png"/></div>
</div>
My very special element is the element with menu png image, when i put it outside the grid, it has unexpected behavior! Css code:
.button{
padding: 10px 10px 10px 10px;
display:inline-block;
width: 24px;
right:-80px;top:0px;
position:fixed;
}
I think your answer is in your question...
Just add your div outside the bootstrap framework (so, not in a row or column) and then style it.
It won't take part in the responsive stuff that bootstrap applies but you can handle that by extending the bootstrap media queries with your own code...
I have a code segment in ASP.net MVC2 like this:
<% if (Model.EnrollmentNumber.Equals("Global"))
{ %>
<div id="div1" class="slidingDiv" style="display:none;">
<% }%>
<% else
{ %>
<div id="div1" class="slidingDiv" style="display: inline;">
<%} %>
<%= Html.TextBoxFor(model => model.EnteredEnrollmentNumber)%>
</div>
That's, if Model.EnrollmentNum is "Global", then the div is hidden. Else, the div is visible. But the above code has errors. The compiler says "Element div is missing its closing tag"
How can I fix it?
This is because the compiler doesn't understand the <% if tags, and sees two opening <div for one closing </div>.
You can either just ignore it, or otherwise use the same if statement around your closing tag:
<% if (Model.EnrollmentNumber.Equals("Global"))
{ %>
</div>
<% }%>
<% else
{ %>
</div>
<%} %>
The compiler does not understand that only one of the divs is written. Why not use an asp:Panel instead? In my opinion this is a cleaner solution:
<asp:Panel ID="div1" cssclass="slidingDiv" Visible='<%# !Model.EnrollmentNumber.Equals("Global") %>'>
<%= Html.TextBoxFor(model => model.EnteredEnrollmentNumber)%>
</asp:Panel>