CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Reado
Reado

Reputation: 1452

Using jQuery Mobile to display 2 buttons side-by-side

I'm new to the whole jQuery/Mobile/HTML5/CSS3.

Using the code below, I want to display the buttons horizontally (50% wide each) and stretch across 100% of the screen. Sounds simple, but for some reason the buttons display vertically:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    <style>
        #page-buttons .ui-controlgroup-controls { width: 100%; }
        #page-buttons .ui-controlgroup-controls a { width: 50%; }
    </style>
</head>
<body>
<div id="page-buttons" data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button">Previous</a>
    <a href="#" data-role="button">Next</a>
</div>
</body>
</html>

The only way to display the buttons side-by-side is to set the width to 49.8%. But why?

I have created a jsfiddle here: https://jsfiddle.net/j0q0gqca/

Upvotes: 0

Views: 524

Answers (2)

Hunter Turner
Hunter Turner

Reputation: 6894

A simple way to solve this is by giving your container a display: flex;

#page-buttons .ui-controlgroup-controls {
  width: 100%;
  display: flex;
}

JSFiddle

Upvotes: 2

Nenad Vracar
Nenad Vracar

Reputation: 122087

You have border on button's so you should add box-sizing: border-box DEMO

* {
  box-sizing: border-box;
}
#page-buttons .ui-controlgroup-controls {
  width: 100%;
}
#page-buttons .ui-controlgroup-controls a {
  width: 50%;
}

Upvotes: 2

Related Questions