I have a row of cards and when I mouse over one of the cards, I want a "Shop Now" button to appear on the card. Is there a way to do it with just CSS?
This is the part of the card with the button:
<div class="card-text">
<button type="button" id="btnShopNow" class="btn btn-primary">Shop Now</button>
</div>
Here is what I have for the css so far:
.btnShopNow .card {
display:none;
}
.card:hover {
transform:scale(1.1);
background-color:#f8f9fa;
/* need to figure out how to do something like #btnShopNow display:block; */
}
Related
I would like to change the size of some bootstrap offcanvas elements. (not all!)
(To change all, I know I can change the SASS-Varianble ($offcanvas-horizontal-width: 400px))
I would like to make this work in a way that I have different CSS classes that I can add to the offcanvas (like the modal with .modal-xl).
I.e. here e.g. .offcanvas-size-l and .offcanvas-size-xl
Of course, the offcanvas should also remain responsive (i.e. not go beyond 100vw for narrower screens. (i.e. with max-width / media-query).
Unfortunately, this is not feasible only simply with a width specification, because bootstrap work in addition to width with corrosponding negative margin which push the offcanvas "out of screen" I.e. that are several values that must be adjusted.
Since I "compile" bootstrap itself via Sass, I have a more Options and can insert before and after the (s)css any parts/SASS functions. (or edit bootstrap source)
Has anyone been able to make this work?
I don't need the "responsive-offcanvas" function (offcanvas-xl) which is new in 5.2 /an does something complete different.
Example code (Directly from the bootstrap page, only "offcanvas-size-xl" added)
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
Toggle static offcanvas
</button>
<div class="offcanvas offcanvas-start offcanvas-size-xl" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
I will not close if you click outside of me.
</div>
</div>
</div>
In the end it was easier than I thought, there is also a CSS variable that you can influence (mit SASS):
.offcanvas-size-xl {
--#{$prefix}offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
--#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
--#{$prefix}offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
--#{$prefix}offcanvas-width: min(95vw, 250px) !important;
}
For those who do not compile bootstrap, they should be able to do so:
.offcanvas-size-xl {
--bs-offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
--bs-offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
--bs-offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
--bs-offcanvas-width: min(95vw, 250px) !important;
}
I am trying to move the .mat-tab-header-pagination-after to next to the .mat-tab-header-pagination-before in a .mat-tab-group, the angular tab component. I am wondering how I am able to move the after pagination either in the html or css. Since it is automatic when the pagination shows, I am not sure how I am able to instantiate it differently so that it moves to the placement I want it to be. Any help from html or css familiar with angular components?
<mat-tab-group [selectedIndex]="selected.value"
(selectedIndexChange)="selected.setValue($event)">
<mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab" (contextmenu)="onContextMenu($event, tab)">
<ng-template mat-tab-label>
<div class="col" style="margin-left: 20px;">{{tab}}</div>
<button *ngIf="tab.name !== 'Main'" style="color:black; bottom:10px; right:10px" mat-icon-button (click)="closeTab(index)">
<mat-icon>close</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="contextMenu">
<mat-icon>more_vert</mat-icon>
</button>
</ng-template>
Contents for {{tab}} tab
</mat-tab>
<mat-tab disabled>
<ng-template mat-tab-label>
<button mat-icon-button (click)="addTab(selectAfterAdding.checked)">
<mat-icon>add_circle</mat-icon>
</button>
</ng-template>
</mat-tab>
</mat-tab-group>
Before Picture:
Image of how it is now
After Picture with wanted placement:
Image with moved placement
Since .mat-tab-header is a flex container, you can user the order property on child elements to change it's order:
.mat-tab-header-pagination-controls-enabled {
.mat-tab-header-pagination-before {
order: 0;
}
.mat-tab-header-pagination-after {
order:1;
}
.mat-tab-label-container {
order: 2;
}
}
Note that due to style encapsulation you need to apply those in global styles.
Stackblitz with updated styles (forked from official examples) here.
When i create a radio button in jQuery mobile, a radio circle appear in the next of the created radio as appear in the photo , why this extra radio circle appear ? how can i solve this ?? please help me ...
<fieldset>
<legend> Gender </legend>
<div class="ui-grid-a">
<div class="ui-block-a ">
<input type="radio" id="Male" name="radio-group-1" value="Male" />
<label for="Male" data-inline="true">Male</label>
</div>
<div class="ui-block-b">
<input type="radio" id="Female" name="radio-group-1" value="Female" />
<label for="Female" data-inline="true" >Female</label>
</div>
</div>
Override .ui-radio class when you want to change radio button position.
.ui-radio {
float:right;
text-align:right;
}
Hide radio buttons with a transparent background
.ui-radio input[type="radio"] {
display: none;
}
Demo
I am using jquery-mobile, and I have these two buttons:
<p id="propart">Pro:
<select id="chosenpro" data-inline="true"></select>
<button type="button" id="resetbutton" data-inline="true" data-theme="w">Reset</button>
</p>
I would like them to be displayed side by side (inline).
But I can't figure it out. I did this but it doesn't work. Can you help ?
Here is my css:
#propart .ui-select {
width:75%;
}
#propart .ui-select .ui-btn-icon-right {
width:100%;
}
#propart .ui-btn {
width:25%;
}
Use ui-grid classes, and override their width.
Demo
Markup
<div class=ui-grid-a>
<div class=ui-block-a>button 1</div>
<div class=ui-block-b>button 2</div>
</div>
CSS
.ui-block-a { width: 75% !important; }
.ui-block-b { width: 25% !important; }
There is no need to define any css rules.
jqm has Layout grids
All you need to do is:
<div class=ui-grid-a>
<div class=ui-block-a> <select id="chosenpro" data-inline="true"></select></div>
<div class=ui-block-b><button type="button" id="resetbutton" data-inline="true" data-theme="w">Reset</button></div>
</div>
I'm toggling a class that hides and unhides a div within a list item, but I'm having problems applying a slideToggle to it.
Here is the HTML and CSS;
<style>
.collapsed .widget-content {
display:none !important;
}
</style>
<ul id="column1" class="column">
<li class="widget color-green" id="intro">
<div class="widget-head">
<a class="collapse" href"#">collapse</a>
<h3>The Title</h3>
</div>
<div class="widget-content">
<p>content here</p>
</div>
</li>
</ul>
Here is the jQuery to toggle the class of the li on click on the link with the class "collapse"
$(this).parents(settings.widgetSelector).toggleClass('collapsed');
How do I apply the slideToggle so that it only slides away the "widget-content" div whilst toggling the "collapsed" class on the li at the same time?
Thanks in advance for your advice.
you could try a callback when the toggle is complete:
$(this).parents(settings.widgetSelector).slideToggle('slow', function() {
$('#intro').toggleClass('collapsed');
});
something like that?