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>
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.
The input number field doesn't render properly on ios. The number gets cut off at the bottom. It works for certain ios versions but not other ones. I'm stuck, please help
input[type=submit] {
text-align: center;
}
.page_q3 input[type="number"] {
height: 91px;
width: 110px;
color: #464356;
font-family: "Source Sans Pro";
font-size: 82px;
font-weight: 600;
text-align: center;
border: none;
border-bottom: 2px solid #464356;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<div class="page_q3">
<div class="div_minus"><img src="<?=$templateDir?>/images/minus.jpg" class="minus" data-quantity="minus" data-field="<?=$inputName?>" /> </div>
<div class="div_number"><input type="number" id="<?=$inputName ?>" name="<?=$inputName?>" value="<?=$_SESSION[$inputName]?>" placeholder="0" /> </div>
<div class="div_plus"><img src="<?=$templateDir?>/images/plus.jpg"
class="plus" data-quantity="plus" data-field="<?=$inputName?>" /> </div>
</div>
What it should look like
https://ibb.co/y8msSpL
what it actually looks like
https://ibb.co/rkbyPF5
You might want to try removing the border-radius and padding that are added by iOS by default:
.page_q3 input[type="number"] {
-webkit-border-radius: 0;
border-radius: 0;
padding: 0;
}
I'm having some problem with display: flex in both Safari and iOS Safari.
Safari has alignment issues and iOS Safari has both alignment and size issues. Is this expected or a valid bug in Safari?
Edit: Also, height in percentage on the child SVG inside the Button does not work either. This works in all other browsers.
I mane another more advanced example with SVG elements, and I added an anchor to compare to the button. More advanced example here
My simple example
HTML:
<div class="flex">
<div class="col col-1">
<button class="sub-col">
<span class="span"></span>
</button>
<div class="sub-col">2</div>
<div class="sub-col">3</div>
</div>
<div class="col col-2"></div>
<div class="col col-3"></div>
</div>
CSS:
.flex {
display: flex;
flex-direction: column;
height: 80vh;
background: #666666;
position: fixed;
width: 100%;
}
.col {
display: inherit;
flex: 1 1 auto;
background: #ccffcc;
}
.col-1 {
flex: 0 0 10vh;
background: #ffcccc;
}
.col-3 {
flex: 0 0 10vh;
background: #ccccff;
}
.sub-col {
display: inherit;
flex: 0 0 25%;
justify-content: center;
align-items: center;
}
.span {
width: 10px;
height: 10px;
background: #ffaaaa;
}
Screenshots:
This is what it should look like, and does in Chrome, FF and Edge (Haven't tested IE)
This is what it looks like in Safari
And this is iOS Safari
You can't set display flex to button and fieldset elements. chk below link. Wrap your element with div or span tags
https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
The button element, and a couple other elements for that matter, cannot be flex containers in some browsers. Safari is one of them.
You can try a simple solution though, if you like. The idea is, you wrap your .span inside .span-wrapper. Then you let .span-wrapper be your flex container.
Like that:
HTML:
<div class="flex">
<div class="col col-1">
<button class="sub-col">
<span class="span-wrapper">
<span class="span"></span>
</span>
</button>
<div class="sub-col">2</div>
<div class="sub-col">3</div>
</div>
<div class="col col-2"></div>
<div class="col col-3"></div>
</div>
CSS:
.flex {
display: flex;
flex-direction: column;
height: 80vh;
background: #666666;
position: fixed;
width: 100%;
}
.col {
display: inherit;
flex: 1 1 auto;
background: #ccffcc;
}
.col-1 {
flex: 0 0 10vh;
background: #ffcccc;
}
.col-3 {
flex: 0 0 10vh;
background: #ccccff;
}
.sub-col {
display: inherit;
flex: 0 0 25%;
justify-content: center;
align-items: center;
}
.span {
width: 10px;
height: 10px;
background: #ffaaaa;
}
.span-wrapper {
display: flex;
flex-basis: 100%;
justify-content: center;
align-items: center;
}
I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox), however, on the iPhone/iPad there is a tiny gap/space between the IMG and right box.
It works fine in Firefox. What is the problem?
Here's an inline link to JsFiddle.
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/>
<div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
#wrapper {
border-top: 8px solid #457b91;
max-width: 488px;
margin: 0 auto;
overflow: hidden;
}
#wrapper img {
width: 32%;
float: left;
}
#subject {
background-color: green;
float: right;
width: 68%;
padding-bottom: 32%;
position: relative;
}
#subject_wrapper {
padding-top: 12%;
position: absolute;
height: 100%;
width: 100%;
}
#subject span {
font-family: Thonburi;
font-size: 34px;
color: #ffffff;
display: block;
padding: 0 20%;
}
#subject span:nth-child(2) {
font-size: 18px;
line-height: 8px;
}
I don't have an iPd or iPhone to hand to check this, but try commenting out the space between your elements, thus:
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/><!--
--><div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
It's a pretty ridiculous fix, but it work for inline block elements, like menus made up of LIs.
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.