I have the following view code and it dynamically adjusts its size for mobile phone as well as the desktop. However the map doesn't change size. Is there a way to make it so that the map changes size dynamically to fit on the phone/tablet/desktop using bootstrap? (see below)
.row
.span6.offset3
.well
= gmaps4rails(#maps_json)
Found the answer. Changed the width and height to 100% in the gmaps4rails.css file
didn't work for me,
to fix it i changed in gmaps4rails.css:
.map_container {
width: 100%;
}
.gmaps4rails_map {
width: 100%;
height: 400px;
}
And this for fix the toolbar
#map label { width: auto; display:inline; }
#map img { max-width: none; }
Had the same problem. This fixed it for me:
.gmaps4rails_map img {
max-width: none;
}
.gmaps4rails_map label {
width: auto; display:inline;
}
It it doesn't fix the problem, try replacing the selector .gmaps4rails_map img by just img to make sure you need this particular css fix. Then try another map selector before img.
Related
I'm working on a webpage for my HTML class and I'm having some trouble resizing an image. I'm using the code as shown below. The width attribute does not change anything.
#BicycleBanner {
margin-top: -20% ;
height: 200%;
width: 900%;
}
Please post you HTML to test, but in theory you can resize a background image in a container using the background-size css property.
More info here - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images
#BicycleBanner {
display: block;
margin-top: -20% ;
max-width:900%;
max-height:200%;
width: auto;
height: auto;
}
I'm having some problem to get the css work. I do not want the horizontal scrollbar to appear at the panel. Is there a way to make the panel width auto without setting a fixed width? I am using p:selectOneMenu in xhtml.
.ui-selectonemenu {
width: 158px !important;
}
.ui-selectonemenu-panel {
width: 200px;
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
overflow-x: hidden !important;
}
I had the same problem, fixed it this way.
All block level elements are width:auto by default;
I can't be sure this will work without jsfiddle link, but try this:
overflow: hidden;
overflow-y: scroll;
I've worked around this problem by adding the following rule:
.ui-selectonemenu-list {
margin-right: 1em;
}
The highlighted item might not be completely covered in this case but it's better than scrolling IMO.
Edit
If you never want a horizontal scroll bar then the following fixes the problem nicely for me (highlighting too):
.ui-selectonemenu-panel .ui-selectonemenu-list-item {
padding-right: 1.5em;
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
overflow-x: hidden;
}
hey i have set some breakpoints and ive set list item in percentage and it fits well in different breakpoints.
but my default one which i haven't set is displayed like this.
here is my sass code.
li
{
width:20%;
padding: 2px;
float:left;
#include media($xl-desktop) { // As defined in _grid-settings.scss
width:10%;
}
#include media($mobile) { // As defined in _grid-settings.scss
width:33.3333%;
}
}
Please tell me where am i doing it wrong.
thanks.
Here is my Demo
Demo Link
can you try this layout?
to make images responsive you need to add width: 100% (you did the exact oppsite);
Make an image responsive - simplest way
http://jsfiddle.net/95EfW/
css:
ul{
list-style: none;
}
li{
float: left;
padding:0;
margin:0;
width: 20%;
padding: 4px;
}
img{
width: 100%;
height: 100%;
}
thanks for the demo, it helps. So here is the issue, the issue is each of your image is different size, hence when you float left it brings the remaining pictures down in different screens. To fix the issue, you have two methods, using inline-block (rather than float on li) or setting a static height for different size screens. here is a small demo for setting heights jsfiddle.net/f5cgT/2 – ravitadi 1 hour ago
This will prevent the floats to drop as you clear each row.
.galleryList li:nth-child(6n+6) {
clear: left;
}
But the images original size should be the same 500px x 750px as well. Than you would not have the gaps in the first place...
I am trying to center the footer on a website but for some reason, the way I use that normally works won't work this time. Can anyone tell me why?
Site is here
It's set up using two classes, one inside the other
First one is called mainFoot:
.mainFoot {
background-color: #184879;
width: 100%;
height: 60px; /*had to include this because it would not appear otherwise. browser read it as a 0 height container*/
display: block;
clear: both;
}
Second is page-footer:
#page-footer {
width: 990px;
display: block;
clear: both;
margin:0 auto;}
I was using the same structure right above it for the bottom widgets and it worked as is, but for some reason, while i was setting this one up, I had to set a height property for the outer div to appear as it wouldn't read the inner div's height and adjust.
For reference, he similar set up I mentioned that DOES work is right above the mainFoot class and is controlled by the classes b4Foot and half-widgets:
.b4Foot {
background-color: #277bc1;
width: 100%;
display: block;
clear: both;
}
.half-widgets {
width: 990px;
min-height: 200px;
margin: 0 auto;
color: #fff;
}
To center the contents of a block, you need to set the style "text-align:center". However, note that you cannot center a block-type element within another block-type element. The inner element needs to have the display style of inline or inline-block.
To fix your problem, you need to: a) remove the fixed width, and b) change page-footer to display:inline-block. Currently it is display:table because of the class clearfix - you need to remove that class fromt he div.
you need to change just this line please see below and put on your CSS and see result
.mainFoot
{
background-color:#184879 !important;
height:60px;
width:auto;
}
footer.span12 { color:#DEDEDE; width:100%;}
#page-footer { display:block; margin:0 auto; width:990px;}
only change on .mainFoot , footer.span12 and #page-footer
Thanks,
I am trying to get rid of a distinctly unwanted second vertical scrollbar that has appeared on this page I am putting together, see http://abchealth.info/doc-mike-special/test3/.
My research here led me to try and remove the 'overflow' from my CSS, but this absolutely trashed my layout, so I am looking for a solution that removes the inner vertical scrollbar without changing anything else...
I'd much appreciate your help, thanks!
Here's my CSS:
/* Generated by KompoZer */
body {
background-image: url(http://abchealth.info/images/bg.png);
}
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
div#wrap {min-height: 100%;}
div#mastercontainer {
overflow:auto; width: 100%;
height: 100%;
min-height: 100%;
}
div#header {
background-image: url(http://abchealth.info/images/header-bg.jpg); background-repeat:
repeat-x;
position: top; height: 96px;}
div#content {
}
div#innercontentmiddle {
margin: 0 auto;
width: 540px;
padding:10px; padding-bottom:510px;}
div#footerclear {
}
div#footer {
position:relative; margin-top: -510px; height: 510px; clear:both;
background-image: url(http://abchealth.info/images/footer-bg.jpg); background-repeat:
repeat-x;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
change this: #mastercontainer {overflow:auto;} to #mastercontainer {overflow: visible;}
What's happening is 'auto' uses a scroll bar if the content is too big for the frame. Aka that div or w/e needs enlarged to avoid the scroll. Visible will let it overflow like I think you want. Either visible or even hidden would work with this code-- css is all about playing around and experimenting.
***Most browsers offer a plug-in called 'FireBug' -> download it. It allows you to edit the css etc of webpages while viewing. Very useful for css styling errors. Highly recommended for issues such as this.
This works
#mastercontainer { overflow: hidden; }
or the above solution works too.
Remove overflow:auto from div#mastercontainer.
If the problem is due to html, body { overflow-x: hidden;} then try using html, body{height: 100%;} it worked fine for me.
For anyone using ion-icons and bootstrap, the issue can be in ionic/structure.css.
I was using ion-icons on the website and in ionic/structure.css I found these two properties causing the issue and changing them solved the issue.
{
overflow: hidden;
overscroll-behavior-y: none;
}
Changed to:
{
overflow: scroll;
overscroll-behavior-y: scroll;
}
Setting overflow-y to'hidden' can in many cases remove the vertical scrollbar. As can setting it to 'visible' because that means that overflow is visible which means no need to scroll, so scrollbars are not visible.
Those setting however don't always work, because of what is said at https://developer.mozilla.org/en-US/docs/Web/CSS/overflow :
In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.
The above link is a good resource for trying to understand how 'overflow' works in general, it's not as simple as you could hope.
For instance, another note, from there:
Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto.