I'm trying to make two buttons that are side by side to go into a table that I'm displaying through a PHP file called within a Javascript, however I cannot get the buttons to go side by side correctly. I've tried various things people previously suggested, but with no luck. Any suggestions?
$data .= '<tr><td>'.$row['surname'].'</td><td>'.$row['forename'].'</td><td>'.$row['username'].'</td><td>'.$row['joined'].'</td><td>'.$row['rank'].'</td><td><button type="button" class="btn btn-block btn-primary btn-xs" onClick="ChangePassOpen(\''.$row['username'].'\')">Change Password</button><button type="button" class="btn btn-block btn-primary btn-xs" onClick="ChangeRankOpen(\''.$row['username'].'\')">Change Account Rank</button></td></tr>';
Or view webpage (Hit Go to show the table) http://thomas-smyth.co.uk/admin/accountlist.php
Thanks,
Tom
class="btn btn-block btn-primary btn-xs"
btn-block class is going to make your buttons take up 100% of the space available and block the entire row (Bootstrap docs), so nothing else fits in it.
Remove the btn-block class
Add some css style rules to make the buttons more distinguishable and fit in better. I'd suggest adding some padding or a margin between the buttons.
Related
The main question is, is there a way to add a space between the html div's generated by a .pug file?
I have been converting a collogues HTML into Pugs format, and everything transitioned fine except for one small piece. A group of buttons, lost all spacing between each.
After a lot of examining of both the original HTML and the generated HTML, I had noticed the only main difference was spacing between each button element. So I tried manually changing it so they had the spaces. Lo and behold the margins showed up.
While this sounds like it is really unexpected behavior or a bug from Bootstrap's side of things to me, I'm hoping there is a work around that lets me add the spaces to the pug file.
Here is the origional HTML:
<div class="my-3 text-center" role="group">
<button class="btn btn-primary" id="saveBtn" type="button" disabled="">Save</button>
<button class="btn btn-danger" id="undoChangesBtn" type="button" disabled="">Undo Changes</button>
<button class="btn btn-secondary" id="viewSignPage" type="button">View Sign Page</button>
<button class="btn btn-secondary" id="viewDataPage" type="button">View Data Page</button>
</div>
Here is the pug I created from it:
.my-3.text-center(role="group")
button.btn.btn-primary#saveBtn(type="button" disabled) Save
button.btn.btn-danger#undoChangesBtn(type="button" disabled) Undo Changes
button.btn.btn-secondary#viewSignPage(type="button") View Sign Page
button.btn.btn-secondary#viewDataPage(type="button") View Data Page
The HTML it generates that has an issue:
<div class="my-3 text-center" role="group"><button class="btn btn-primary" id="saveBtn" type="button" disabled="">Save</button><button class="btn btn-danger" id="undoChangesBtn" type="button" disabled="">Undo Changes</button><button class="btn btn-secondary" id="viewSignPage" type="button">View Sign Page </button><button class="btn btn-secondary" id="viewDataPage" type="button">View Data Page</button></div>
Turns out there is a simple fix. You just need to add a margin class to each button. Here is an example of how the buttons are now formatted in pug
button.btn.btn-primary.m-1#saveBtn(type="button" disabled) Save
Have a task where I have some information in a button that needs to all be aligned to the same sides.
Its a digitized phone menu so the info on the left size is the line name and the information on the right is the lines extension. I want to align all of the extensions right.
I used buttons that activate Modals with more information. The buttons are required for the form of modal I am using. (Or at least that is what I found in research.)
Tried paragraph tricks but they broke the buttons function.
<button type="button" class="btn" data-toggle="modal" data-target=".HPENET_MODAL">2 - HPE Networking ................................................... XXXXX</button>
Try this:
<button type="button" class="btn" data-toggle="modal" data-target=".HPENET_MODAL" style="width:500px;text-align:left">2 - HPE Networking <div style="float:right">XXXX</div></button>
I am using the bootstrap button groups, and I want them to be accessible. Right now the screen reader sees them as separate buttons. I would like the screen reader to see them as a group or list of buttons.
http://getbootstrap.com/components/#btn-groups
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
I would also want the screen reader to know which button is selected but that shouldn't be very hard with the aria-checked tag.
I don't think screen reader will see them as group of buttons unless you use input type=radio and style them to look like buttons.
Also to tell which button is selected "aria-pressed" is better.
One solution I can think of is to add role="radio" to the buttons so that screen reader sees them as a group. I actually works, but I am not sure if its considered bad practice
I am converting my bootstrap 2 site to bootstrap 3 and am a bit stuck on a particular control which is several sets of tab pages controlled by toggle buttons.
Here is an example of my working bs2 code:
http://bootply.com/97187
If I run this code in bs3, I get this:
http://bootply.com/97189
The problem as you will see is that the buttons no longer behave like a group of radio buttons. They toggle individually.
I am currently here:
http://bootply.com/97184
This looks like it works but it doesn't. The grey colour you get when you click on a button is in fact, the "I've now got the focus" colour. Click somewhere else and it goes back to white.
I really need the buttons to toggle as they did in bs2. What small thing am I neglecting here?
Your problem is in here:
<div class="well well-sm">
<span>Set A:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default active" href="#tab1" data-toggle="tab">1</button>
<button class="btn btn-sm btn-default" href="#tab2" data-toggle="tab">2</button>
</div>
<span> Set B:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default" href="#tabA" data-toggle="tab">A</button>
<button class="btn btn-sm btn-default" href="#tabB" data-toggle="tab">B</button>
<button class="btn btn-sm btn-default" href="#tabC" data-toggle="tab">C</button>
</div>
</div>
Adding the class active to the button class for tab1 seemed to prevent the buttons from toggling as you want them to. Simply removing the active class seems to fix the problem.
Demo: http://bootply.com/97199
Ok, I've been playing around quite a bit and got to an acceptable solution.
Unlike the Bootstrap 2 version, it requires a bit of JavaScript.
Here it is: http://bootply.com/97426
The only thing it doesn't do is group the button groups into a single component but this is acceptable, unless someone can find a way to do this as well.
Would be nicer if Bootstrap just worked the same way as V2 in this case.
I have created a button using
<button type="button" class="btn btn-success btn-lg ">Register</button>
How could I give a link to another page when the button is pressed?
Use a anchor instead, and you can still style it as a button..
Register
Bootply: http://www.bootply.com/99320