I have developed a website(www.damabbs.com) using Bootstrap. The problem is the webpage is draggable horizontally when user wants to scroll down using iPhone safari. It is very annoying.
I have checked with bootstrap website. It works fine. It can only be draggable vertically.
Change that code in base.css line 34
#media ( max-width : 766px) {
body {
padding-top: 0;
padding-left: 5px !important;
padding-right: 5px !important;
}
to
#media ( max-width : 766px) {
body {
padding-top: 0;
padding-left: 10px !important;
padding-right: 10px !important;
}
Related
This problem is costing my sanity.
I want to use the React Fluent UI Carousel component with thumbnails and place it in the middle of my container, everything works fine till I add more than 8 slides. The carousel moves to the left side of the screen and eventually disappears from the viewport.
I am using the default code snippet from Fluent UI IS AVAILABLE HEREFluent ui thumbnail carousel
enter image description here
I have solved the problem, just overwrite the following properties:
.ln {
width: 600px;
}
.ui-carousel__navigation {
margin-top: -55px !important;
position: absolute;
display: flex;
flex-flow: wrap;
justify-content: space-between;
width: 1000px;
margin-left: -200px;
}
.nb {
transform:none !important;
}
.ol {
transform: none !important;
}
.nc {
transform: none !important;
}
I'm working on a react JS app , and I'm using react-modal package . I don't know how to make the outside part of the Modal ,when it is opened, completely transparent .
This is the props that I pass it to the Modal :
<Modal
onRequestClose={() => {
this.setState({ modalIsOpen: false });
}}
isOpen={modalIsOpen}
className="Modal"
></Modal>
This is the CSS code :
.Modal {
text-decoration: none;
user-select: none;
align-self: center;
justify-content: center;
align-items: center;
border: 2px solid #040408;
border-radius: 30px;
background-color: white;
margin-top: 10%;
margin-bottom: auto;
width: 20.8%;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
outline: none;
padding-left: 2px;
padding-right: 2px;
}
And this is the result that I get :
I want my modal to look just like a popup.
Do you mean background of model to be transparent? like the grey part of picture? in this case you should put it inside another div.
<div className='transparent'><Modal/></div>
Otherwise I don't understand the question.
Maybe you want to make the div fixed and max size, so it cover all the screen.
I make a responsive web page where at max width of 768px (via media query) the div inside the main container suppose to change to inline-block so that the page would scroll horizontally to the div's id when user click on link. The page is set up with overflow: hidden, so it navigate using id/anchor alone.
The problem is, when I did a preview in mobile, the container just spread out and I can totally swipe the page. Even the menu button that suppose to be in the center of the view port went to the center of the container. And leaving a huge white space below it. It did good however in desktop browser. So I presume it has everything to do with the nowrap function.
It worked in Firefox both mobile and desktop. It worked in I.E desktop. It did not worked in Chrome mobile but seems to be working in desktop. And failed in Safari mobile, haven't tested yet in desktop.
I tried to remove white-space: nowrap function only to find out the div did not stacks inline-block like it suppose to. I tried specified container's width and min-width with no luck. I tried float: left, position values and a bunch of things i don't recall them all. Nothing's change.
HTML
<div id="container">
<div id="company" class="company">
<iframe src="main.html">
</iframe>
</div>
<div id="content" class="content">
<iframe src="content.html">
</iframe>
</div>
<div id="system" class="system">
<iframe src="system.html">
</iframe>
</div>
</div>
css
body{
overflow: hidden;
}
#container {
height: 100vh !important;
min-height: 100vh !important;
}
#container .company, #container .content, #container .system {
display: block;
height: 100vh !important;
min-height: 100vh !important;
}
#media screen and (max-width:768px) {
#container {
display: block;
white-space: nowrap;
}
#container .company, #container .content, #container .system {
display: inline-block;
}
}
iframe {
width: 100vw !important;
min-width: 100vw !important;
height: 100vh !important;
min-height: 100vh !important;
border: none;
}
What I expected (Chrome desktop)
https://kamalmasrun.files.wordpress.com/2019/01/desktop.jpg
But only comes to this in mobile
https://kamalmasrun.files.wordpress.com/2019/01/screenshot_20190122-120510.png
Your help is much appreciated and I first address a thank you to all for the help =).
Basically, you have a few problems here:
Setting overflow: hidden won't prevent browser on mobile from scrolling (on Firefox it might, but on Chrome or iOS Safari it will not). Blocking scrolling is a hard thing to do on mobile to be honest, and it always is a little bit hacky, so I would not go that way.
To achieve scrolling (or jumping) using links with #content etc, body has to be expanded and browser has to see where this element is. Expanding body will result in ability for user to scroll left/right, which is hard to block as I mentioned before. You have to scroll #container to show new element. You can do this using javascript.
Also, don't forget to add overflow: hidden to #container (this will work on mobile).
If something is still unclear, feel free to ask in comments below this answer :)
The idea of algorithm to achieve your goal:
Listen to hashchange event
Read current hash from window.location
Find element with given hash using document.querySelector
Read element's position inside container
Set scrollLeft property of container to be equal element's position
Some useful links to get you started:
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange
https://developer.mozilla.org/en-US/docs/Web/API/Window/location
https://developer.mozilla.org/pl/docs/Web/API/Document/querySelector
https://developer.mozilla.org/pl/docs/Web/API/Element/getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
And updated CSS:
body {
overflow: hidden;
margin: 0;
}
#button {
position: fixed;
vertical-align: center;
}
#button .btn1,
.btn2,
.btn3 {
padding: 10px;
display: inline-block;
}
#container .company,
.content,
.system {
display: block;
height: 100vh;
min-height: 100vh;
width: 100vw;
}
#media screen and (max-width:768px) {
#container {
display: flex;
flex-flow: row nowrap;
}
#container .company,
.content,
.system {
display: block;
}
}
iframe {
border: none;
height: 100vh;
min-height: 100vh;
width: 100vw;
}
It's possible that setting min/max width to #container will do the trick.
#container {
min-width: 100vw;
max-width: 100vw;
}
Also, I'd suggest using flex here, as it would suit well and is more modern.
So this is my problem, I am trying to print some components in React using window.print, my components have defined sizes say 5cm x 5cm, I have hidden all other components in the print page (note that the styling of the whole page is somehow complex to post here), the problem is that my components get resized when on the print page. I have looked a lot but nothing has worked for me.
Note that when I tested the same print in a different page (with no complex styling) it worked fine. So is there any way to pass the styles to the print window or "Override" the styling so that my components get rendered correctly?
Thanks.
EDIT: Here is my CSS. This is working fine in a fresh app so there must be something I used messing things up, I removed all #media print from Bootstrap CSS files but no luck.
I tried to put the code inside as well as outside the #media print but no luck as well.
As far as I know media should render real physical lengths and units, any help would be appreciated.
Thanks again
.print-only {
display: none;
}
#media print {
#page {
margin: 0;
size: a4 !important;
}
body {
margin: 0.5cm !important;
padding: 0;
}
.print-only {
margin-top: 20px;
display: block;
}
.no-print {
width: 100%;
margin: 0px;
display: none;
}
.Container {
position: relative;
display: block;
border: 3px solid black;
width: 6in !important;
height: 2in !important;
margin: 0;
padding: 0;
text-align: start;
}
.labels {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 6pt;
font-style: normal;
font-variant: normal;
height: 13px;
}
.container2 {
height: 39px;
font-size: 8px;
font-weight: 550;
position: absolute;
top: 20px;
right: 1in;
line-height: 13px;
text-align: center;
}
}
Recently, I've encountered with the same issue while designing a print template in React. I was totally wrong in my understanding that whatever styles I write in my CSS files will apply. Then I found there is certain semantics while are required to be followed while designing an HTML print template.
Take a look at this link. This will be very helpful for your design.
I'm trying to get bootstrap divs to be full body length.
This is what I've tried so far: http://jsfiddle.net/bKsad/315/
html, body {
min-height: 100%
}
.wrap {
height: 100%
}
.sidebar {
background-color:#eee;
background-repeat: repeat;
padding:0;
min-height:100% !important;
position:relative;
}
.sidebar .sidebar-content {
height:100%;
width:100%;
padding: 5px;
margin:0;
position:relative;
}
As the right column grows longer, I want the sidebar to do the same.
The key is to understand the "col-md-x" and "col-md-offset-x" styles provided by Bootstrap 3:
<div class="container-fluid">
<div class="row">
<div class="col-md-3 sidebar">
Sidebar Content
</div>
<div class="col-md-9 col-md-offset-3 content">
Main Content
</div>
</div>
</div>
Then use CSS to make sure the breakpoints line-up. You'll need to fine-tune padding/margin for your particular needs, but the offset and #media breakpoints handle the overall layout pretty well:
html, body, .container-fluid, .row {
height: 100%;
}
.sidebar {
background-color: #CCCCCC;
}
#media (min-width: 992px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
background-color: #CCCCCC;
}
}
Working solution: http://www.bootply.com/111837
If you use "col-sm-x" or "col-lg-x" you just change the #media CSS to the corresponding min-width (768px for sm and 1200px for lg). Bootstrap handles the rest.
I solved this by using an absolutely positioned div and a bit of jQuery. I have a Bootstrap navbar with a fixed height of 50px, so that is why you're seeing the 50's in the code. You can remove this if you don't have a top navbar.
This solution works dynamically with any height.
The CSS:
.sidebar {
background-color: #333333;
position: absolute;
min-height: calc(100% - 50px);
}
The jQuery:
var document_height = $(document).height();
var sidebar = $('.sidebar');
var sidebar_height = sidebar.height();
if (document_height > sidebar_height) {
sidebar.css('height', document_height - 50);
}
The neat thing about this is there will be no flickering of the background because its using CSS to adjust the min-height, so that the jQuery resizing that normally causes a flickering of the background will be hidden on page load.
approach 1: added empty div with style="clear:both" at the end of wrap div.
http://jsfiddle.net/34Fc5/1/
approch 2: http://jsfiddle.net/34Fc5/ :
html, body {
height: 100%;
}
.wrap {
height: 100%;
overflow: hidden;
}
.sidebar {
background-color:#eee;
background-repeat: repeat;
padding:0;
height:100% !important;
position:relative;
}
.sidebar .sidebar-content {
height:100%;
width:100%;
padding: 5px;
margin:0;
position:relative;
}
added "overflow: hidden;" to .wrap
changed height: 100% to html, body
changed height: 100% to .sidebar
using css way, the height of the sidebar will only match the view port of the browser. so if you look at approach 1, when you scroll you will notice the background stop at viewport. to fix it js is required.
The only thing that got it working for me (after many hours of trying everything) was
HTML
<nav class="col-sm-3 sidebar">
CSS
padding-bottom: 100%;
The padding in percent did it for me. Now it goes all the way to the bottom of the page.