I have explained everything in the attached image. and all CSS code are in the stackblitz.
Basically I want a customized Next and Prev button. I want the border of the Next and Prev button to be same as the inside boxes. and with rounded corner. (that means to show that there is a Prev or Next box still available so use can click on Next/Prev
The problem I am getting now is when I click on the Next/Prev, the border is getting bold and blue. I believe it is coming from the default browser(not sure though)
https://stackblitz.com/edit/primeng-carousel-demo-i1lnft
.p-carousel-prev-icon,
.pi {
display: none !important;
}
.pi {
display: none !important;
}
.pi-chevron-left:before {
content: '' !important;
}
::ng-deep .p-carousel .p-carousel-content .p-carousel-next::after {
width: 0.513rem;
height: 1.25rem;
font-size: 0.875rem;
font-family: Roboto;
transform: scale(2, 4);
}
::ng-deep .p-carousel .p-carousel-content .p-carousel-prev {
width: 2.513rem;
height: 5.68rem;
border-radius: 25%;
border-right-color: #99bbff;
border-right-style: solid;
border-right-width: thick;
border-top-color: #99bbff;
border-top-style: solid;
border-top-width: thick;
border-bottom-color: #99bbff;
border-bottom-style: solid;
border-bottom-width: thick;
margin: 0 0 0 -5px;
}
::ng-deep .p-carousel .p-carousel-content .p-carousel-next {
width: 2.513rem;
height: 5.68rem;
border-radius: 25%;
border-left-color: #99bbff;
border-top-color: #99bbff;
border-bottom-color: #99bbff;
border-left-style: solid;
border-top-style: solid;
border-bottom-style: solid;
border-left-width: thin;
border-top-width: thin;
border-bottom-width: thin;
margin: 0 -5px 0 0;
outline: none !important;
}
.p-carousel-next:focus {
border-left-style: solid !important;
border-top-style: solid !important;
border-bottom-style: solid !important;
border-left-width: thin !important;
border-top-width: thin !important;
border-bottom-width: thin !important;
outline: none !important;
}
::ng-deep .p-carousel .p-carousel-content .p-carousel-next:focus {
border-left-style: solid !important;
border-top-style: solid !important;
border-bottom-style: solid !important;
border-left-width: thin !important;
border-top-width: thin !important;
border-bottom-width: thin !important;
outline: none !important;
}
::ng-deep .p-carousel .p-carousel-content .p-carousel-next:hover {
border-left-style: solid !important;
border-top-style: solid !important;
border-bottom-style: solid !important;
border-left-width: thin !important;
border-top-width: thin !important;
border-bottom-width: thin !important;
outline: none !important;
}
::ng-deep .p-carousel .p-carousel-content .p-carousel-next:enabled {
border-left-style: solid !important;
border-top-style: solid !important;
border-bottom-style: solid !important;
border-left-width: thin !important;
border-top-width: thin !important;
border-bottom-width: thin !important;
outline: none !important;
}
::ng-deep .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
border-left-style: solid !important;
border-top-style: solid !important;
border-bottom-style: solid !important;
border-left-width: thin !important;
border-top-width: thin !important;
border-bottom-width: thin !important;
outline: none !important;
}
::ng-deep .p-carousel .p-carousel-content .p-carousel-next:active {
border-left-style: solid !important;
border-top-style: solid !important;
border-bottom-style: solid !important;
border-left-width: thin !important;
border-top-width: thin !important;
border-bottom-width: thin !important;
outline: none !important;
}
::ng-deep .p-carousel .p-carousel-content .p-carousel-prev::after {
width: 0.513rem;
height: 1.25rem;
font-size: 0.875rem;
font-family: Roboto;
transform: scale(2, 4);
}
::ng-deep .p-disabled {
/* visibility: hidden !important; */
border-left-color: white !important;
border-right-color: white !important;
border-top-color: white !important;
border-bottom-color: white !important;
}
There's a box-shadow that is added when the button is focused.
You can remove it with this style:
::ng-deep .p-carousel .p-carousel-content .p-carousel-prev:focus {
box-shadow: none;
}
Also, I think this is what you mentioned in the image, but the previous button have border width set to thick, it should be changed to thin to match the next button:
::ng-deep .p-carousel .p-carousel-content .p-carousel-prev {
width: 2.513rem;
height: 5.68rem;
border-radius: 25%;
border-right-color: #99bbff;
border-right-style: solid;
border-right-width: thin;
border-top-color: #99bbff;
border-top-style: solid;
border-top-width: thin;
border-bottom-color: #99bbff;
border-bottom-style: solid;
border-bottom-width: thin;
margin: 0 0 0 -5px;
}
Here's the updated demo: https://stackblitz.com/edit/primeng-carousel-demo-dbzinn
do you want to keep the blue border ? because this is enough to edit your buttons :
.p-carousel-next, .p-carousel-prev {
box-shadow: none !important;
border-width: 1px !important;
/* if you wish to remove the border or change its color */
/* border: transparent !important; */
}
Related
What I want to achieve:
For mobile: only border top/bottom,
For desktop: only border start/end, in border-dark color.
What I've tried:
added custom responsive borders to main.scss
// responsive borders
#each $breakpoint in map-keys($grid-breakpoints) {
#include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.border#{$infix}-top { border-top: $border-width solid $border-color !important; }
.border#{$infix}-end { border-right: $border-width solid $border-color !important; }
.border#{$infix}-bottom { border-bottom: $border-width solid $border-color !important; }
.border#{$infix}-start { border-left: $border-width solid $border-color !important; }
.border#{$infix}-top-0 { border-top: 0 !important; }
.border#{$infix}-end-0 { border-right: 0 !important; }
.border#{$infix}-bottom-0 { border-bottom: 0 !important; }
.border#{$infix}-start-0 { border-left: 0 !important; }
.border#{$infix}-x {
border-left: $border-width solid $border-color !important;
border-right: $border-width solid $border-color !important;
}
.border#{$infix}-y {
border-top: $border-width solid $border-color !important;
border-bottom: $border-width solid $border-color !important;
}
}
}
in html:
<div class="col-sm-4 d-flex justify-content-center justify-content-sm-center border border-dark border-start-0 border-end-0 border-md-start border-md-end border-md-top-0 border-md-bottom-0 overflow-hidden"></div>
The problem is borders start/end on desktop appears in default 1px solid #dee2e6 !important bootstrap color
I think you need to specifically set border-{side}-width and border-style instead of the shorthand. Otherwise the color in the shorthand used by Bootstrap's .border: {1px solid #dee2e6 !important;} will override it.
#include media-breakpoint-up($breakpoint) {
.border#{$infix}-top { border-top-width: $border-width !important; border-style: solid !important; }
.border#{$infix}-end { border-right-width: $border-width !important; border-style: solid !important; }
.border#{$infix}-bottom { border-bottom-width: $border-width !important; border-style: solid !important; }
.border#{$infix}-start { border-left-width: $border-width !important; border-style: solid !important; }
.border#{$infix}-top-0 { border-top-width: 0 !important; }
.border#{$infix}-end-0 { border-right-width: 0 !important; }
.border#{$infix}-bottom-0 { border-bottom-width: 0 !important; }
.border#{$infix}-start-0 { border-left-width: 0 !important; }
}
SASS demo
Please refer to attached
image
How can hide the red line (its a span) from out of div?
Margin left not worked because the line left the other side.
How can fix it?
#keyframes linewidth1 {
0%{
border-bottom: 4px solid white;
width: 0%;
}
25%{
border-bottom: 4px solid white;
border-bottom: 4px solid white;
width: 0%;
}
60%{
border-bottom: 4px solid white;
border-bottom: 4px solid white;
}
75%{
border-bottom: 2px solid transparent;
border-bottom: 2px solid transparent;
}
90%{
width: 100%;
border-bottom: 2px solid #e10000;
border-bottom: 2px solid #e10000;
}
}
.line2 {
left: 0;
animation: linewidth1 3s;
border-bottom: 2px solid #e10000;
width: 100%;
float: left;
height: 1px;
display: inline-block;
margin-top: 57px;
}
.single_style {
position: relative;
padding-top: 15px;
background-color: rgb(238, 238, 234);
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: cadetblue;
border-bottom-left-radius: 57px;
border-bottom-right-radius: 11px;
border-bottom-style: solid;
border-left-color: cadetblue;
border-left-style: solid;
border-right-color: cadetblue;
border-right-style: solid;
border-top-color: cadetblue;
border-top-left-radius: 170px;
border-top-right-radius: 39px;
border-top-style: solid;
border-top-width: 4px;
border-right-width: 2px;
border-left-width: 1px;
border-bottom-width: 1px;
margin-left: 20px;
margin-right: 3%;
margin-top: auto;
max-width: 1200px;
margin-bottom: 5px;
margin-top: 5px;
}
<body>
<div class="single_style" style="height:200px;">
<span class="line2"></span>
</div>
</body>
How can hide the red line (its a span) from out of div?
Margin left not worked because the line left the other side.
How can fix it?
added overflow: hidden; to .single_style
.line2 {
left: 0;
animation: linewidth1 3s;
border-bottom: 2px solid #e10000;
width: 100%;
float: left;
height: 1px;
display: inline-block;
margin-top: 57px;
}
.single_style {
position: relative;
padding-top: 15px;
background-color: rgb(238, 238, 234);
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: cadetblue;
border-bottom-left-radius: 57px;
border-bottom-right-radius: 11px;
border-bottom-style: solid;
border-left-color: cadetblue;
border-left-style: solid;
border-right-color: cadetblue;
border-right-style: solid;
border-top-color: cadetblue;
border-top-left-radius: 170px;
border-top-right-radius: 39px;
border-top-style: solid;
border-top-width: 4px;
border-right-width: 2px;
border-left-width: 1px;
border-bottom-width: 1px;
margin-left: 20px;
margin-right: 3%;
margin-top: auto;
max-width: 1200px;
margin-bottom: 5px;
margin-top: 5px;
overflow: hidden;
}
<body>
<div class="single_style" style="height:200px;">
<span class="line2"></span>
</div>
</body>
Simply create this line using background:
.single_style {
background:linear-gradient(#e10000,#e10000) 0 57px/100% 2px no-repeat;
animation: linewidth1 3s;
padding-top: 15px;
background-color: rgb(238, 238, 234);
border-radius:170px 39px 11px 57px;
border-top: 4px solid;
border-right: 2px solid;
border-left: 1px solid;
border-bottom: 1px solid;
border-color: cadetblue;
margin:5px 3% 5px 20px;
max-width: 1200px;
}
#keyframes linewidth1 {
0%,25%{
background-size:0% 2px;
background-image:linear-gradient(#fff,#fff);
}
60%{
background-size:100% 4px;
}
75%{
background-size:100% 0px;
background-image:linear-gradient(#fff,#fff);
}
75.01%{
background-size:100% 0px;
background-image:linear-gradient(#e10000,#e10000);
}
90%{
background-size:100% 2px;
background-image:linear-gradient(#e10000,#e10000);
}
}
<body>
<div class="single_style" style="height:200px;">
</div>
</body>
Float the span to the right side and decrease its width to 95%
.line2 {
left:0;
animation: linewidth1 3s;
border-bottom: 2px solid #e10000;
width: 95%;
float: right;
height: 1px;
display: inline-block;
margin-top: 57px ;
}
.single_style{
position: relative;
padding-top: 15px;
background-color: rgb(238, 238, 234);
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: cadetblue;
border-bottom-left-radius: 57px;
border-bottom-right-radius: 11px;
border-bottom-style: solid;
border-left-color: cadetblue;
border-left-style: solid;
border-right-color: cadetblue;
border-right-style: solid;
border-top-color: cadetblue;
border-top-left-radius: 170px;
border-top-right-radius: 39px;
border-top-style: solid;
border-top-width: 4px;
border-right-width: 2px;
border-left-width: 1px;
border-bottom-width: 1px;
margin-left: 20px;
margin-right: 3%;
margin-top: auto;
max-width: 1200px;
margin-bottom: 5px;
margin-top: 5px;
}
<body>
<div class="single_style" style="height:200px;">
<span class="line2"></span>
</div>
</body>
This is an issue inside a shopping cart, so unfortunately it's a multi-step process to view it:
https://blendbee.com/shop/black-tea-blends/happy-times/
Click one of the 3 "Add to cart" buttons
Click "View Cart"
Notice that the "Apply Gift card" button appears on a lower line. I'd like it to be to the right of the "Gift Cart" input field.
Thanks in advance guys! You rock.
Since you already have inline styling as such:
<input name="giftcard_code" class="input-text" id="giftcard_code" style="line-height: 1em; padding-top: 6px; padding-right: 6px; padding-bottom: 5px; padding-left: 6px; margin-top: 0px; margin-right: 4px; margin-bottom: 0px; margin-left: 0px; border-top-color: #e0dadf; border-right-color: #e0dadf; border-bottom-color: #e0dadf; border-left-color: #e0dadf; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; float: left; outline-width: 0px; outline-style: none; outline-color: invert; box-sizing: border-box; box-shadow: inset 0px 1px 4px 0px rgba(0,0,0,0.1);" type="text" placeholder="Gift Card" value=""/>
Insert:
width:100px; display:inline;
Anywhere inside the style attribute like this:
<input name="giftcard_code" class="input-text" id="giftcard_code" style="width:100px; display:inline; line-height: 1em; padding-top: 6px; padding-right: 6px; padding-bottom: 5px; padding-left: 6px; margin-top: 0px; margin-right: 4px; margin-bottom: 0px; margin-left: 0px; border-top-color: #e0dadf; border-right-color: #e0dadf; border-bottom-color: #e0dadf; border-left-color: #e0dadf; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; float: left; outline-width: 0px; outline-style: none; outline-color: invert; box-sizing: border-box; box-shadow: inset 0px 1px 4px 0px rgba(0,0,0,0.1);" type="text" placeholder="Gift Card" value=""/>
HTML:
<div id="entry">
<form>
<input id="input" placeholder="Coupon Code"></input>
<button id="submit" type="submit">Apply Coupon</button>
</form>
</div>
CSS:
input {
display: inline;
width: 70%;
}
button {
display: inline;
width: 20%;
}
The width makes it so that they two will never "overflow" the width of the containing div.
This should work (CSS):
#giftcard_code {width: 300px;}
Feel free to change the "width" to anything :) With so many floats in place, you have to specify dimensions to elements, since browser thinks 100% width in these cases.
I want to set each element in the first row of my table to have a left border of a certain color and a right border of a certain color. Unfortunately, it looks like the borders of adjacent table cells are overlapping and I only get the left border color showing. The left border is supposed to be light gray and the right side dark gray.
Here is my HTML generating the table. (HTML is generated in cherrypy)
<th id="tbl_head" colspan='4'>%s</th>
<tr>
<td id="colhead">Track</td>
<td id="colhead">Artist</td>
<td id="colhead_time">Time</td>
<td id="colhead">Album</td>
</tr>
Here is my CSS:
table {
font-family: verdana,arial,sans-serif;
font-size:11px;
margin-left: auto;
margin-right: auto;
border-width: 1px;
border-collapse: collapse;
}
td {
padding: 3px;
}
#colhead {
font-weight: bold;
text-align: left;
background-color: #989898;
color: #000000;
border-left-color: #aeaeae;
border-left-style: solid;
border-left-width: 2px;
border-right-color: #6c6c6c;
border-right-style: solid;
border-right-width: 1px;
}
#colhead_time {
font-weight: bold;
text-align: right;
background-color: #989898;
color: #000000;
border-left-color: #aeaeae;
border-left-style: solid;
border-left-width: 2px;
border-right-color: #6c6c6c;
border-right-style: solid;
border-right-width: 1px;
}
Use the below properties on your table CSS.
border-collapse: separate;
border-spacing: 0px;
table {
font-family: verdana, arial, sans-serif;
font-size: 11px;
margin-left: auto;
margin-right: auto;
border-width: 1px;
border-collapse: separate;
border-spacing: 0px;
}
td {
padding: 3px;
}
#colhead {
font-weight: bold;
text-align: left;
background-color: #989898;
color: #000000;
border-left-color: red;
border-left-style: solid;
border-left-width: 2px;
border-right-color: blue;
border-right-style: solid;
border-right-width: 1px;
}
#colhead_time {
font-weight: bold;
text-align: right;
background-color: #989898;
color: #000000;
border-left-color: red;
border-left-style: solid;
border-left-width: 2px;
border-right-color: blue;
border-right-style: solid;
border-right-width: 1px;
}
<table>
<th id="tbl_head" colspan='4'>%s</th>
<tr>
<td id="colhead">Track</td>
<td id="colhead">Artist</td>
<td id="colhead_time">Time</td>
<td id="colhead">Album</td>
</tr>
</table>
Fiddle Demo
In your css, you have added the wrong value for border-color property.
You write it as:
border-right-color: 1px solid #6c6c6c;
while it should be:
border-right-color: #6c6c6c;
It's your use of border-collapse: collapse; use border-spacing:0;border-collapse:no-collapse; instead.
I'm creating a table to display all my subjects content.
My table td vertical border doesn't appear, below is the css code.
Please help.
table.subjects {
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color: gray;
border-collapse: collapse;
background-color: white;}
table.subjects th {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: ;}
table.subjects td {
border-width: 1px;
padding: 1px;
border-style: solid;
border-color: gray;
background-color: white;
-moz-border-radius: ;}
in html you shoud set border of attribute of table to 1 . did you do it?
it is solution:
<table border="1">
you can use css class like
.tableborder{
border:1px solid gray;
}