take a look at the two images below:
Desktop:
iPad:
Notice the colors of the outer rings? Why are they inverted on the iPad?
.statistic-container {
display: inline-block;
position: relative;
width: 100%;
overflow: hidden;
max-width: 326px;
margin-bottom: 20px;
}
.statistic-container:before {
content: '';
padding-bottom: 100%;
display: block;
}
.statistic-container svg {
fill: transparent;
display: inline-block;
position: absolute;
top: 0;
right: 0;
transform: rotate(270deg);
}
.statistic-container__outer-circle {
stroke: #385fd1;
stroke-width: 16;
stroke-dasharray: 1607;
stroke-dashoffset: -530;
}
.statistic-container__inner-circle {
stroke: #02158b;
stroke-width: 16;
stroke-dasharray: 1607;
}
<div class="statistic-wrapper">
<div class="statistic-container">
<svg viewBox="0 0 500 500">
<circle cx="250" cy="250" r="242" class="statistic-container__inner-circle"></circle>
<circle cx="250" cy="250" r="242" class="statistic-container__outer-circle"></circle>
</svg>
</div>
</div>
Thank you to Paulie_D for the tip.
It looks like ipad doesn't play well when you use negative values on stroke-dashoffset.
The following fixed my issue:
.statistic-container__outer-circle {
stroke: #385fd1;
stroke-width: 16;
stroke-dasharray: 1607;
}
.statistic-container__inner-circle {
stroke: #02158b;
stroke-width: 16;
stroke-dasharray: 1607;
stroke-dashoffset: 1077;
}
I removed the negative offset from the outer circle and added a positive offset on the inner circle.
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.
When resizing an image from left (using "n","w","ne","sw" or "nw" handles),
the parent's left and top positions are not affected, leading to a faulty behavior which can be seen in the following demo: http://jsfiddle.net/8VY52/1704/.
<div id="draggableHelper">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
$('#draggableHelper').draggable();
$('#image').resizable({
handles: "n, e, s, w, ne, se, sw, nw"
});
#draggableHelper{
border: 5px solid black
}
img{
border: 5px solid red;
}
You may want to consider something like this:
http://jsfiddle.net/Twisty/hukpwa3n/
HTML
<div id="draggableHelper" style="display: inline-block">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
CSS
#draggableHelper {
border: 5px solid black;
padding: 5px;
padding-bottom: 1px;
background: red;
}
img {
width: 100%;
height: 100%;
margin: 0;
}
.ui-resizable-handle {
border: 1px solid #000;
background: #fff;
width: 10px;
height: 10px;
}
.ui-resizable-se {
right: -5px;
bottom: -5px;
}
.ui-resizable-nw,
.ui-resizable-sw {
margin-left: -1px;
}
.ui-resizable-nw,
.ui-resizable-ne {
margin-top: -1px;
}
.ui-resizable-ne,
.ui-resizable-se {
margin-right: -1px;
}
.ui-resizable-sw,
.ui-resizable-se {
margin-bottom: -1px;
}
JavaScript
$(function() {
$('#draggableHelper').draggable().resizable({
handles: "ne, se, sw, nw"
});
});
This allows the <img> to be 100% the size of it's parent and then you can resize the parent. Hope that helps.
It works in Chrome, but it always shows up black in Safari. I even put color: #0A0 in 4 different places, and tried !important.
Chrome
iPhone
/* Customize the label (the container) */
.checkbox-label {
display: block;
position: relative;
padding-left: 40px;
margin-bottom: 20px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #0A0;
}
/* Hide the browser's default checkbox */
.checkbox-label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 30px;
width: 30px;
border: 1px solid goldenrod;
color: #0A0;
}
/* Create the checkmark/indicator (hidden when not checked) */
/* Style the checkmark/indicator */
.checkmark:after {
content: '\2714';
display: none;
font-size: 36px;
margin: -15px 0 0 0;
color: #0A0;
// color: red;
}
/* Show the checkmark when checked */
.checkbox-label input:checked ~ .checkmark:after {
display: block;
color: #0A0 !important;
}
<label class="checkbox-label">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
iOS 10.3.3, Chrome Version 66.0.3359.181
Demo (preview on iPhone):
You need to add variation selector-15 (U+FE0E) to fix this issue
Change content: '\2714'; to content: '\2714\fe0e';
/* Customize the label (the container) */
.checkbox-label {
display: block;
position: relative;
padding-left: 40px;
margin-bottom: 20px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #0A0;
}
/* Hide the browser's default checkbox */
.checkbox-label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 30px;
width: 30px;
border: 1px solid goldenrod;
color: #0A0;
}
/* Create the checkmark/indicator (hidden when not checked) */
/* Style the checkmark/indicator */
.checkmark:after {
content: '\2714\fe0e';
display: none;
font-size: 36px;
margin: -15px 0 0 0;
color: #0A0;
// color: red;
}
/* Show the checkmark when checked */
.checkbox-label input:checked ~ .checkmark:after {
display: block;
color: #0A0 !important;
}
<label class="checkbox-label">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
I have this message thread component that has a header, content and a textarea and everytime. The issue here is in mobile views, when I want to type a message the keyboard on IOS (Iphones) pushes the divs up so the header would be hidden, I don't want this behavior, for Android it doesn't behave like this. This app is using React and scss and the code is this:
<div className="message-thread-wrapper d-flex flex-column">
<div className="messages-header d-flex flex-row justify-content-between align-items-center">
<Icon
className="back-btn d-lg-none"
icon="chevron-left"
onClick={(e) => {
e.stopPropagation();
actions.closeMessage();
}}
/>
<h5 className="messages-title text-truncate">
{participant.firstname && participant.lastname ? `${participant.firstname} ${participant.lastname}` : participant.name}
</h5>
<div className="messages-header-right d-flex flex-row align-items-center">
<Icon
className="settings-btn"
icon="settings"
onClick={(e) => {
e.stopPropagation();
this.toggleDeleteMenu();
}}
/>
}
<Icon
className="close-btn-cross d-none d-lg-block"
icon="cross"
onClick={(e) => {
e.stopPropagation();
this.setState(
{isMinimized: false},
actions.closeMessage
);
}}
/>
</div>
</div>
{showDeleteMenu &&
<DeleteMenu onClick={this.archiveMessage} onClickOutside={this.toggleDeleteMenu}/>
}
{
this.renderMessages()
}
<div
className="bottom-actions d-flex flex-row flex-nowrap justify-content-between align-items-center">
<TextArea
ref={ref => this.messageInput = ref}
className="input blue d-block"
name="msgText"
placeholder="Type your message..."
.
.
.
.
autoFocus
/>
<Button
className={`send-btn circle ${IS_SAFARI ? 'safari-fix-button' : ''}`}
icon="paper-plane"
onClick={this.onSendMessage}
/>
</div>
}
</div>
and the scss file:
.message-thread-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0;
z-index: 950;
.messages-header {
padding: 19px 16px 14px 16px;
width: 100%;
flex-basis: 57px;
color: white;
pointer-events: none;
position:sticky;
.back-btn {
pointer-events: auto;
}
.close-btn-cross {
width: 18px;
height: 18px;
pointer-events: auto;
}
.settings-btn {
width: 25px;
height: 26px;
pointer-events: auto;
}
}
.delete-menu {
border-radius: 2px;
background-color: white;
position: absolute;
top: 53px;
right: 0px;
z-index: 1;
.menu-arrow {
width: 15px;
height: 15px;
position: absolute;
top: 0;
right: 0;
background: white;
border-right: none;
border-bottom: none;
}
a {
padding: 18px;
font-size: 16px;
line-height: 1.5;
text-decoration: none;
z-index: 1;
cursor: pointer;
}
}
.messages-content {
height: 100%;
padding: 16px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
.dateline {
margin: 28px 0 11px 0;
line-height: 1.33;
text-align: center;
}
}
.bottom-actions {
bottom: 0;
width: 100%;
max-height: 130px;
min-height: 70px;
overflow-y: hidden;
padding: 0 0 0 24px;
background-color: white;
box-shadow: 0 -1px 3px 0 #d9dbdc;
.form-group-wrapper {
padding-top: 10px;
width: 100%;
align-self: stretch;
overflow: auto;
&.text-area-wrapper {
padding-right: 71px;
textarea {
min-height: 48px;
}
.form-bar {
display: none;
}
}
}
.button.circle {
width: 34px;
height: 34px;
padding: 9px 12px 9px 8px;
position: fixed;
right: 26px;
&.safari-fix-button {
bottom: 22px;
}
}
}
}
Note I deleted the properties that are not important for this question so it won't be too long.
This is how it currently behaves:
Iphone:
Android - Pixel 2XL:
I would appreciate if Any could help me. Thank you in advance!
I am trying to vertically center some text in a responsive div. I was not able to figure it out. I would appreciate if I can get some help.
http://jsfiddle.net/X923f/1/
Thank you.
<style>
.thumb {
float: left;
margin: 0px;
padding: 0px;
position:absolute;
height:100%;
width:100%;
}
.thumb img {
width: 100%;
padding: 0;
}
.thumb > div {
background-color: rgba(0,0,0,0.1);
opacity: 0;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.thumb:hover > div {
display: block;
opacity: 1.0;
}
.thumb > div div {
}
#text {
vertical-align: middle;
position: relative;
z-index: 2;
display: inline-block;
}
</style>
This how generally we vertically center some text in a responsive div:
.container {
min-height: 10em;
display: table-cell;
vertical-align: middle
}
This the DIV that you want to vertically center <div class="container">