I would like to know if there is a possibility to show the caption only in fullscreen mode.
I need this for a custom website I an working on and the client requested that the captions only be shown in fulscreen mode.
Use this css rules
.fotorama .fotorama__caption {
display: none;
}
.fotorama--fullscreen .fotorama__caption {
display: block;
}
Related
I'm working on building a responsive mobile navigation menu, and ran into an error with toggling open/close
The way I decided to go about it is to add className="show" that has a property of display: block to what's currently active, and className="hide" with a property of display: none.
This is my set up:
import {MenuOpen, MenuClose} from '../assets/AssetsIndex';
function menuActive() {
let menu = document.getElementById('mobile-menu');
let menuOpen = document.getElementById('menu-open');
let menuClose = document.getElementById('menu-close');
menu.classList.contains('active') ? open() : close();
function close() {
menu.classList.add('active');
menuClose.classList.add('show');
menuOpen.classList.add('hide');
menu.style.transform = 'translateX(0%)';
}
function open() {
menu.classList.remove('active');
menuOpen.classList.add('show');
menuClose.classList.add('hide');
menu.style.transform = 'translateX(100%)';
}
}
Initializing the menu icon with the class name:
<MenuOpen className='menu show' onClick={menuActive} id='menu-resting' />
<MenuClose className='menu hide' onClick={menuActive} id='menu-open' />
Scss:
.menu {
cursor: pointer;
margin: 0 auto;
position: absolute;
right: 2%;
z-index: 100;
&:hover path {
fill: #fff;
}
path {
fill: #fff;
}
}
.show {
display: block;
}
.hide {
display: none;
}
Error:
I went about displaying the menu container in the same way, so I'm not sure why I can't do the same with an SVG element. I've tried adding the properties with JS but ran into the same issue of the property value is null.
If anyone can tell me what I'm doing wrong that would be greatly appreciated.
There is no element with id menu-close in your code. Probably a typo. Assuming id prop of the MenuClose component is the id of the underlying element you have menu-open there.
Also, I would suggest using state hook for controlling whether the Menu is open or closed.
I am using ionic modal in ionic project. the modal is appearing on page clearly, but when I am trying to enter any text into any textbox the keyboard is appearing on page.
Once the keyboard appeared, I am unable to see the html of modal and also unable to scroll modal.
kindly refer the screenshot.
Thank you.
Waited for long time and did't get any answer, So I have written some css to fix this issue, This is working in my project as well as dominik
also tried this. see the comment by him
#media(min-width: 680px){
.modal{ top: 0; height: 70%; }
body.keyboard-open.modal{ height: 90%; }
body.keyboard-open.modal.scroll{ overflow-y: scroll !important; }
}
.overflow-scroll.keyboard-up:not(.keyboard-up-confirm){
overflow-y: scroll;
height: 100% !important;
top: 0;
}
Had to come up with this fix. it worked for me, so give it a try: Put the code in your app.run
NOTE: this issue is normally caused when you set android:windowSoftInputMode="adjustPan" in your AndroidManifest.xml
Make sure jquery is included in your app.
window.addEventListener('native.keyboardshow', keyboardShowHandler);
window.addEventListener('native.keyboardhide', keyboardHideHandler);
function keyboardShowHandler(e){
setTimeout(function() {
var originalHeight = window.innerHeight-30;
var newHeight = originalHeight - e.keyboardHeight;
$('ion-modal-view ion-content').css("height", newHeight);
}, 0);
}
function keyboardHideHandler(e){
setTimeout(function() {
var newHeight = '100%';
$('ion-modal-view ion-content').css("height", newHeight);
}, 0);
}
I am using https://github.com/n3-charts/line-chart library to generate charts. Is it possible to change font size of axis labels? I could not find such option in official documentation.
Something like this on the CSS would work
.tick text {
font-size: 120%;
}
Edit: The appearance of many SVG elements can be configured using CSS, just inspect them in the browser and try modifying them.
When the chart is generated it has it's own classes that you can take advantage of overwriting... Here are all the axis for example:
// X-Axis Font
.x-axis {
font-size: 120%;
}
// Left Y-Axis
.y-axis {
font-size: 130%;
}
// Right Y-Axis
.y2-axis {
font-size: 140%;
}
Hope that helps.
How can I use Font Awesome in ui.bootstrap.rating?
I found out, that when I add state-on="'fa-star'" state-off="'fa-star-o'" to and changed class="glyphicon" to class="fa" in ui-bootstrap-tpls it works.
But I guess there is a more custom way to change the class of the icons.
Yeah as you are doing with setting state-off and state-on is their recommended manner. If you are going to have lots of the ratings on a page, I would just create a custom template and over-ride the stock template. Here is a post custom templates
I had Font Awesome and so didnt want to include Glyphicons.
uib.bootstrap Version: 1.3.3 - 2016-05-22 uses limited Glyphicons, so this is what i added to my css
.glyphicon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-star:before {
content: "\f005";
}
/**
copied from
.fa-star:before {
content: "\f005";
}
*/
.glyphicon-star-empty::before {
content: "\f006";
}
.glyphicon-chevron-right:before {
content: "\f054";
}
.glyphicon-chevron-left:before {
content: "\f053";
}
.glyphicon-chevron-up:before {
content: "\f077";
}
.glyphicon-chevron-down:before {
content: "\f078";
}
i.e. added css from Font Awesome 4.6.3 to appropriate glyphicon names
Now i dont know if this code will break on version of Font Awesome
How to create Responsive Email Template?
I can build responsive layout using media-query but these styles we can write only in external/internal CSS. Email template we cannot use DIV and external/internal CSS.
How can i build responsive email template.
Thanks,
Shanid
Using media queries in an HTML email is not a very good solution to developing a responsive HTML email because the vast majority of your audience is not going to see it the way you intend.
Gmail will not preserve any CSS in the head of an html email. This is where media queries are, so .. won't work.
Android supports media queries but it's buggy at best.
The best way to develop a pseudo-responsive HTML email is to build a fluid layout HTML email. Design your email with (for simplicity) a single column layout. You can develop a fluid layout with a multi-column layout but it can get pretty complicated quick.
Design your layout as normal, inline all your styling and using depreciated HTML attributes rather than css styling.. doesn't matter if it's inline, CSS still won't play well in HTML emails. Use it sparingly, don't use it at all if you can avoid it.
Do not assign height to your elements and assign width only in percentage values. Therefore allowing the device displaying the email to determine the best width to display based on the percentage values rather than specific pixel sizes.
<table width="90%" cellpadding="0" cellspacing="0" border="0">...</table>
Here's a good example of a fluid layout: http://woothemes.createsend1.com/t/ViewEmail/y/1D01C6AE9D028347
You need to understand that responsive emails, while possible, can't work on every mail client. As an example, Gmail strips all your head tag from the email, so no media queries are allowed, therefore no responsiveness. From what I've tested, responsive emails can be displayed in Outlook, Apple Mail, and a few others with standard media queries. For those, you'd have to use the typical breakpoints and apply them to trs or tds. Now, that can be tricky. You have to make sure it won't break your table layout so you really need to plan in advance what will change in your layout.
If you want it to work mostly on everything, I'd suggest you use fluid layouts using % widths. But if you really want some web responsiveness, it's the same as any responsive website. Just be aware that it will not work everywhere. Like this:
#media (max-width:680px) {
.hide { display:none; }
.main { width:440px }
.header { width:440px; }
.header-img { width:440px }
.footer { width:440px; }
.footer-size { width:440px; }
}
#media (max-width:440px) {
.hide { display:none; }
.main { width:100% }
.header { width:100%; }
.header-img { width:100%; height:auto; }
.logo-img { width:75px; height:30px; }
.icon-img { width:19px; height:18px; }
.icon-wrap { width:19px; }
.footer { display:none !important; }
.footer-size { width:100% }
}
#media (max-width:240px) {
.hide { display:none; }
.main { width:100% }
.header { width:100%; }
.header-img { width:100%; height:auto; }
.logo-img { width:75px; height:30px; }
.icon-img { width:19px; height:18px; }
.icon-wrap { width:19px; }
.button { width:100%; height:auto; }
.footer { display:none !important; }
.footer-size { width:100% }
}
(That's just some code from an email campaign I worked on, btw)
You can use media queries for common mailclients. Webclients rely heavily on inline css. Work with as much percentages as possible on your tables (100%) and max widths for tables that may not scale bigger than a certain amount of pixels.
Nested tables within a 100% wrapper table always stack inherited.
U should learn #media queries first. Is't something for write here because of many info.