I have a strange behaviour in screen layout, I do not understand the possible cause:(
I have a vertical grey line on the left and the right of the screen,
See screenshot here:
BTW, I developed using Rails 3 and using Twitter Bootstrap 2.3.2
In facts I do not foresee / I do not want these lines ... I presume it could be some CSS setting (on my one customization css code...), sorry for my ignorance there,
watching the shot here do suggest you something about why the grey vertical line on the left marging and the right margin of the screen layout ?
thanks a lot
giorgio
scss customization file used: http://solyaris4.altervista.org/custom.css.scss
Without looking at any CSS and HTML code it is pretty difficult to tell.
But since it looks like you are using the Google Chrome browser, hover over the grey stripe with your mouse, right-click and select Inspect Element. You can then review the html and css code related to what you are looking at. You can also open the Chrome dev console at any time by hitting the CTRL-SHIFT-i keys.
Related
I have searched stack overflow, googled, and gone to apple's documentation regarding a problem that I've encountered in my Cordova Html5 iOS 11+ app. The app plays videos. It works fine except there is a gray overcast button on top of the video that should display the iOS icons. The button is simply a gray "blob". This happens when the video is first loaded and then again when it is ended.
It looks like this (Upper left screen corner:
I've tried using many css workarounds that I found on stack overflow and also on some of my other searches. I thought that this is/was a css problem, but I'm just at a loss. I can't find anything in the Safari docs. The closest I came was a post regarding a gray background issue when playing video. That was solved using brightness. It didn't work at all for my issue. I also couldn't hide the gray buttons.
The video is standard html5:
<video src="myVideo.mp4" controls poster="myPoster.png" height="auto" width="100%">
</video>
Thank you ahead of time for your help. If I need to add more information, I can do that. I just don't want to add things that aren't needed.
-Rachel
If you could provide a sample page where this problem occurs that would make it a lot easier.
I'm pretty sure this should be possible with css though. Maybe not the most "beautiful" way to go at this but what I would do is to find the markup of this element and look what css selectors and rules there are which effect it. Then copy the css selector in your own stylesheet and maybe add some class or id to it to make sure it overrides these rules and then simply add a display: none; to it.
Maybe give !important a try too if it doesn't work right away.
In the dev tools you can add css rules directly so you can just go through the elements and add display: none; there, to see which element you need to refer to in your file.
But again, it's really hard to tell without an example to look at.
I just started with ROR and I'm following the One Month Rails tutorial. This includes the Bootstrap responsive navbar. I now added some pins to my pinterest clone. I noticed that the scrolling does not work when the navbar is in full size. when i make the browserwindow smaller so the navigation gets into the small navigation symbol i can scroll the page. You can probably see best on my heroku link: morning-shore-7790.herokuapp.com
It would be great to get a hint on how to solve this.
Thanks a lot
Looks like you've nested the container class inside the navbar, which will always cause this behavior.
If you're using ERB it means you didn't close a div where you should have, if you're using haml or slim it's most likely an indentation oops. If you use chrome, safari or firefox you can see this clearly, just inspect the element and collapse the navbar, if all other content is contained within that, you still haven't fixed it.
If you still have questions post your layout and your index.
I have a mobile chatroom i'm using. Whenever I load it up in safari on an iphone. Clicking in the text area brings up the keyboard, which I want but the keyboard completely ruins the layout of the webpage. How do I fix this? Heres a link to the http://www.306radio.ca/mobile/chat/
From a quick look, it looks like the issue you are having is coming from the div#userContent having a style of float: left, and the div above it having position:absolute. Those two seem to be causing the reflow you're experiencing.
I removed the float and removed the positioning, and that solved the reflow, but it looks like there could still be issues with JavaScript resizing the widths of things on the page.
Unfortunately, I don't have time to look into it, but this should fix the issue your question asked.
Keep digging in to CSS, and especially responsive design, and you might be able to solve this solution with less CSS and JS code.
I'm new here (and also with bootstrap and JavaScript) and hopefully im not asking a question already asked before. I did google plenty and search on here and could not find anyone mentioning this specific problem.
I found a bug I think with Bootstrap 2.2.1 .. when you close a modal, the href link which called it now has a blue border around it. This happens with buttons, nav items, anything. This can be seen on the Bootstrap live demo itself - click the blue button "Launch demo modal" under the section "Modals bootstrap-modal.js". You can see a light blue border around the button after closing the modal.
http://twitter.github.com/bootstrap/javascript.html#modals
This issue drove me mad, I messed with the CSS for ages, then tried different browsers, until I downgraded and the issue above is not present on bootstrap 2.0.4.
Does anyone know if this is a known issue with 2.2.1 or has it been present since a particular version?, or what the problem is here?
It's pretty simple fix once you locate what the CSS property is. I think it came from some issue with the modal's focus and they decided to modify the generated html. You need to define the following CSS. It comes from the following link.
.modal-open .modal,.btn:focus{
outline:none!important
}
Hope it helps! I made a jsfiddle of the result (including bootstrap's css + js) so you watch a live demo of it, here. Note that if you're using something that isn't a button the outline may come back, since we're only applying it there. Since you're referring to a href, it's likely that you're calling the modal from a link, and therefore should also trigger a:focus
This is very strange and I'm pretty sure it's to do with some sort of width issue in CSS, but as you start to re-size the browser, it adds this strange gap to the right (Which is off screen).
Here is the page in question
I've tried looking through the CSS and I can't exactly find anything, I keep going over and over it but it's not sticking out to me.
The website is WordPress driven, so most of the CSS is in theme.css and lessframework.css. The Sidebar is a fixed width at 202px and the Content is next to it, which has different width sizes based on what screen size. I'm pretty sure it's something to do with that but I just need a second opinion/set of eyes!
Can anybody help?
I hope im not bringing an old question back to life, but i find Firefox's developer tools have been invaluable in ascertaining, on-the-fly, what elements are actually displaying.
The easiest way is to right click on the area in question, and choose the last option 'Inspect Element'. This will open up the source and CSS console and displays the elements current id/class and style.
To go one better, once the console is open, click on the 3D box icon on the right of the console bar to make Firefox render the page in 3D, which will allow you to spin and zoom in on the affected area.