I have a bootstrap modal. There are two bootstrap tabs in that modal. "Work" button is the active tab. "Hire" button is the other tab. This modal wrapped with .col-md-8 class with these styles
#media (min-width: 992px) {
.col-md-8 {
width: 87%;
margin-top: 37px;
margin-bottom: 31px;
}
}
The problem is that the "Hire" tab content has a higher width than "Work" content. So it's looking his way.
I need to show "Hire" tab original width when someone click "Hire" tab. I know this happened because I wrapped with .col-md-8 class. Don't have any option to hide that main class on click and show "Hire" tab original width? I'm using meteor and react.
If you want to achieve this the best way is to use jquery.
You have to give id to work, hire button and work-content and hire-content.
for e.g.
HTML:
<button id="work-btn">Work</button> <button id="hire-btn">Hire</button>
<div id="work-content"> The content goes here </div>
<div id="hire-content"> The content goes here </div>
CSS:
.hire-content {
display:none;
}
Jquery:
$(document).ready(function(){
$("#hire-btn").click(function() {
$("#work-content").hide();
$("#hire-content").show();
});
});
Hope this helps. If you have any query feel free to ask.
You can increase width of modal-dialog by adding class.you can add class modal-lg. then you can expand width of modal when clicking Hire tab.
Related
We have a weird issue with our SVG icons in our mobile menu. They appear very big in the mobile version although they are set at 1.6em.
Go here, open the hamburger menu and click on the "Shop Now" Dropdown, you will see the size of the icons
We tried the following CSS in the WordPress Customizer but it seems like it's not that class, and that's weird because using the Chrome Developer Tools if we modify that class it seems to change.
.sidr-class-icon sidr-class-before sidr-class-svg {
max-width: 15%;
}
Note: Using !important tag also doesn't work.
The class of this image is class='sidr-class-icon sidr-class-before sidr-class-svg'. So to select it in css you need to use:
.sidr-class-icon.sidr-class-before.sidr-class-svg { ... }
And not:
.sidr-class-icon sidr-class-before sidr-class-svg { ... }
.sidr-class-icon.sidr-class-before.sidr-class-svg {
max-width: 15%;
border: solid red 3px;
}
<img src="https://www.safe-company.com/wp-content/uploads/2020/08/bmeeting.svg" class="sidr-class-icon sidr-class-before sidr-class-svg" aria-hidden="true">
Try setting height and width attributes for your img tags.
Today I have this code, basically when I click on Details button it opens a mat-menu but somehow I can not modify padding or width values of the menu :
<div id="box-upload" [hidden]="hiddenBoxUpload" *ngIf="filesExist">
<button mat-raised-button color="primary" [matMenuTriggerFor]="listFiles">Details</button>
<mat-menu class="filesList" #listFiles="matMenu">
<div *ngFor="let key of listkey">
<div *ngIf="detailsExist">
<!-- some stuff like mat-progress-bar and span>
</div>
</div>
</mat-menu>
</div>
css code :
.filesList {
width: auto;
padding: 15px;
}
What are the ways to change default padding and width of a mat-menu ?
You can either put the following in your global styles.css
.mat-menu-content {
padding: 30px;
}
Or you can use ::ng-deep in your component style sheet
::ng-deep .mat-menu-content {
padding: 30px;
}
Either solution above will allow you to modify the default padding of
all mat-menu's in your project.
Per this SO answer, until an alternative or replacement is provided for ::ng-deep the recommendation is to continue using it...
What to use in place of ::ng-deep
If you want to control only a specific mat-menu you will need to use your custom class in your CSS selectors
::ng-deep .filesList .mat-menu-content{
padding: 30px;
}
Revision
To adjust the width of the mat-menu without creating a scroll bar you need adjust the width of the root container cdk-overlay-pane... by adjusting the width of the mat-menu-content you are making that container wider than the root container, and because it is within the root container cdk-overlay-pane it creates a scroll bar by design. Try the following to widen the mat-menu without creating a scroll bar.
::ng-deep .cdk-overlay-pane .filesList{
min-width:600px;
}
I have the following page - and the header links, such as "Our Tours" and "Pick Up Points" are not linkable and I dont understand why. Can someone please help me understand why this wont work correctly.
https://www.comparestonehengetours.com/tour/categories.php?path=Day+Tours
Such as source text...
<li onclick="document.location='https://www.comparestonehengetours.com/pick_up.php'">
<a>Pick Up Points</a>
</li>
Thanks!
The div with class .site-content.large-centered is over your menu.So in that page the click is on that div instead of the menu.When you inspect the page you can see that.
#media only screen and (min-width: 64.063em).column.large-centered, .columns.large-centered {
margin-left: auto;
margin-right: auto;
float: none;}
remove the float none and you can click the menu.And also remove the javascript for menu linking put the links directly.thats good
I have tried for hours in vain to use a widget of pinterest to have different background and text colour in description. My page is
http://www.nicholasboydcrutchley.com/short-stories/woman-and-wolf
I know it changes its class on load.
Does anyone know what code and where to put in CSS?
Also, what html to use. Alternatively, can i fix the height of the widget so only the picture remains?
<a data-pin-do="embedPin" href="http://www.pinterest.com/pin/386535580491200669/"></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
I've even tried using a pin button, fixing the parameters, but I am very unsure how to include # in the description of the pin.... as in
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png">
If you know how to allow # in the description, that would be great too.
Thank you for your kind help
For the whole widget:
Remove the classes PIN_1404822151302_embed_pin PIN_1404822151302_fancy from the span and add your own class.
Copy and paste the relevant CSS that you want to keep.
CSS for span (remove any !important)
.myPinWidget {
/*styles I want to keep from old class CSS */
/*custom styles*/
}
OR
For the actual button:
Remove the class PIN_1404822151302_repin and add your own class
Copy and paste the relevant CSS that you want to keep.
CSS for current button
span.PIN_1404822151302_embed_pin a.PIN_1404822151302_embed_pin_link i.PIN_1404822151302_repin {
left: 12px!important;
top: 12px!important;
position: absolute!important;
height: 20px!important;
width: 40px!important;
background-size: 40px 60px!important;
background: transparent url(http://passets.pinterest.com/images/pidgets/pinit_bg_en_rect_red_20_1.png);
}
CSS for new button (remove !important)
.myPinButton {
/*styles I want to keep from old class CSS */
/*custom styles*/
}
HTML
<i class="myPinButton" data-pin-id="386535580491200669" data-pin-log="embed_pin_repin" data-pin-href="//www.pinterest.com/pin/386535580491200669/repin/x/"></i>
I have a page with a left sidebar that I want to be able to toggle on or off based on whether or not the user clicks it. Unfortunately entering JavaScript code on this website has been disabled and I only have access to CSS.
The left sidebar has
its main div (parentBlock)
a div for the show/hide, (toggleBlock)
a div for the logo, (div1)
a div for the navbar, and (div2)
a div for social icons (div2)
When the user clicks on "Show / Hide" I want to:
Hide (display:none) the logo, navbar, and social div's, and
Set the height of the main div to something smaller (say 30px).
Is there any way to do this in CSS?
<div class="parentBlock">
<div class="toggleBlock">Show / Hide</div>
<div class="divBlah">div1</div>
<div class="divBlah">div2</div>
<div class="divBlah">div3</div>
</div>
Then if the user clicks "Show / Hide" again, it will unhide the div's and set the height back to filling the screen.
Is this possible?
I found some code that would work if the "Show / Hide" button was in "parentBlock" but it didn't work if it was within "toggleBlock" (and I have to have the Show/Hide button in toggleBlock)
(http://tympanus.net/codrops/2012/12/17/css-click-events/)
I realize onClick events require JavaScript. Those are not possible since I can't use JavaScript :( Some people try to get around it by using either :active or creating checkboxes and having the checkbox:clicked value load the action ... but it only works with certain relations that I can't seem to nail down.
Unfortunately I cannot alter the ultimate structure of "toggleBlock", div1, div2, and div3 ... only what's in them and their CSS. Also making it even more difficult is that the website randomly generates ID="" each time the page loads so the TARGET method isn't possible. Also, the 3 div's (div1 thru div3) have the same class name. I'm beginning to think it's impossible :(
(For reference, I'm trying to use the tools on the New SmugMug and they're rather restrictive)
Here is a CSS only solution using target
DEMO http://jsfiddle.net/kevinPHPkevin/r4AQd/
.button {
display: block;
width:60px;
background: red;
z-index:1;
}
#element {
display: none;
background:#fff;
margin-top:-20px;
z-index:2;
}
#element:target {
display: block;
}
#show:target {
display: block;
}
#hide {
background: #000;
color: #fff;
}
As Joum has pointed out this is not possible to do via click events but using hover on siblings you might be able to achieve a similar effect. for example try adding this css:
div.toggleBlock { display: block; }
div.toggleBlock ~ div { display: none; }
div.toggleBlock:hover ~ div { display: block; }
for more information see this: http://css-tricks.com/child-and-sibling-selectors/