CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Dhaval Pankhaniya
Dhaval Pankhaniya

Reputation: 1996

Bootstrap layout : getting two scrollbars

Below is my html code for todo application and my problem is that I am getting two scroll bars, can someone please suggest me the correct bootstrap layout for my application ?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <div class="col-md-12">
                <input class="form-control" placeholder="Name" type="text" data-bind="value: Name, valueUpdate: 'afterkeydown',hasFocus: isNameSelected">
                <textarea class="form-control" placeholder="Detail" style="resize:none" data-bind="value:Detail,hasFocus: isDetailSelected"></textarea>
                <button type="button" class="btn btn-primary" data-bind="click: createOrUpdateTodo,text:createBtnText">Create</button>
                <button type="button" class="btn btn-primary" data-bind="click: cancel">Cancel</button>
            </div>
        </div>
    </div>
    <div class="col-md-12" style="padding:20px">
        <div class="row" data-bind="foreach: todoList">
            <div class="col-md-3">
                <div class="todo-box">
                    <input type="hidden" data-bind="value:TodoId" value="40">
                    <label data-bind="html: Name" class="todo-name">From today's featured article</label>
                    <i class="fa fa-window-close pull-right" data-bind="click: removeTodo" title="Delete Todo"></i>
                    <i class="fa fa-check-circle pull-right" data-bind="click: archiveTodo" title="Archive"></i>
                    <i class="fa fa-edit pull-right" data-bind="click: edit" title="Edit"></i>
                    <h6 data-bind="text: CreatedOnStr()" class="todo-createdon">12/4/2018 4:51:21 PM</h6>
                    <div class="editable" data-bind="text: Detail">The Kalakaua coinage is a set of silver coins of the Kingdom of Hawaii dated 1883. They were designed by Charles E. Barber, Chief Engraver of the United States Bureau of the Mint, and were struck at the San Francisco Mint. The issued coins are a dime, quarter dollar, half dollar, and dollar (pictured). No immediate action had been taken after the 1880 act authorizing the coins, but King Kalakaua was interested, and government officials saw a way to get out of a financial bind by getting coins issued in exchange for government bonds. The coins entered circulation in early 1884. After legal maneuvering by the business community in Honolulu, who feared inflation of the currency in a time of recession, the government agreed to use over half of the coinage as backing for paper currency. The coins were more eagerly accepted after the economy picked up in 1885. In 1903, after Hawaii became a territory, Congress called in the coins, replacing them with US currency. </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 575

Answers (4)

morteify
morteify

Reputation: 182

You should add parent div with class "container", or "container-fluid" if you want your layout stretched. 

<div class="container-fluid">
  <div class="row">
    <!-- Your content !-->
  </div>
</div>

Upvotes: 1

AnHa
AnHa

Reputation: 130

You are getting a scrollbar in the X-Axis cause you are starting with a row. The row class in bootstrap add negative margin to left and the right of the div, causing for the bottom scrollbar to appear. Either wrap your row in a container or container-fluid div else add the mx-0 class to the row

Upvotes: 1

Vijay Atmin
Vijay Atmin

Reputation: 465

Simply place your code inside container div

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <div class="col-md-12">
                    <input class="form-control" placeholder="Name" type="text" data-bind="value: Name, valueUpdate: 'afterkeydown',hasFocus: isNameSelected">
                    <textarea class="form-control" placeholder="Detail" style="resize:none" data-bind="value:Detail,hasFocus: isDetailSelected"></textarea>
                    <button type="button" class="btn btn-primary" data-bind="click: createOrUpdateTodo,text:createBtnText">Create</button>
                    <button type="button" class="btn btn-primary" data-bind="click: cancel">Cancel</button>
                </div>
            </div>
        </div>
        <div class="col-md-12" style="padding:20px">
            <div class="row" data-bind="foreach: todoList">
                <div class="col-md-3">
                    <div class="todo-box">
                        <input type="hidden" data-bind="value:TodoId" value="40">
                        <label data-bind="html: Name" class="todo-name">From today's featured article</label>
                        <i class="fa fa-window-close pull-right" data-bind="click: removeTodo" title="Delete Todo"></i>
                        <i class="fa fa-check-circle pull-right" data-bind="click: archiveTodo" title="Archive"></i>
                        <i class="fa fa-edit pull-right" data-bind="click: edit" title="Edit"></i>
                        <h6 data-bind="text: CreatedOnStr()" class="todo-createdon">12/4/2018 4:51:21 PM</h6>
                        <div class="editable" data-bind="text: Detail">The Kalakaua coinage is a set of silver coins of the Kingdom of Hawaii dated 1883. They were designed by Charles E. Barber, Chief Engraver of the United States Bureau of the Mint, and were struck at the San Francisco Mint. The issued coins are a dime, quarter dollar, half dollar, and dollar (pictured). No immediate action had been taken after the 1880 act authorizing the coins, but King Kalakaua was interested, and government officials saw a way to get out of a financial bind by getting coins issued in exchange for government bonds. The coins entered circulation in early 1884. After legal maneuvering by the business community in Honolulu, who feared inflation of the currency in a time of recession, the government agreed to use over half of the coinage as backing for paper currency. The coins were more eagerly accepted after the economy picked up in 1885. In 1903, after Hawaii became a territory, Congress called in the coins, replacing them with US currency. </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

mehul bhanderi
mehul bhanderi

Reputation: 22

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<body style="overflow-x:hidden;">
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <div class="col-md-12">
                <input class="form-control" placeholder="Name" type="text" data-bind="value: Name, valueUpdate: 'afterkeydown',hasFocus: isNameSelected">
                <textarea class="form-control" placeholder="Detail" style="resize:none" data-bind="value:Detail,hasFocus: isDetailSelected"></textarea>
                <button type="button" class="btn btn-primary" data-bind="click: createOrUpdateTodo,text:createBtnText">Create</button>
                <button type="button" class="btn btn-primary" data-bind="click: cancel">Cancel</button>
            </div>
        </div>
    </div>
    <div class="col-md-12" style="padding:20px">
        <div class="row" data-bind="foreach: todoList">
            <div class="col-md-3">
                <div class="todo-box">
                    <input type="hidden" data-bind="value:TodoId" value="40">
                    <label data-bind="html: Name" class="todo-name">From today's featured article</label>
                    <i class="fa fa-window-close pull-right" data-bind="click: removeTodo" title="Delete Todo"></i>
                    <i class="fa fa-check-circle pull-right" data-bind="click: archiveTodo" title="Archive"></i>
                    <i class="fa fa-edit pull-right" data-bind="click: edit" title="Edit"></i>
                    <h6 data-bind="text: CreatedOnStr()" class="todo-createdon">12/4/2018 4:51:21 PM</h6>
                    <div class="editable" data-bind="text: Detail">The Kalakaua coinage is a set of silver coins of the Kingdom of Hawaii dated 1883. They were designed by Charles E. Barber, Chief Engraver of the United States Bureau of the Mint, and were struck at the San Francisco Mint. The issued coins are a dime, quarter dollar, half dollar, and dollar (pictured). No immediate action had been taken after the 1880 act authorizing the coins, but King Kalakaua was interested, and government officials saw a way to get out of a financial bind by getting coins issued in exchange for government bonds. The coins entered circulation in early 1884. After legal maneuvering by the business community in Honolulu, who feared inflation of the currency in a time of recession, the government agreed to use over half of the coinage as backing for paper currency. The coins were more eagerly accepted after the economy picked up in 1885. In 1903, after Hawaii became a territory, Congress called in the coins, replacing them with US currency. </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions