9

I don't know jQuery very well so I don't know how to add CSS inline. This is my code:

<div class="gm-style-iw" style="top: 9px; position: absolute; left: 15px; width: 23px;">
 <div style="display: inline-block; overflow: hidden; max-height: 330px; max-width: 176px;">
  <div style="overflow: auto">
   <div id="iw-container">
   </div>
  </div>
 </div>
</div>

I want to change the max-width of second div and add overflow: none to the div above #iw-container.

I tried this but it did not work:

var iwOuter = $('.gm-style-iw');
iwOuter.children().css({max-width:'250px !important'});
iwOuter.children().children().css({overflow:'none'});

EDIT i want to customize infowindow Google and for me is important to change the value of max-width and overflow.... i think that your code maybe are good, but i don't understand why doesn't work...

Mapsism Borja
  • 353
  • 2
  • 7
  • 15
  • 1
    must be 'max-width': '250px !important' – px5x2 Apr 27 '15 at 10:49
  • 4
    While it's not really related to your specific question, I would definitely advise you to [learn how to work with CSS Stylesheets instead of inline-css](http://learn.shayhowe.com/html-css/). This way you will be able to use [classes](http://www.tizag.com/cssT/class.php) (which makes it easier to [change css with jQuery](https://api.jquery.com/addclass/)). You should also [avoid using `!important` in your CSS](http://stackoverflow.com/questions/3427766/should-i-avoid-using-important-in-css) because it usually causes more trouble than it fixes. – Praxis Ashelin Apr 27 '15 at 11:02

2 Answers2

18

In jQuery you can do something like this:

$('.gm-style-iw > div').css('max-width', "250px !important");
$('#iw-container').parent().css('overflow', 'none');//css wasn't valid here

Using > div means it gets the first div only, if you want all divs to have a max-width, use:

$('.gm-style-iw').children().css('max-width', "250px !important");

Using the .parent() function means that it gets only the parent of the selected element. It's cleaner and easier to read and shorter to write.

Guruprasad J Rao
  • 29,410
  • 14
  • 101
  • 200
Albzi
  • 15,431
  • 6
  • 46
  • 63
  • 2
    `.example > div` does not select the first div only. It selects alle the `div`'s that are immediate children of `.example`. – rusmus Apr 27 '15 at 11:08
  • @rusmus the way the divs are nested makes the `>` actually do what it's supposed to – Stephan Muller Apr 27 '15 at 12:02
  • I can see that it does what it is supposed to, but the stated purpose of the selector is misleading at best. – rusmus Apr 27 '15 at 12:16
0
$(".gm-style-iw div:first-child").css( "max-width", "100px");   
$("#iw-container").parent().css("overflow","none");
Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
captainsac
  • 2,484
  • 3
  • 27
  • 48
  • 1
    @MapsismBorja I'm fairly certain that you did something wrong because there is no way the above code would add a third div by itself. It seems that you are not experienced enough to work with the code you have now. Why don't you try going over the basics of HTML / CSS and jQuery again and start off with some simpler things? Coding isn't learned in 1 day. I added some links to tutorials in my previous comment which should be able to help you get started. – Praxis Ashelin Apr 27 '15 at 11:08
  • i posted you only code of google maps, i want customize InfoWindow, and i know that the only way (in my case) is change max-width and overflow. I must to change it, because via mobile the infoWindow is not rendering. I agree with you that i don't know jquery... but i posted only the code of google maps. it isn't my code... besides your example is the ONLY that changed somethinghs in my code. – Mapsism Borja Apr 27 '15 at 11:18
  • @MapsismBorja Well the code above does only 2 things: Change the `max-width` and change the `overflow`, just as you asked. It does nothing else. If it did something else then it means you used the code wrong. Also I am sorry to say but coding is not just "copy-pasting" code that you have found online. If you do not understand the code that you are using, don't expect others to solve your problems. The first problem that needs to be solved is you learning how the code works. – Praxis Ashelin Apr 27 '15 at 11:23
  • On a sidenote, did you just copy-paste the entire answer including the `1.` and `2.` numbers? If so that is probably what went wrong. – Praxis Ashelin Apr 27 '15 at 11:24
  • @DarkAshelin why your code to add max-width at third div and not at second div ? what do you think? – Mapsism Borja Apr 27 '15 at 11:31
  • @MapsismBorja Well do you want to become a good programmer then, or not? – Praxis Ashelin Apr 27 '15 at 11:40
  • This answer is incorrect, because of the nested structure all the `div`s are the first child of their parent. This would cause the `max-width` to be applied to all divs except the outer one. – Stephan Muller Apr 27 '15 at 11:56
  • Yes @Stephan Muller ! And where is the correct answer? – Mapsism Borja Apr 27 '15 at 12:28