i'm creating a discord bot list but i have a mistake, i want align side-by-side dynamicaly every div,
I have tested a lot of things but none of all work, i'm quite bad at html/css so sorry if it's easy to fix
Current:
[![Current][1]][1]
What i want:
[![whatiwant][2]][2]
<div id="outer">
<br>
<%for(var i = 0; i < bot.db.bots.all().length; i++) {%>
<% var out = bot.db.bots.all()[i] %>
<% var idd = out.ID %>
<div class="bots">
<div class="col-12 col-sm-6 col-md-4">
<div class="card card-lg botcard" style="box-shadow:5px 5px 5px rgba(0,0,0,0.1);border-radius:12px;overflow:hidden;border-color:#2C2F33;width:16rem;float:left;">
<div align="center" class="card-img">
<img src="<%=bot.db.bots.fetch(`${idd}.avatar`)%>" class="card-img-top" alt="Bot Avatar">
<br>
<% if (bot.db.bots.has(`${idd}.certified`) === true) { %>
<br><br><a style="color:limegreen"><img src="https://cdn.glitch.com/cd3da949-70c8-4b46-b845-a66c4ef66826%2Fverifiedbot.png?v=1587933532345" width="30px" height="30px"> Certified</a><br>
<% } %>
<div class="badge badge-primary"><strong style='color: white;'>Votes: </strong><span style='color:whitesmoke;text-transform: none;'><%=bot.db.bots.fetch(`${idd}.votes`)||0%></span></div>
<div style="color:#fff" class="badge badge-default"><%=bot.db.bots.fetch(`${idd}.library`)%></div>
</div>
<div align="center" class="card-block">
<div class="card-title">
<h4><%=bot.db.bots.fetch(`${idd}.name`)%></h4>
<p class="card-text" style="color:#7289DA"><%=bot.db.bots.fetch(`${idd}.short_desc`)%></p>
<hr>
<div class="button_slide slide_right"><h6 align="center">View</div>
<% if (user) { %>
<% if(bot.db.bots.fetch(`${idd}.ownerid`) === user.id) { %>
<div class="button_slide slide_right"> Edit</h6></div>
<% } %>
<% } %>
</div>
</div>
</div>
</div>
<% } %>
</div>
</div>
<!--- CSS code --->
<style>
#outer {
content: "";
display: table;
clear: both;
}
.bots {
float: left;
height: 470px;
width: 23%;
padding: 0 10px;
}
<!--- ... --->
</style>
if you need more information i can reply to you
[1]: https://i.stack.imgur.com/U36w5.png
[2]: https://i.stack.imgur.com/2mkqE.png
I used to use this if I wanted to align something
<div class="row">
I used this link to understand it better : https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
Related
I have posted the same question two days earlier but didn't get any
answer so I'm posting again this question. May be I get lucky this time.
My slider buttons are working fine with static data, but they don't
work with the dynamic data. And unable to show the next or previous
slide.
My HTML Code
<section class="browse-cat u-line section-padding">
<div class="container">
<div class="row">
<div class="col-12">
<div class="swiper-wrapper">
<div class="swiper-slide myreward-slider-item col-md-4" *ngFor="let reward of readableRewards; let i = index">
<a href="javascript:void(0);">
<div class="myreward-slider-img">
<img
src="{{reward?.Image}}"
class=""
alt="rewards">
</div>
</a>
<div class="row">
<div class="col-md-6 text-left padding-20">
<span class="text-light-black cat-name"><b>{{reward?.Title}}</b></span>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</section>
My CCS Code
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 14px;
font-weight: 900;
color: #ff0018;
background: #ff0018;
}
.swiper-button-next {
right: 10px;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-disabled {
display: none;
}
<div class="row">
<% for(var i=0; i < sImages.length; i++) { %>
<img src="http://12.18.11.52:8980/public/uploads/<%=sImages[i]%>" class="img-thumbnail" alt="Cinque Terre"
style="display: block;float: left;margin-right: 5px;">
<% } %>
</div>
this is what I have in my ejs template. I am generating pdf from this template and I want images resized by 33.33% and grid layouts like 3 images in the first row and 2 images in a 2nd row.
there will be no more than 5 images.
I have tried certain CSS tricks but didn't work
There are many solutions to achieve this layout, Here two simple ways like below:
<div class="row">
<% for(var i=0; i < sImages.length; i++) { %>
<img src="http://12.18.11.52:8980/public/uploads/<%=sImages[i]%>" class="img-thumbnail" alt="Cinque Terre"
style="display: block;float: left;margin-right: 5px;width: calc(33.3333% - 5px);">
<% } %>
</div>
or
<div class="row">
<% for(var i=0; i < sImages.length; i++) { %>
<img src="http://12.18.11.52:8980/public/uploads/<%=sImages[i]%>" class="img-thumbnail" alt="Cinque Terre"
style="display: block;float: left;margin-right: 2%;width: 31.3333%;">
<% } %>
</div>
I'm trying to calculate total price when user click on the image and reduce price when user delete the image out by using EJS that call data base of items on MySQL which it have price.
This is my html page with ejs and js
$(document).ready(function(){ //when click on the image of item it, item will show out on canvas.
$('.items_img').click(function(){
var path = $(this).attr('data-title');
alert(path);
addImage(path, 500, 500, 0.5, -90, 3);
})
});
<!DOCTYPE html>
<html>
<body>
<div class="tab-content clearfix">
<% for(var i=0; i<categories.length; i++){ %>
<div class="tab-pane <% if(i==0){ %> active <% } %>" id="<%= categories[i].id %>a">
<% for(var j=0; j<items.length; j++){ %>
<% if(items[j].category_id == categories[i].id){ %>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image items_img" src="/pic_items/<%= items[j].picture_path %>" data-title='/anime_items/<%= items[j].anime_path %>' data-target='<%= items[j].price %>' alt="Test" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
<%= items[j].title %>
</h4>
<p class="group inner list-group-item-text"> <%= items[j].description %> </p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="">Width <%= items[j].width %> CM</p>
<p class="">Height <%= items[j].height %> CM</p>
</div>
</div>
</div>
</div>
</div>
<% } %>
<% } %>
</div>
</body>
</html>
Trying to make a custom scroll bar which allow me to scroll up and down for all my boxes that are populated using .each loop. I was able to get the grey scrollbar to appear but the blue slider does not show. I have listed all my relevant code below.
show.html.erb
<div class="containermessanger">
<div class="scrollBar">
<div class="slider"></div>
</div>
<div class="scroll">
<div class="content">
<% #chatroomall.each do |chatroom|%>
<div class="boxmessenger">
<div class="row">
<div class="col-md-2">
<% if chatroom.messages.empty? %>
No messages in this chatroom
<% else %>
<%= image_tag chatroom.messages.last.user.avatar.url(:thumb), id: "round-image-50" %>
<% end %>
</div>
<div class="col-md-8">
<%= chatroom.name %>
</div>
<div class="col-md-2">
<%= chatroom.messages.last(1).pluck(:created_at) %>
<br>
<li class="btn-group" id="profilenavbig">
<a class="dropdown-toggle" type="button" data-behavior="notifications-link" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left: 0%;">
<i class="fa fa-cog" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu">
<li>
<i class="fa fa-trash" aria-hidden="true"></i> Delete
</li>
<li role="separator" class="divider">
</li>
<li>
Report Spam<br>or Abuse
</li>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-11">
<%= chatroom.messages.last(1).pluck(:body) %>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
application.scss
.containermessanger{
overflow:hidden;
margin: 0;
height: 500px;
position:relative;
}
.scrollBar{
background: #49505a;
position: absolute;
right: 9px;
width: 5px;
height: 100%;
z-index: 1;
top:0;
}
.slider{
background: #5EAEE3;
width: 20px;
border-radius:10px;
left:-7px;
}
.scroll{
height: 100%;
overflow: hidden;
}
messengerscroll.js
$(document).ready(function(){
$bHeight = $(".content").height();
$sHeight = $('.scrollBar').height();
$sliderHeight = $sHeight/$bHeight*100;
$('.slider').height($sliderHeight+'%');
$('.slider').draggable({
containment:'parent',
axis:'y',
drag:function(){
$pos = $('.slider').position().top;
$ScrollPercent = $pos/$sHeight*100;
$ScrollPx = $ScrollPercent/100*$bHeight;
$('.scroll').scrollTop($ScrollPx);
}
})
});
Chrome Developer - HTML Element Page
Chrome Developer - Console
So with the help #jvillian I was able to hack together a solution that worked. The solution to fixing this problem was two fold.
Step 1.
Switch from:
$bHeight = $(".content").height();
To:
$bHeight = $(".containermessanger").height();
Step 2.
Modify equation from:
$sliderHeight = $sHeight/$bHeight*100;
To:
$sliderHeight = $sHeight/$bHeight*20;
how can i use the client sode validation in nested form.
i am using client side validation gem .
my code is
<%=nested_form_for #hands_played, :url => { :controller => "hands_played",:action => "create" },:validate=>true, :method => :post do |f|%>
<div class="prettyprint prettypadding">
<h3>Add Hands Played</h3>
<center>
<div class="span9">
<div class="span9"> <label class="fg-color-darken span3 place-left text-left">Title</label>
<span class="fg-color-darken span5 place-left text-left">
<div class="input-control text">
<%= f.text_field :title, :validate=>true %>
<p class="h_p_title error"></p>
</div>
</span>
</div>
<div class="span9"> <label class="fg-color-darken span3 place-left text-left">Story</label>
<span class="fg-color-darken span5 place-left text-left">
<div class="input-control textarea">
<%= f.text_area :story, :rows=>6, :validate=>true %>
<p class="h_p_story error"></p>
</div>
</span>
</div>
<div class="span9" style="overflow: hidden; position: relative;">
<label class="fg-color-darken span3 place-left text-left">Link To Blog</label>
<span class="fg-color-darken span6 place-left text-left">
<%= f.fields_for :hands_played_bloglinks,:validate=>true do |link_blog| %>
<div Style="border:0;" id="bloglinkID" class="span6">
<div class="input-control text span5 place-left ">
<%= link_blog.text_field :blog_url %>
</div>
<div class="span1 place-left" style="padding-top: 20px;">
<%= link_blog.link_to_remove "", :style=>"",:validate=>true, :class=>"icon-minus" %>
</div>
</div>
<% end %>
</span>
<span style="position: absolute; right: 64px; top: 20px;">
<%= f.link_to_add "", :hands_played_bloglinks, :class=>"icon-plus",:style=>"font-size: 14px;", :data => { :target => "#bloglinkID" } %>
</span>
</div>
<%end%>