(Background information)
I have been tasked with fixing a former colleagues documents (html/css/js). I do not have access to all the html documents and none of the javascript because someone thought it would be a great idea to reference a bunch of it from a different branch in a different region with a different permission level than anyone in my department so lots of slow hoops to jump through. While I have been waiting weeks for them to email me or grant me permission into their branch I have to make due with what I have. The websites are being maintained by a CMS
I've come across an issue where the page content disappears in Desktop view, but not Mobile view. The css code affecting this directly is this:
.mobile div.tr-page-container #entry_page_custom_html{
max-height: 300px;
}
these are also in the CSS document related to div.tr-page-container:
div.tr-page-container {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
div.tr-page-container {
border-radius:0;
}
div.tr-page-container div.header-container {
background-color: none;
}
div.tr-page-container div.section-sub-header, #login-div-content .footer-block, div.registration-page-container div.section-sub-header {
display:none;
}
If you view the test page you'll see it affect the content, if you resize the page down to about tablet or smaller view, a "view more" button appears and when you click it, the rest of the content appears.
If I remove this code, the content shows in desktop view, but in mobile view the "view more" button covers the entire content causing you to have to actually click it to read anything (see screen shot).
So I've concluded that the "max-height" function is necessary (i think), but what can I do to allow the content in desktop view appear? If I increase max height to fit all of it, the problem is when we add more content to that test page we'll be back in the same situation.
I really hope someone can advise me on this.
This by the way, is the javascript code for the view more/less, I found it while inspecting the webpage on chrome lol.
Y.use('jquery-ui',function(Y) {
jQuery(function() {
jQuery('.view-content-link').click(function() {
jQuery('#entry_page_custom_html').toggleClass('expand');
jQuery('.view-content-link').toggle();
});
});
});
Why does this css code cut content off in Desktop view?
Because your max-height is set at 300px and the content is more than 300px tall at that browser width so it is "cutting" the content off.
Remove this, and use a media query.
.mobile div.tr-page-container #entry_page_custom_html{
max-height: 300px; //not needed
}
Add this to your script
$('.view-content-link').on('click', function(e) {
$('.table').toggleClass("show");
e.preventDefault();
});
Add this to your css
.show{
display: block !important;
}
#media screen and (max-width: 767px) {
.table{
display:none;
}
}
fiddle
I this part of code, you have a comment before you open brackets in a IF STATEMENT. And if this is comment, max-height:300px never will be recognized to be execute.
Change:
.mobile div.tr-page-container #entry_page_custom_html{
max-height: 300px;
}
To:
.mobile div.tr-page-container {
max-height: 300px;
}
Related
I have a hard to debug issue where a click on an input element behaves completely different on my Samsung S10 than in my desktop Chrome browser (also when using device testing tools).
Here's how to test:
on a small mobile design (max-width: 56em) a blue filter bar appears at the bottom of the screen
Click it to show all filters, a popup menu appears (you can go back to results by clicking button "Bekijk resultaten")
Click "+ Specificeer" at the bottom of that screen
In the small range specification popup that appears click the first input element (placeholder="van")
In Chrome on desktop the user can now enter a number. Also when I use Chrome device debugging tools and set it to iPhoneX, Galaxy S5, Galaxy Fold rendering etcetera it works just fine.
But when I load my live site on my Galaxy S10 in the Chrome browser, the moment the user clicks the input element to enter a number, the rest of the filter popup menu is hidden, and it only shows part of the range specification popup. Scrolling of the page is completely disabled. I'm thinking that certain events are handled differently, but I can't figure out which ones and why.
I tried monitoring events using monitorEvents(window,"click");, but no click events show
Logged events via Performance tab, but could not find the culprit
I have no idea why anymore and I can't reproduce it in Chrome desktop browser to actually debug it.
UPDATE 1
The issue was the mobile virtual keyboard that trigger the resize method.
Fixed it by checking for width change:
var initialWidth = $(window).width(), initialHeight = $(window).height();
window.addEventListener('resize', function () {
if ($(window).width() != initialWidth) {//the width was changed
}
})
Well, I've played around. illusion is totally right.
I've copied some styles from .filters .mobile class to .filters_TEST
.filters_TEST{
&.active{
height: auto;
flex-grow:1;
overflow: auto;
opacity: 1;
z-index: 100;
padding: 0;
background-color: #FFF!important;
min-height: 100vh;
.modal_container{
background-color: #fff;
overflow: auto;
overflow-x: hidden;
position: relative;
width: 100%;
height: 100vh;
overflow-y: hidden;
#mobilefilters{
display:block;
}
}
}
}
added test button:
<span class="js-callmodal display-mobile-only">CALL MODAL</span>
and on button click added new class to .
$('.js-callmodal').on('click',function(){
$('.filters_TEST').addClass('active');
});
now when you click:
CALL MODAL -> Specificeer -> input
modal stays in place;
to truly fix your problem you should search what removes .mobile class when input is triggered.
I guess the code should be somewhere in file: _genfuncs.min.js?v=90
While debugging, I found that when the input is in focus and the keyboard pops up, that instant .mobile class is removed from section.filters. You'll have to see for any event handler that removes the .mobile class on any event. Secondly, after the bug was encountered I again added the removed .mobile class manually to section.filters and the modal was back in place working properly. After clicking "Specificeer" it gives rise to another bug, where the main page becomes unscrollable. Also at the same instant there is another error TypeError which could possibly be the cause of the other bug...
I'm using ng-zorro-antd 7.0.0 rc3 with angular 7.2.4.
My problem is: I can not scroll horizontal while using the nz-range-picker on mobile browser, it seem the element was too large with the screen, but the parent of nz-range-picker has "over-flow-x: hidden", or "over-flow: hidden" attribute.
But i can't find what element to fix this.
I went to the documents of Ng-Zorro and it seem that they have had this problem too: https://ng.ant.design/components/date-picker/en#header
I also seen the react version of Ant Design and it doesn't have this problem: https://ant.design/components/date-picker/#header
Can any one help me with this?
Range picker cannot scroll when over-flow-x on mobile screen
Thank to AlokeT, I have resolved this problem.
I make the picker display vertical when responsive to mobile.
Add this to src/styles.less (or css | scss)
// #screen-sm-min = 576px, or you can choose another break point
#media only screen and (max-width: #screen-sm-min + 100px) {
.ant-calendar-range {
width: 276px;
.ant-calendar-range-part {
width: 100%;
}
.ant-calendar-range-right {
float: left;
border-top: 1px solid #e8e8e8;
}
}
}
I am working on a fiddle which is working perfectly fine in a desktop view.
The desktop view works in a way that on click of any 2 product items (By default, one remain selected) , the description box gets displayed at the bottom giving detailed explanation of those product items.
The snippets of CSS codes which I have used for the mobile view:
#media only screen and (max-width: 767px)
{
.product-all-contents
{
overflow-x: auto;
}
.product-contents .product{
min-width: 50.795%;
margin: 0 2%;
padding-top: 3.91%;
padding-left: 3.91%; padding-right: 3.91%;
}
}
Problem Statement:
In the mobile view, there is one small issue. The issue is that, I am seeing the explanation of both product items whereas only one should be displayed without changing the look of it i.e. items should remain piled up.
I want the mobile view to work exactly in a way as in the desktop view i.e. when we click one product item, the description box should display at the bottom and when we click another product item another description box should display at the bottom.
The reason why I have used display:inline-block !important because I want the items to pile up vertically in mobile view in html/css. Removing that will make the images and text squished.
This happens because of you have set display: inline-block !important; for div.franchisehubtv and div.cloudbasedtextipad in #media only screen and (max-width: 767px) which override your display: none; css.
Solution No: 1
You can remove those classes from the media query, so your #media will be like this
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
.cloudbasedtextipad, .franchisehubtv {
flex-direction: column;
}
.tv img {
max-width: 100%;
height: auto;
}
}
Solution No: 2
You need to override those css by adding these lines
div.franchisehubtv[style="display: none;"] {
display: none !important;
}
div.cloudbasedtextipad[style="display: none;"] {
display: none !important;
}
Updated fiddle here
Update: You can set your layout using flex for small devices
Didn't get you clearly, can you please specify is this mobile view the one you want to be the same display in desktop? if so then i recommend you to check how to use bootstrap grid system and you can use their CSS as a benchmark.
Looking at your current solution, the second div has a style rule that is invoked below 767px, which forces it to display as an inline-block. By adding the !important declaration, this then overrides any other property declaration.
If you remove this rule, you'll get a broken layout, but the div is hidden as required.
As to the layout, the content within each div will need some refined flexbox rules, which can use the same breakpoint to switch between column or row direction:
flex-direction: column (for mobile)
flex-direction: row (for non-mobile)
One problem you have is because you set the display property as inline style in the HTML, so you have to use important to overwrite.
The second problem is that you are not having in count the display: inline-block on your jQuery.
You are going to have to change several things, I've changed the fiddle to account for these things, only works if you click in the buttons, on load you see both items, there are several ways you can do these things, I only want to make the minimal changes to show the result.
https://jsfiddle.net/zaefnson/2/
And on desktop probably doesn't work either, just like I said, there are several things you are going to have to change.
I am updating the webstore on my site to Ecwid. Since I used the Intuit Sitebuilder to build my site the page is a fixed size. I added a place holder in Sitebuilder to hold the script for the Ecwid store. However, some of the pages of my store run off of the bottom of the screen. I have contacted both Ecwid and Sitebuilder for help with this with no luck.
I need my store to be no longer than 1000px high and in the event one of the pages of the script is longer it will have a scrollbar to the left. Can someone please help me?
Here is a link to see what I am talking about: Dip Wizard Hydrographic Dip Kit Store.
You'll need to edit both html and css of your site:
html:
inside a div with id "element50", there's a div without an id. This is the container that you're worried about. You need to give this div an id, for example -
<div id="productInfo">
css: Then in your css - add these rules
#productInfo {
margin-top: 25px;
max-height: 1045px;
overflow-x: hidden;
overflow-y: scroll;
}
If this is very urgent and you can't find where to add/edit your css, you can add it in the html itself:
<div style="margin-top: 25px; max-height: 1045px; overflow-x: hidden; overflow-y: scroll;
But this is not recommended and should be replaced with proper css in the near future.
If I understand you correctly you want a scrollbar where the content is over 1000px, then i guess you should type in your css {overflow-y:scroll;} on your content element.
I'm loading some picture from server by JS after whole page is loaded.
Means by user click i'm loading some image and insert it into DOM.
This image has unique ID, now i want to print out this image ONLY by JS help.
I did style file for printing purpose
* {
display:none;
visibility: none;
}
html, body, #out_image_1 {
background: none;
display: block !important;
left: 0px;
margin: 0px;
padding: 0px;
position: relative;
top: 0px;
}
and calling print such
$("#print-button2").click(function() {
window.print();
return false;
})
but page is blank (empty) Where i'm wrong ?
Thanks
There are a couple reasons it might not be printing.
Your image may be contained in another element, but according to your CSS, the parent element is still display:none
Your CSS will work only if #out_image_1 is a direct child of body:
http://jsfiddle.net/RXMx8/
But not if #out_image_1 has any parent elements other than body and html:
http://jsfiddle.net/RXMx8/1/
I'm betting that's the issue, but other reasons could be:
Your browser is not set to print images by default. Using window.print() may skip the "print preview" which could allow you to toggle this setting on.
Your HTML is OK, but you're targeting the wrong element.
You're out of ink ; )
Even though you're adding the element with javascript, you should still be able to print it. For debugging, remove the * { display:none; } and see what happens.
* By the way, it should be visibility: hidden;; "none" is not a valid value, but it's redundant with display:none anyways so you don't need it at all.