CODEWITHSUNDEEP
htmlcsspug
konyv12
konyv12

Reputation: 776

Stylesheet does not apply to HTML?

I am adding a Google Places autocomplete box on my web site. 

#pac-card.pac-card
  div
    #pac-title
      | Autocomplete search
    #type-selector.pac-controls
      input#changetype-all(type='radio', name='type', checked='checked')
      label(for='changetype-all') All
      input#changetype-establishment(type='radio', name='type')
      label(for='changetype-establishment') Establishments
      input#changetype-address(type='radio', name='type')
      label(for='changetype-address') Addresses
      input#changetype-geocode(type='radio', name='type')
      label(for='changetype-geocode') Geocodes
    #strict-bounds-selector.pac-controls
      input#use-strict-bounds(type='checkbox', value='')
      label(for='use-strict-bounds') Strict Bounds
  #pac-container
    input#pac-input(type='text', placeholder='Enter a location')

and have a stylesheet defined:

.pac-card {
  margin: 10px 10px 0 0;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
}

I do include the stylesheet on the page. What might be a possible reason the stylesheet does not apply to the HTML?

The code is correct as I tried it out on jsfiddle.

Upvotes: 0

Views: 91

Answers (1)

Pochwar
Pochwar

Reputation: 726

your code is not HTML (maybe a template code that generate HTML ?). I took a look a Place Autocomplete documentation (https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete?hl=fr), and the HTML should look like that : 

<input id="pac-input" class="controls" type="text"
        placeholder="Enter a location">
    <div id="type-selector" class="controls">
      <input type="radio" name="type" id="changetype-all" checked="checked">
      <label for="changetype-all">All</label>

      <input type="radio" name="type" id="changetype-establishment">
      <label for="changetype-establishment">Establishments</label>

      <input type="radio" name="type" id="changetype-address">
      <label for="changetype-address">Addresses</label>

      <input type="radio" name="type" id="changetype-geocode">
      <label for="changetype-geocode">Geocodes</label>
    </div>
    <div id="map"></div>

In this code for example, I cant see a #pac-container id for any div.

So first thing, make sure your generated HTML has the correct CSS selector corresponding to your styles.

Upvotes: 2

Related Questions