CODEWITHSUNDEEP
htmltwitter-bootstrap-3
Nominalista
Nominalista

Reputation: 4840

One scrollable column in row Bootstrap

I want to only one column scrollable, instead two columns are scrolling after too much text. This is my html file:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/test.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Dosis:600,500,400,300' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700,900,500' rel='stylesheet'
          type='text/css'>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 6
            });
            var infoWindow = new google.maps.InfoWindow({map: map});

            // Try HTML5 geolocation.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    infoWindow.setPosition(pos);
                    infoWindow.setContent('Location found.');
                    map.setCenter(pos);
                }, function() {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                    'Error: The Geolocation service failed.' :
                    'Error: Your browser doesn\'t support geolocation.');
        }

        google.maps.event.addDomListener(window, 'load', initMap);
    </script>
</head>

<body>
<div class="fluid-container">
    <div id="app-row"  class="row">
        <div id="app" style="overflow: auto;" class="col-xs-5">
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
            <p>This text is not funny</p>
        </div>
        <div id="map-container" style="overflow: hidden;" class="col-xs-7">
            <div id="map"></div>
        </div>
    </div>
</div>
</body>
</html>

And my test.css :

.fluid-container {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    width: 100%;
}

.row {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    width: 100%;
}

html, body, .fluid-container, #app-row, #map-container {
    height: 100%
}

#app, #app ul {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
}


#app-row {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
}

#map-container {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
}

#map {
    height: 100%;
    width: 100%;
}

I don't know what I am doing wrong, because whole page is scrolling. I thought that overlow: hidden helps with such issue. Every help will be apreciated.

Upvotes: 0

Views: 190

Answers (2)

Jaspreet Singh Sekhon
Jaspreet Singh Sekhon

Reputation: 70

I just tried to fix your issue. According to me you just need to add some style to your div which id is map-container.

(Its about to add position to fixed and right to 0px)

Just replace your code with the code as seen below

<div id="map-container" style="overflow: hidden; position:fixed; right:0px;" class="col-xs-7">

Upvotes: 2

An0nC0d3r
An0nC0d3r

Reputation: 1303

Add a height of 100% like so...

#app, #app ul {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    height:100%
}

Upvotes: 0

Related Questions