I'm doing pagination with will_paginate and used the code to style my pagination links based off the style Digg uses. Here's the link to the "guide". I'm trying to center align the pagination but can't seem to get the actual links to center. I've tried wrapping them in their own div and doing the margin: auto; but the links still stay left aligned. Thanks in advance, here's the rails and css code:
Rails
<div class="pagination">
<div class="page_info">
<%= page_entries_info #vars %>
</div>
<div class="pagination_links">
<%= will_paginate #vars, param_name: 'index_paginate', :container => false %>
</div>
</div>
CSS
.pagination {
background: white;
cursor: default;
/* self-clearing method: */ }
.pagination a, .pagination span, .pagination em {
padding: 0.2em 0.5em;
display: block;
float: left;
margin-right: 1px; }
.pagination .disabled {
color: #999999;
border: 1px solid #dddddd; }
.pagination .current {
font-style: normal;
font-weight: bold;
background: #2e6ab1;
color: white;
border: 1px solid #2e6ab1; }
.pagination a {
text-decoration: none;
color: #105cb6;
border: 1px solid #9aafe5; }
.pagination a:hover, .pagination a:focus {
background: white;
color: #000044;
border-color: #000044; }
.pagination .pagination_links {
margin: 0 auto;
width: 70%;
text-align: center;
}
.pagination .page_info {
margin: 0 auto;
background: #2e6ab1;
color: white;
padding: 0.4em 0.6em;
width: 22em;
margin-bottom: 0.3em; }
.pagination .page_info b {
color: #000033;
background: #6aa6ed;
padding: 0.1em 0.25em; }
.pagination:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden; }
* html .pagination {
height: 1%; }
*:first-child + html .pagination {
overflow: hidden; }
UPDATE: I'm new to CSS and thought the div autosized itself to its contents. I was looking for a solution that did just this as an answer. After I realized what I was looking for I googled it and found the answer.
I have created a jsfiddle http://jsfiddle.net/trickeedickee/B2Ku3/ for you to see the answer. It requires you wrap the div with class of pagination in a wrapping div and then give that a width with
margin: 0 auto;
I hope this helps.
I think you should do
and make width 50% in digg_pagination class
<div class="pagination">
<div class="page_info" style="text-align: right">
<%= page_entries_info #vars %>
</div>
<div class="pagination_links">
<%= will_paginate #vars, param_name: 'index_paginate', :container => false %>
</div>
</div>
Thanks.
If you don't want your centered to have a width, I would suggest checking this answer out.
Related
I have a model that called LinksListWidgetModel that contains an IEnumerable property named Links that contains a list of my website links.
In my Razor view, I have two columns (i.e. one for the grid "col-md-8" and one for another tool "col-md-4". I have a foreach loop that adds each link to the grid tool. I am trying to achieve the following look: Matrix View, however the buttons don't wrap after three, it just continues throughout the width of the page. I am using Bootstrap4.x and flexbox.
I tried following the example in this question: How I can make nice looking matrix of buttons with bootstrap 3?, but that didn't fix the issue either.
Here is my code:
LinksListGrid.cshtml:
#if (Model == null)
{
#Html.Partial("_WidgetNotConfigured") }
else
{
<div class="btn-group btn-matrix" role="group">
#foreach (var link in Model.Links)
{
<div class="linkContainer-gridItem">
<button>
<a class="linkContainer-gridItem-link btn btn-default" href="#link.Url">
#if (!string.IsNullOrEmpty(link.Icon))
{
<div>
<i class="icon #link.Icon"></i>
</div>
}
#link.Label
</a>
</button>
</div>
}
</div>
}
LinkContainer.scss:
.linkContainer {
padding: 1rem;
margin-bottom: 2rem;
position: relative;
background: #fff;
border-radius: 8px;
border: 1px solid #dddfe2;
.linkContainer-title {
color: #fff;
background: $colorBrandDarkBlue;
padding: 1rem;
border-radius: 5px;
margin: -.5rem -.5rem 1rem -.5rem;
font-weight: 400;
}
.linkContainer-list {
list-style: none;
padding: 0;
margin-bottom: 0;
font-family: "Montserrat",sans-serif;
.linkContainer-item {
position: relative;
.linkContainer-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: .75rem .5rem;
color: $colorBrandBlue;
font-weight: 400;
font-size: 18px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
background-color: transparent;
font-family: "Montserrat",sans-serif;
}
.icon:before {
font-size: 30px;
margin-right: 1rem;
}
}
.linkContainer-item:after {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
border-top: 1px dotted;
opacity: .25;
}
}
.linkContainer-grid {
width: 290px;
display: block;
margin: 0 auto;
padding: 0;
padding-bottom: 19px;
font-family: "Montserrat",sans-serif;
text-align: center;
.linkContainer-gridItem {
background-color: $colorBrandBlue;
border-radius: 25px;
width: 120px;
height: 120px;
margin: 10px;
display: inline-block;
vertical-align: top;
.linkContainer-gridItem-link {
color: white;
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 20px 10px;
}
.icon {
font-size: 30px;
margin-bottom: 0.25rem;
}
}
}
#media screen and (max-width: 767px) {
&.linkContainer-gridLayout {
padding: 0;
}
}
}
.btn-matrix {
> .btn {
&:nth-child(3n+4) {
clear: left;
margin-left: 0;
}
&:nth-child(n+4) {
margin-top: -1px;
}
&:first-child {
border-bottom-left-radius: 0;
}
&:nth-child(3) {
border-top-right-radius: 4px !important;
}
&:nth-last-child(3) {
border-bottom-left-radius: 4px !important;
}
&:last-child {
border-top-right-radius: 0;
}
}
}
It ends up looking like this: Grid View
How can I change this to make it look like the first screenshot's matrix/grid display? After every 3 buttons it goes on the second line.
I don't think clear:left; will work on flexbox. But there are other ways to do it.
HTML & SCSS way
I think you would be better off just styling .btn-matrix yourself, without mixing .btn-group styles, because Bootstrap .btn-group brings in lots of noice on its .btn children, such as border-radius, border, etc. You would need to style them using your own styles anyway so why bother.
I think the following structure should be generic enough you can use to construct a matrix:
<div class="btn-matrix btn-matrix-white" role="group">
<a class="btn" href="#">
<div class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" />
<i class="fas fa-chart-bar fa-stack-1x" />
</div>
Reports
</a>
...
</div>
First of all, in your original HTML structure, you had a button that wraps an anchor link. That's not necessary because Bootstrap has classes to style an anchor link to just look like a button.
Secondly, I am using icon stacking method to construct icons with circle backgrounds. You can read about it here: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
Finally, here is the styles:
$numOfMatrixItemPerRow: 3;
$matrixItemBorderWidth: 1px;
.btn-matrix {
display: flex;
flex-flow: row wrap;
box-shadow: 0 0 1rem #ccc;
border: 1px solid transparent;
border-radius: .25rem;
> .btn {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: flex-start;
flex-grow: 0;
flex-shrink: 0;
padding: 5%;
width: calc(100% / #{$numOfMatrixItemPerRow});
border-radius: 0;
}
&.btn-matrix-white {
> .btn {
background-color: #fff;
border-right: $matrixItemBorderWidth solid #ddd;
border-bottom: $matrixItemBorderWidth solid #ddd;
.fa-stack-2x {
color: var(--primary);
}
.fa-stack-1x {
color: #fff;
}
&:nth-child(#{$numOfMatrixItemPerRow}n) {
border-right: none !important;
}
&:last-child {
border-bottom: none !important;
}
}
}
}
Really nothing tricky there except you would need to use SASS Interpolation to involve $numOfMatrixItemPerRow variable into calculations:
Display .btn-matrix as a wrappable flex row
Set the width of each button to be 100% / $numOfMatrixItemPerRow so that each row will contain the exact number of items before breaking into new rows
Display .btn as flexbox column so that you can easily align the icons and text there
Set the right and bottom border of each button, with exceptions of the last one on each row and last one
demo: https://jsfiddle.net/davidliang2008/1wqost69/201/
ASP.NET MVC way
Now since you're using ASP.NET MVC, I think there is another approach you can consider. That is, in the loop where you loop though each link from the model, you can define a variable there and do something like:
<div class="btn-matrix">
#for (int i = 0; i < Model.Links.Count(); i++)
{
var link = Model.Links[i];
if (i % numOfItemsPerRow == 0)
{
<div class="row">
}
<div class="col-md-4">
<a class="btn" href="#link.Url">
#if (!string.IsNullOrEmpty(link.Icon))
{
<div>
<i class="icon #link.Icon"></i>
</div>
}
#link.Label
</a>
</div>
if ((i+1) % numOfItemsPerRow == 0 || i + 1 == Model.Links.Count())
{
</div>
}
}
</div>
I'm just making things up but hopefully you see where I am going.
I am really new to rails and I'm teaching myself by creating a web app, right now I'm building a pintrest like web app.
Everything is working nicely, but I want the pins to be in a grid sort of view. For that I tried using masonry-rails Gem.
But it doesn't seems to work.
My Index file
<link href="/assets/lposts.css.scss" rel="stylesheet">
<link href="/assets/pins.js.coffee" rel="javascript">
<div class="transitions-enabled" id="pins">
<% #posts.each do |post| %>
<div class="box panel panel-default">
<%= link_to (image_tag post.picture.url), post %>
<h2>
<%= link_to post.title, post %>
</h2>
<p class="user">
Submitted by
UserName
</p>
</div>
<% end %>
</div>
My css file
body {
background: #E9E9E9;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 100;
}
nav {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
.navbar-brand {
a {
color: #BD1E23;
font-weight: bold;
&:hover {
text-decoration: none;
}
}
}
}
#pins {
margin: 0 auto;
width: 100%;
.box {
margin: 10px;
width: 350px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
border-radius: 7px;
text-align: center;
img {
max-width: 100%;
height: auto;
}
h2 {
font-size: 22px;
margin: 0;
padding: 25px 10px;
a {
color: #474747;
}
}
.user {
font-size: 12px;
border-top: 1px solid #EAEAEA;
padding: 15px;
margin: 0;
}
}
}
#edit_page {
.current_image {
img {
display: block;
margin: 20px 0;
}
}
}
#pin_show {
.panel-heading {
padding: 0;
}
.pin_image {
img {
max-width: 100%;
width: 100%;
display: block;
margin: 0 auto;
}
}
.panel-body {
padding: 35px;
h1 {
margin: 0 0 10px 0;
}
.description {
color: #868686;
line-height: 1.75;
margin: 0;
}
}
.panel-footer {
padding: 20px 35px;
p {
margin: 0;
}
.user {
padding-top: 8px;
}
}
}
textarea {
min-height: 250px;
}
My js file
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
$ ->
$('#pins').imagesLoaded ->
$('#pins').masonry
itemSelector: '.box'
isFitWidth: true
In my application.scss
*= require 'masonry/transitions'
In my application.js
//= require masonry/jquery.masonry
The way you include you js assets is wrong.
Please include the js file using
<%= javascript_include_tag 'pins' %>
and place the pins.js.coffee file in precompile assests path
Rails.application.config.assets.precompile += %w(articles.js)
Either you can place your assets in application.js
//= require pins
Hope this is going to work for you.
I have encountered this and want to share.
'custom.css.scss'
/* microposts */
.microposts {
list-style: none;
padding: 0;
li {
padding: 10px 0;
border-top: 1px solid #e8e8e8;
}
.user {
margin-top: 5em;
padding-top: 0;
}
.content {
display: block;
margin-left: 60px;
img {
display: block;
padding: 5px 0;
}
}
.timestamp {
color: $gray-light;
display: block;
margin-left: 60px;
}
.gravatar {
float: left;
margin-right: 10px;
margin-top: 5px;
}
}
aside {
textarea {
height: 100px;
margin-bottom: 5px;
}
}
span.picture {
margin-top: 10px;
input {
border: 0;
}
}
'show.html.er'
<div class="col-md-8">
<% if #user.microposts.any? %>
<h3>Microposts (<%= #user.microposts.count %>)</h3>
<ol class="microposts">
<%= render #microposts %>
</ol>
<%= will_paginate #microposts %>
<% end %>
</div>
When I used chrome to inspect element, I found out that the environment automatically adjusts. I tried to adjust the padding wherein it aligned the micropost. It took me a day and I decided to ask a help and so, he read the inspect element from chrome. and there, he tried to adjust the padding.
/* microposts */
.microposts {
list-style: none;
padding: 0;
li {
padding: 12px 0;
border-top: 1px solid #e8e8e8;
}
.user {
margin-top: 5em;
padding-top: 0;
}
.content {
display: block;
margin-left: 60px;
img {
display: block;
padding: 5px 0;
}
}
.timestamp {
color: $gray-light;
display: block;
margin-left: 60px;
}
.gravatar {
float: left;
margin-right: 10px;
margin-top: 5px;
}
}
aside {
textarea {
height: 100px;
margin-bottom: 5px;
}
}
span.picture {
margin-top: 10px;
input {
border: 0;
}
}
As you can see there, I changed the padding from 10px to 12 px. Try to change to other sizes. It might fix.
Hope this will save you time and also, I don't know why this happens, I'm new to rails and I don't know why this happens.
I'd be glad if you'll explain. Thanks!
I am trying to have two divs (red boxes) side by side, and within each red box should be a bordered link.
One link is on two lines whereas the second link is on one line.
The links should lie at the center (horizontally and vertically) of each box, and the two boxes should also be perfectly aligned.
My code is the following. I had to set the links as "display: table-cell;" to keep the two boxes aligned. If you have another solution, i'm listening ^^.
* {
margin: 0;
padding: 0;
}
#marketing-button, #prints-button {
background-color: red;
text-align: center;
width: 10em;
height: 10em;
display: inline-block;
}
#marketing-link, #prints-link {
color: white;
vertical-align: middle;
display: table-cell;
float: none;
font-size: 1em;
border: yellow solid 2px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: .2em;
}
<body>
<div id="container">
<div id="marketing-button">
<a id="marketing-link" href="#">Digital <br />marketing</a>
</div>
<div id="prints-button">
<a id="prints-link" href="#">Prints</a>
</div>
</div>
</body>
Thanks guys!
Ok, i found the solution.
Each link should be set to display as inline-block and should be contained within a div displayed as a table-cell.
This allows to center the link vertically.
The table-cells should themselves be contained within divs displayed as inline-blocks. This allows the red boxes to be aligned and to have a space between them.
Here is the final code:
* {
margin: 0;
padding: 0;
}
.container {
display: inline-block;
}
#marketing-button, #prints-button {
background-color: red;
text-align: center;
width: 10em;
height: 10em;
display: table-cell;
vertical-align: middle;
margin-right: 20px;
}
#marketing-link, #prints-link {
color: white;
display: inline-block;
float: none;
font-size: 1em;
border: yellow solid 2px;
text-align: center;
padding: .2em;
}
<body>
<div class="container">
<div id="marketing-button">
<a id="marketing-link" href="#">Digital <br />marketing</a>
</div>
</div>
<div class="container">
<div id="prints-button">
<a id="prints-link" href="#">Prints</a>
</div>
</div>
</body>
I have a twitter feed on my website and i'm trying to put it in a box that has a top, a middle section that repeats as needed to accommodate text and a bottom image as well as an image below the bottom. the problem is that originally the feed was in a box that didn't repeat or anything the feed was just on top of the box, but now i can't get the box set up right or the feed to do it's thing. here is my code:
#twitter_update_list {
overflow: hidden;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
line-height: 20px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#twitter_update_list li {
font-family:Arial, Helvetica, sans-serif;
color:#000000;
list-style: none;
}
#twitter_update_list li a {
color:#f7f6e7;
text-decoration: none;
}
#twitter_update_list li a:hover {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #f7f6e7;
}
.twitter_top {
position:absolute;
left:632px;
top: 39px;
width: 333px;
height: 27px;
background:url(twittertop.png);
}
.twitter_mid {
width: 333px;
background:url(twittermiddle.png);
background-repeat:repeat-y;
padding: 0 15px;
}
.twitter_bot {
width: 333px;
height: 27px;
background:url(twitterbottom.png);
background-repeat:no-repeat;
margin-bottom: 0px;
}
.twitter_whale {
width: 140px;
height: 67px;
left: 900px;
background-image: url(Layer-6.png) no-repeat;
position: absolute;
left: 9px;
top: 9px;
line-height: 13px;
}
<div class="twitter_top"></div>
<div class="twitter_mid">
<ul id="twitter_update_list"></ul>
</div>
<div class="twitter_bot"></div>
<div class="twitter_whale">
<div id="twitter_div"><ul id="twitter_update_list"><li></li></ul></div>
(update list i'm not putting in here because it's just the js)
</div>
<div id="twitter_box">
<div id="twitter_top">
</div>
<div id="twitter_middle">
</div>
<div id="twitter_bottom">
</div>
</div>
I would think it would make more sense to contain them all in one div, from here you can set your styles, since you want the middle part to expand leave the height dynamic.