i have simple columns that are made to remain on viewport. Whatever you do, it will stay on viewport (zoom-in-out, they all stay on screen without scrolling). For now, my navbar is attached to middle column, but if i put it outside, the page become scrollable.
The code i will provide is fully working, except that i want navbar to be outside, for example:
THIS
--------------------
col1 | navbar | col3
| col2 |
--------------------
INTO THIS
--------------------
navbar
col1 | col2 | col3
--------------------
So all that needs to be on one viewport (without scrolling just like in example code bellow). I guess columns stays in row, but navbar outside of it and still to be able to use vh-100 all together.
.bg-darkblue{
background-color: #012832;
}
#testbox{
overflow-y: scroll;
overflow-x: hidden;
}
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid bg-light p-0">
<div class="row m-0">
<div class="col-sm-1 p-0">
<div class="card rounded-0">
<div class="card-body p-0">
col-left
</div>
</div>
</div>
<div class="col-sm col-auto p-0 d-flex flex-column vh-100 border">
<nav class="navbar navbar-expand-lg navbar-light p-0 bg-darkblue">
<div class="container-fluid">
<a class="navbar-brand text-light" href="/">navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div id="testbox" class="flex-fill d-flex flex-column-reverse">
<div class="card rounded-0">
<div class="card-body p-0">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
</div>
</div>
</div>
<div class="card-footer text-muted">
<form id="test-form" class="m-0">
<div class="row">
<div class="col">
<input type="text" id="test-input" class="form-control rounded-pill" autocomplete="off" placeholder="Type something...">
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-2 p-0">
<div class="card rounded-0">
<div class="card-body p-0">
<ul class="list-group list-group-flush">
col-right
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Just move your navbar outside of container and declare new class vh-100-navbar-out:
.bg-darkblue{
background-color: #012832;
}
#testbox{
overflow-y: scroll;
overflow-x: hidden;
}
.vh-100-navbar-out {
height: calc(100vh - 2.5rem);
}
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light p-0 bg-darkblue">
<div class="container-fluid">
<a class="navbar-brand text-light" href="/">navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div class="container-fluid bg-light p-0">
<div class="row m-0">
<div class="col-sm-1 p-0">
<div class="card rounded-0">
<div class="card-body p-0">
col-left
</div>
</div>
</div>
<div class="col-sm col-auto p-0 d-flex flex-column vh-100-navbar-out border">
<div id="testbox" class="flex-fill d-flex flex-column-reverse">
<div class="card rounded-0">
<div class="card-body p-0">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perspiciatis veniam magnam! Sed rerum repellat ab illum consectetur culpa illo delectus, excepturi perferendis aspernatur officiis distinctio aliquam consequatur quisquam fuga.</p>
</div>
</div>
</div>
<div class="card-footer text-muted">
<form id="test-form" class="m-0">
<div class="row">
<div class="col">
<input type="text" id="test-input" class="form-control rounded-pill" autocomplete="off" placeholder="Type something...">
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-2 p-0">
<div class="card rounded-0">
<div class="card-body p-0">
<ul class="list-group list-group-flush">
col-right
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I have a functional jQuery Accordion. I would like to add a photo inside the container and have it float left, making the text after the image float right - like having 2 columns. I've attempted many scenarios with no avail. This is my closest attempt:
<!-- Accordion-->
<section class="section-45 section-sm-45">
<div class="shell">
<div class="range">
<div class="cell-md-12 cell-lg-12">
<h5>Screening Products (beta)</h5>
<hr>
<!-- Responsive-tabs-->
<div class="responsive-tabs responsive-tabs-horizontal" data-type="accordion">
<ul class="resp-tabs-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="resp-tabs-container">
<div class="animated fadeIn">
<p><img src="images/placeholder270x270.jpg" alt="" />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="animated fadeIn">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="animated fadeIn">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I've tried to do CSS to float left, make width xx%, etc. Nothing seems to work, I seem to fight the jQuery. Any help would be appreciated!
add some style.
.my-img {
position: absolute;
margin-left: 0px!important;
}
I am using the ruby socialization gem to allow people to follow each other. I am using the follows? method to see if the current user follows that user. SO if he already follows the user he can unfollow that user.
<% #users.each do |user| %>
<li>
<div class="user">
<h2>Name - username</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan enim aliquam, vestibulum orci sed, tincidunt massa. Suspendisse semper ex non egestas tristique. Praesent quis nulla at nunc commodo tincidunt in eget felis. Nunc nec metus non nunc vulputate euismod vel quis elit.</p>
<% if current_user.follows?(user) %>
<button type="button" class="btn btn-default">unfollow</button>
<%else%>
<button type="button" class="btn btn-default">follow</button>
<%end%>
</div>
</li>
<% end %>
Showing /Users/jmurphy/RubymineProjects/sql-ss/app/views/socail_network/user_display/display.html.erb where line #10 raised:
undefined method `follows?' for #<Class:0x007fb6a85dfc80>
I am using ckeditor with combination with carrierwave in textarea (https://github.com/galetahub/ckeditor). I am using ruby on rails as a framework.
I am trying to truncate article to display only a small section in homepage which has been published from backend using ckeditor. However since i have also uploaded image for the article using same ckeditor truncate is not working. And .html_safe is also not working showing me the html code instead of rendering it.
Code used in homepage to display only a small section using truncate function:
<% i=0 %>
<% #diplomacies.each do |diplomacy_article| %>
<% if i ==0 %>
<h3><a><%= diplomacy_article.title %></a></h3>
<p><%= truncate(diplomacy_article.article.html_safe, :length=>600) %> </p>
<% end %>
<% i=i+1 %>
<% end %>
Current Result in home page:
<p><img alt="" src="/uploads/ckeditor/pictures/2/content_pm.jpg" style="float:left; height:81px; margin-left:4px; margin-right:4px; width:100px" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, nobis tempore, ad temporibus iure enim recusandae. Laborum ratione, accusamus quis amet recusandae tempora vitae? Reiciendis ab similique doloremque exercitationem saepe. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas vero voluptatem voluptatibus accusamus, doloremque aspernatur earum saepe repellat cupiditate architecto quidem hic ut tempora quod, dolore i...
Current problem line: <%= truncate(diplomacy_article.article.html_safe, :length=>600) %>
Current Controller index method:
def index
category_diplomacy= Category.where(["name=?", "Diplomacy"]).first
if category_diplomacy
#diplomacies=Article.where(["category_id=?","#{category_diplomacy.id}" ]).order("id DESC").limit(7).all
end
end
####### Response to the answer provided by: #Ruby Racer
Truncation does not seem to work. I have tried following code:
Thanks for the reply, however it did not worked for me.
I tried the following code, however truncate does not seem to work.
<% i=0 %>
<% #diplomacies.each do |diplomacy_article| %>
<% orig_text = diplomacy_article.article %>
<% img_text = orig_text.match(/<img.+(\/)?>/).to_s if orig_text.match(/<img.+(\/)?>/) %>
<% body_text = truncate(orig_text.gsub(/<.*>/,''), :length=>30) %>
<% if i ==0 %>
<h3><a><%= diplomacy_article.title %></a></h3>
<p><%= "#{img_text} #{body_text} ".html_safe %> </p>
<% end %>
<% i=i+1 %>
<% end %>
I have tried to output all of your suggested code.
1)Code:
<%= orig_text = diplomacy_article.article %>
Output:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, nobis tempore, ad temporibus iure enim recusandae. Laborum ratione, accusamus quis amet recusandae tempora vitae? Reiciendis ab similique doloremque exercitationem saepe. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas vero voluptatem voluptatibus accusamus, doloremque aspernatur earum saepe repellat cupiditate architecto quidem hic ut tempora quod, dolore incidunt rem maiores corporis!
2)
<%= img_text = orig_text.match(//).to_s if orig_text.match(//) %>
Output:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, nobis tempore, ad temporibus iure enim recusandae. Laborum ratione, accusamus quis amet recusandae tempora vitae? Reiciendis ab similique doloremque exercitationem saepe. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas vero voluptatem voluptatibus accusamus, doloremque aspernatur earum saepe repellat cupiditate architecto quidem hic ut tempora quod, dolore incidunt rem maiores corporis!
3)
<%= body_text = truncate(orig_text.gsub(/<.*>/,''), :length=>10) %>
Output:
{no output}
If I understand correctly, you want the image and you want the body text.Regular Expressions can do most of the work here:
EDIT
I have corrected the regex to create the image tag if it exists. So img_text will either contain an image tag or a blank string.
body_text is meant to contain everything except the html tags that once were there (with or without the <br>'s). This has also been edited.
So, what will basically be there is:
<%
orig_text = diplomacy_article.article
img_text = orig_text.match(/<img[^>]+>/).to_s
body_text = truncate(orig_text.gsub(/<[^>]+>/,''), :length=>600) # without br's
#or body_text = truncate(orig_text.gsub(/<[^([Bb][Rr])^>]+>/,''), :length=>600) # with br's
%>
And to output (sample html):
<div class="my_image">
<%= img_text.html_safe %>
</div>
<div class="my_abstract">
<%= body_text.html_safe %>
</div>
This should be working and img_text will output an image only if an image tag exists in the body.
Or you can also use like that:
<%
orig_text = diplomacy_article.article
body_text = truncate(orig_text,:length=>600, :omission => "" , :escape => false)
%>
And to output (sample html):
<%= body_text.html_safe %>
i have blog with ruby on rails and using ckeditor for editor text. I need to truncate my post at page break for printing from ckeditor.
example post beforetruncate
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div style="page-break-after: always;">
<span style="display: none;"> </span></div>
<p style="text-align: justify;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
how do automatically truncate before save when it encounters this element?
<div style="page-break-after: always;">
<span style="display: none;"> </span></div>
post aftertruncate
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
on model
before_save :truncate_post
def truncate_post
self.aftertruncate = ......
end
thanks for help..
I have a standard accordion that looks like
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
and currently my view loads a list of messages like
<ul id="msgs_list">
<% msgs.each do |msg| %>
<div class="msg_message_container">
<%= h msg.title %>
<%= h msg.message %><br />
<% end %>
</ul>
How can I wrap the title of each message in the h3 accordion tags and have each message in a separate accordion div? Thanks
Does this code work for you? I got rid of the ul and the div for msg_message_container however adding them back if you need them should be easy.
<% msgs.each do |msg| %>
<h3><%= h msg.title %></h3>
<div>
<p>
<%= h msg.message %>
</p>
</div>
<% end %>