Hello (sorry for my english),
when i write this in ckeditor :
<div class="span3">
<a href="#">
<i class="icon-file-text"> </i>
<h2>Actualités</h2>
<span>Retrouvez toutes nos actualités</span>
</a>
</div>
I save it and when i re-open i have this :
<div class="span3">
<a href="#">
<i class="icon-file-text"> </i></a>
<h2>Actualités</h2>
<span>Retrouvez toutes nos actualités</span>
</div>
Could someone help me please.
Thanks.
Related
Im using carousel bootstrap and my images are in cloudinary.
I cant see the images, i can see the buttons next and previus, the text but not the imges.
every idea counts.
Thanks
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<% #portfolios_consultoria.each_with_index do |p, index| %>
<div class="carousel-item <%= index == 0 ? 'active' : '' %>">
<img class="d-block w-100 url('<%= cl_image_path p.photo.key unless p.photo.key.blank?%>')">
</div>
<h3><%= p.name %></h3>
<% end %>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
I've pasted my code for a bootstrap carousel below. It doesn't work, but I'm not sure why.
<div id="carouseldiv" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouseldiv" data-slide-to="0" class="active"></li>
<li data-target="#carouseldiv" data-slide-to="1"></li>
<li data-target="#carouseldiv" data-slide-to="2"></li>
<li data-target="#carouseldiv" data-slide-to="3"></li>
<li data-target="#carouseldiv" data-slide-to="4"></li>
<li data-target="#carouseldiv" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/1.jpg" alt="1">
<div class="carousel-caption">
<p>PUBG : King of all games</p>
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="1">
<div class="carousel-caption">
<p>PUBG : King of all games</p>
</div>
</div>
<div class="item">
<img src="img/3.jpg" alt="1">
<div class="carousel-caption">
<p>PUBG : King of all games</p>
</div>
</div>
<div class="item">
<img src="img/4.jpg" alt="1">
<div class="carousel-caption">
<p>PUBG : King of all games</p>
</div>
</div>
<div class="item">
<img src="img/5.jpg" alt="1">
<div class="carousel-caption">
<p>PUBG : King of all games</p>
</div>
</div>
<div class="item">
<img src="img/6.jpg" alt="1">
<div class="carousel-caption">
<p>PUBG : King of all games</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carouseldiv" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouseldiv" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
I compared your code snippet to the one on bootstrap's website.
It looks like you're not using the classes on your div's and spans that Bootstrap needs.
For example you have <div class="item"> when the Boostrap documentation shows <div class="carousel-item">. I also noticed you using glyphicon chevron's when you should be using <span class="carousel-control-prev-icon" aria-hidden="true"></span> and <span class="carousel-control-next-icon" aria-hidden="true"></span>.
Basically, after verifying that Bootstrap is correctly imported, you're going to need to go through the Bootstrap documentation code snippet and your own line-by-line to make sure the CSS classes used are the same. You'll probably find it helpful to start with a 2-slide carousel, rather than a 6-slide carousel.
You didn't post what version of Bootstrap you're using, so I assumed version 4.1 (the latest stable version as I'm writing this).
In my Thymeleaf + Spring Boot project, I have a sidebar that has href link to part of sidebar (see code below). The problem it wouldn't 'uncollapse' when click on it. If I change it to href to outside (ie. www.yahoo.com) it works. With thymeleaf, how do I get the href link to part of page to work? Appreciate the help!
<li>
<a data-toggle="collapse" href="#myLinks">
<i class="material-icons">image</i>
<p> Pages
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="myLinks">
<ul class="nav">
<li>
<a th:href="#{http://www.yahoo.com}">
<span class="sidebar-mini"> Y </span>
<span class="sidebar-normal"> Yahoo </span>
</a>
</li>
</ul>
</div>
</li>
I have a portion of code for Navigation Bar in the header of the website.
I repeat it within of several views.
The code is almost equal for all views, change just for setting css class "active" for setting the background color of <li> TAG.
Partial Views
#Model String
<nav class="navbar">
<div class="container">
<ul class="nav nav-pills nav-justified">
<li>
<a href="MainPage">
<span class="glyphicon glyphicon-dashboard" aria-hidden="true"> </span>
MainPage
</a>
</li>
<li class="active">
<a href="SectionSummary">
<span class="glyphicon glyphicon-stats" aria-hidden="true"> </span>
Summary
</a>
</li>
<li>
<a href="Check">
<span class="glyphicon glyphicon-check" aria-hidden="true"> </span>
Check
</a>
</li>
<li class="(#Model=="Print")?"active":"">
<a href="Print">
<span class="glyphicon glyphicon-print" aria-hidden="true"> </span>
Print
</a>
</li>
</ul>
</div>
</nav>
I call it in the views in this way:
#Html.Partial("~/Views/Shared/PSANavigationBar.cshtml")
I would to pass a parameter to #Html.Partial and then in the PartialView to test a value and flagging class="active" when occurs a condition!
For example:
#Html.Partial("~/Views/Shared/PSANavigationBar.cshtml", "Print")
in the view, something like this:
</li>
<li class="(#Model=="Check")?"active":"">
<a href="Check">
<span class="glyphicon glyphicon-check" aria-hidden="true"> </span>
Check
</a>
</li>
<li class="(#Model=="Print")?"active":"">
<a href="Print">
<span class="glyphicon glyphicon-print" aria-hidden="true"> </span>
but it doesn't work!
How can I do?
Many thanks to all.
The way you are calling the partial view looks okay, you just need to change the way you choose your class:
<li class="#(Model == "Check" ? "active":"")">
the Model is how you receive your parameter, and this is a way you can choose a class within a razor condition. You can see another example of how too choose your class within a condition with asp mvc razor.
You should have something like this:
#model String
<nav class="navbar">
<div class="container">
<ul class="nav nav-pills nav-justified">
<li>
<a href="MainPage">
<span class="glyphicon glyphicon-dashboard" aria-hidden="true"> </span>
MainPage
</a>
</li>
<li class="active">
<a href="SectionSummary">
<span class="glyphicon glyphicon-stats" aria-hidden="true"> </span>
Summary
</a>
</li>
<li>
<a href="Check">
<span class="glyphicon glyphicon-check" aria-hidden="true"> </span>
Check
</a>
</li>
<li class="#(Model=="Print"?"active":"")">
<a href="Print">
<span class="glyphicon glyphicon-print" aria-hidden="true"> </span>
Print
</a>
</li>
</ul>
</div>
</nav>
Please notice that # is before the parenthesis ( not after it in class.
I am using bootstrap from a CDN with my rails app. Most of the styling works except for the carousel on the home page. It works fine in development but not at Heroku. I don't know if this is relevant but I have defined this route in routes.rb: root "home#index" which displays index.html.erb via the HomeController. The first image in the carousel is loaded but that is it. It has no functionality. Right now I have no bootstrap gems in the gem file which I will try if necessary. I just wanted to see if anyone has seen this issue before and knows what to do. I think this file is OK since it works in development but here is index.html.erb:
<div id="myCarousel" class="carousel slide img-rounded" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<%= image_tag("nicholson2.jpg", alt:"nicholson", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("marilyn2.jpg", alt:"marilyn", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("pacino2.jpg", alt:"pacino", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("lily.jpg", alt:"lily", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("deniro2.jpg", alt:"deniro", class: "img-rounded") %>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I resolved this by using https: instead of http: when linking to external resources. It works in development but evidently heroku does not allow it.
I had the same issue, in my case i had to remove the //=require jquery_ujs from the application.js file (assets/javascripts/application.js). Hopefully it will resolve the issue. :)