css3 - responsive design with bootstrap -

-

i m trying have responsive page has 2 buttons on top , supposed centered. under buttons added google map should cover rest of page. when try code bellow, buttons not centered , not responsive. , somehow map height longer page scrollbar shows up. , ideas m doing wrong ?

<div class="container">             <div class="row">                 <div class="col-md-4 center-block">                     <button >click me</button>                     <button >click me</button>                 </div>             </div>             </div>          <div class="map_container">             <div id="googlemap" class="map_canvas"></div>         </div>

css

.map_container{      overflow:hidden;     padding-bottom:56.25%;     position:relative;     height:0; } .map_container .map_canvas{      left:0;     top:0;     height:100%;     width:100%;     position:absolute; }

two part question/answer:

  1. the .center-block class sets margin-right: auto; margin-left: auto; browser render "block" centred assuming width know. works <img width=" tag, undefined-width <div> not of know width, browsers ignore margin:auto. there 2 ways fix this:

    a. create innner div fixed width, i.e. <div style="width:200px">..buttons..</div>

    b. (html5 proponents wince @ this, but...) <center> tag deprecated in html5 still works in browsers know of. e.g. <center>..buttons..</center> - if works why not.

  2. harder answer because there several things cause misbehaviour , don't know (from example) effect you're trying produce:

    a. .map_canvas{ height:100%; width:100%; } - not sure why? width , height percentages use ancestor object metrics, w=100% use full width of viewport (expected) , h=100% use full height of viewport, meaning total combined height of map-container , container+buttons above it.

    b. .map_container{ height:0; } - not sure why? there should never reason - either display:none or height: auto|length|initial|inherit.

    c. .map_container{ position:relative; } -> .map_canvas{ position:absolute; } ??? not sure you're doing there? have @ #21022512 has fiddle --- if that's remember up-vote it.

ps: try asking 1 question @ time - stackexchange users may know answer 1 , not other , may not answer @ all. and.., use jsfiddle.com create reproduction of issue. post link in question.


Comments

Post a Comment

Popular posts from this blog

ios - Memory not freeing up after popping viewcontroller using ARC -

-
hi project arc based, using uinavigationcontroller make transition between viewcontroller. using profiler analyse happening behind scene memory. noticed when push viewcontroller allocate memory components , when pop not freeing allocated memory. since using arc unable implement dealloc or release component. have analysed in detail , there no memory leak in project. i not using strong property push viewcontroller. here how pushing viewcontroller. viewcontroller *obj = [[viewcontroller alloc] init]; [self.navigationcontroller pushviewcontroller:obj animated:no]; any clue whats going on? should free memory have consumed. please advise your description indicates have retain cycle, leads objects not being deallocated. typical source of retain cycles properties assigned loading nib files (usually declared iboutlet ). two strategies break them , release objects: declare property weak : @property (nonatomic, weak) iboutlet uilabel *statuslabel; set property nil in...
Read more

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

-
i have following viewset: class artistprofileviewset(viewsets.modelviewset): queryset = artistprofile.objects.all() serializer_class = artistprofileserializer def perform_create(self, serializer): if serializer.is_valid(): serializer.save() with following serializers: class simpleartisttrackserializer(serializers.hyperlinkedmodelserializer): class meta: model = artisttrack fields = (...my fields...) class artistprofileserializer(serializers.hyperlinkedmodelserializer): owners = userserializer(many=true, required=false) tracks = simpleartisttrackserializer(many=true, required=false) class meta: model = artistprofile fields = (...my fields...) i getting following error: assertionerror: cannot call `.save()` after accessing `serializer.data`.if need access data before committing database inspect 'serializer.validated_data' instead. i don't see editing serializer.data object. th...
Read more

Why does Go error when trying to marshal this JSON? -

-
i'm trying rather simple example of trying decode json file structs using golang. however, when attempting error that json: cannot unmarshal object go value of type []main.track which don't understand. here's code in question, , json can found here . package main import ( "encoding/json" "fmt" "net/http" "os" ) // tracks group of track types type tracks struct { tracks []track } // track represents singular track type track struct { name string url string artist artist } // artist represents single artist type artist struct { name string mbid string url string } func main() { url := "http://ws.audioscrobbler.com/2.0/?method=geo.gettoptracks&api_key=c1572082105bd40d247836b5c1819623&format=json&country=netherlands" response, err := http.get(url) if err != nil { fmt.printf("%s\n", err) os.exit(1) } de...
Read more