I am using Bulma and I made an hoverable dropdown, but the dropdown content exceeds the whole page content. How can I make it fixed with larger width and also responsive?
For now it looks like this:
Html code:
<div class="navbar-end">
<div class="dropdown is-hoverable navbar-item ">
<div class="dropdown-trigger">
<button aria-controls="dropdown-menu6" aria-haspopup="true" class="button is-primary">
<strong>Account</strong>
</button>
</div>
<div class="dropdown-menu has-text-centered" id="dropdown-menu6" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>Acces your quizbee account, test your skills and have fun. </p>
<hr class="dropdown-divider">
<div class="buttons is-centered">
<button class="button is-primary is-rounded">Register</button>
<button class="button is-light is-rounded">Login</button>
</div>
</div>
</div>
</div>
</div>
You just need to set a position of dropdown. Add class is-right
<div class="dropdown is-right is-active">
Related
I have a modal with a dropdown. When clicking the dropdown the modal always gets a scrollbar and I wanted to know if I miss something obvious? I could probably just add a class modalheight and define in css:
.modalheight {
min-height: 400px;
}
but this seems not like a true solution.
function closeModal () {
var modal = document.getElementById("mymodal")
modal.classList.remove("is-active")
};
function activateDropDown () {
var dropdown = document.getElementById("mydropdown");
dropdown.classList.add("is-active")
};
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<div class="modal is-active" id="mymodal">
<div class="modal-background">
</div>
<div class="modal-content">
<div class="box">
<article class="media">
<div class="media-content">
<div class="content">
this is a test:
<div class="dropdown" id="mydropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" onclick="activateDropDown()">
<span>Dropdown button</span>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
test 1
</a>
<a href="#" class="dropdown-item">
test 2
</a>
<a href="#" class="dropdown-item">
test 3
</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
Can I somehow make the modal big enough to fit all the buttons options dynamically? If not, how would I do it statically?
Check this option, I think the behaviour is connected with the dropdown menu absolute positioning that takes it out of the normal flow. By the way, for button html tag both the starting and ending tag are mandatory.
function closeModal () {
var modal = document.getElementById("mymodal")
modal.classList.remove("is-active")
};
function activateDropDown () {
var dropdown = document.getElementById("mydropdown");
dropdown.classList.toggle("is-active")
};
#dropdown-menu {
position: static;
}
#modal-content {
max-height: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<div class="modal is-active" id="mymodal">
<div class="modal-background">
</div>
<div class="modal-content" id="modal-content">
<div class="box">
<article class="media">
<div class="media-content">
<div class="content">
this is a test:
<div class="dropdown" id="mydropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" onclick="activateDropDown()"> <span>Dropdown button</span></button>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
test 1
</a>
<a href="#" class="dropdown-item">
test 2
</a>
<a href="#" class="dropdown-item">
test 3
</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
I have written a Reactive form. The submit button is supposed to be outside the Reactive form.It has also got two dropdowns. In this form im reading data dynamically from api. I have written click events in the dropdown as well(for a purpose to bind that particular value when i submit the form). The issue here is that whenever i click on the dropdown...the submit button click event is getting triggered....i have been trying to make them(the three click events) be unique...but im unable to.... kindly help me. Below im providing my code.
<div class="container content-box-shadow tiles-top-spacing tiles-page">
<div class="row assessment-m-b">
<div class="col-lg-12 col-md-12 pt-3 pb-5">
<div class="d-flex align-items-center justify-content-between">
<span class="common-headding">{{pageText?.accountSettingPageTextData?.editHeader}}</span>
<div>
<button type="submit" class="common-button green"
(click)="onSubmit()">{{pageText?.accountSettingPageTextData?.save}}</button>
<button type="button"
class="common-button orange" (click)="previousModule()">{{pageText?.accountSettingPageTextData?.cancel}}</button>
</div>
</div>
<div class="account-settings-block">
<form *ngIf="personalData" [formGroup]="accountSettingsForm" >..................................................
<!-- Account-Settings Security Questions -->
<div *ngIf=" personalData?.dashBoardPersonalInfoData?.securityQuestionsAnswers.isVisible"
class="account-form-inner-block">
<legend>{{pageText?.accountSettingPageTextData?.questions?.header}}<span class="required">**</span></legend>
<div class="row">
<div class="col-md-6">
<div>
<label for="question1">
{{pageText?.accountSettingPageTextData?.questions?.question1}}
</label>
<div class="btn-group w-100 pt-1" ngbDropdown>
<button class="btn btn-secondary dropdown-toggle w-100 text-left"
aria-haspopup="true" aria-expanded="false" id="dropdownMenu1"
ngbDropdownToggle>
<span *ngIf="!SecurityQuestion1.question">
Select a Question
</span>
<span *ngIf="SecurityQuestion1.question">
{{SecurityQuestion1.question}}
</span>
</button>
<div class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownMenu">
<button (click)="selectQuestion1(questions)"
*ngFor="let questions of personalData?.dashBoardPersonalInfoData?.securityQuestions"
class="dropdown-item">{{questions?.question}}
</button>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<div class="col-md-6">
<div>
<label for="question2">
{{pageText?.accountSettingPageTextData?.questions?.question2}}
</label>
<div class="btn-group w-100 pt-1" ngbDropdown>
<button class="btn btn-secondary dropdown-toggle w-100 text-left"
aria-haspopup="true" aria-expanded="false" id="dropdownMenu2"
ngbDropdownToggle>
<span *ngIf="!SecurityQuestion2.question">
Select a Question
</span>
<span *ngIf="SecurityQuestion2.question">
{{SecurityQuestion2.question}}
</span>
</button>
<div class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownMenu">
<button (click)="selectQuestion2(questions)"
*ngFor="let questions of personalData?.dashBoardPersonalInfoData?.securityQuestions"
class="dropdown-item">{{questions?.question}}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I could solve my issue above by using form="myForm" attribute in the save button. and using id="myForm" attribute in the form tag.....just by using those attributes....i could have unique trigger for all the three events......Im stilll keeping posted so that someone neednot have to waste almost 4hours or more in finding it out....
I have an accordion and collapse element and I am displaying using ngFor. I need the first element to show and the remaining to be hidden everytime.
I have tried modifying the ngClass attributes but it gets applied to every element in the for loop.
<div id="accordion">
<ul *ngFor="let group of records">
<div class="card">
<div class="card-header" attr.id="heading{{group.id}}">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" attr.data-target="#collapse{{group.id}}"
aria-expanded="false" (click)='toggleIcon()' attr.aria-controls="collapse{{group.id}}">
<i [ngClass]="{'fa':true,'fa-plus':icoPlus,'fa-minus':icoMinus}"></i>
<span id='region' class='region-heading'>{{group.regionName}}</span>
</button>
</h5>
</div>
<div attr.id="collapse{{group.id}}" [ngClass]="{'collapse':true, 'show':showEnabled}"attr.aria-labelledby="heading{{group.id}}" data-parent="#accordion">
<div class="card-body " >
<ul class='country-list' *ngFor="let country of group.countryList ">
<li class='country-name'>
{{country.countryName}}
<div class='divider'></div>
</li>
<ul *ngFor="let campus of country.campusList" class="list-group list-group-flush">
<li>
<div class='row'>
<div class='col-sm'>
{{campus.campusName}}
</div>
<div class='col-sm'>
{{country.countryName}}, {{campus.cityName}}
</div>
<div class='col-sm'>
{{campus.skypeConfNumber}}
</div>
<div class='col-sm'>
<a [attr.href]="'tel:' + campus.skypeConfNumber + conferenceIdStr" (click)='clicked(country.countryName)'>
click here to join
</a>
</div>
</div>
<div class='divider'></div>
</li>
</ul>
</ul>
</div>
</div>
the expected result is the first element should be expanded and the rest should be minimized.
On this page: (link removed)
I'm starting to build a tumblr theme, and I have decided to build it using bootstrap. If you click the little I info button in the left corner, a div comes down with a user picture and description. The user picture and description appear as I want them to, but they are off center. I'd like them to be centered. I've tried < center >, using a fluid width container, etc with no avail. I also checked and bootstrap.css and the bootstrap.min.js are properly linked to the page.
Any help with this would be GREAT!
My code:
<div class="container-fluid" id="foo" style="z-index:5; display:none; height:auto;">
<center>
<div class="container-fluid" style="height:auto;">
<div class="row">
<div class="col-md-2" style=" margin-top:1%;"><img class="avatar-style-circle" src="{PortraitURL-128}" /><br/><h3>{AuthorName}</h3></div>
<div class="col-xs-12 col-md-8" style="background-color:blue; margin-top:3%;"><p style="text-align:justify;">{Description}<br/></p></div></div></div>
<div class="container-fluid" style="height:auto; margin-bottom:2%;">
<center>
<div class="container-fluid">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
<br/>
<div class="btn-group" role="group" aria-label="..."> Ask
Archive
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="z-index:5; margin-left:13%;">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div><!-- /.col-lg-6 --></center>
</div>
</div>
</div>
</div>
<div class="site-wrapper">
{block:ifShowInfoButton}
<i class="fa fa-info-circle fa-3x" style="position:absolute; margin-left:0.4%; margin-top:0.4%; color:{color:Info Button Color};"></i>
{/block:ifShowInfoButton}
Change the col on the picture from md-2 to md-4.
Or change the col on the text from md-8 to md-10 (better)!
It works on a 12 grid system and currently it is only using 10 columns out of 12, which is why it appears to align to the left :)
You can also use offset.
papakia's answer is correct however you could also add an empty column in front of your image column that is col-md-2 this will sometimes help not throw off the scale of other items if they are already tuned to your liking.
I'm trying to display two custom buttons in the same row and centered across the page. Currently, the buttons are showing on two different rows. Also, there has to be a better way of centering the buttons than with 'offset3'. Thank you in advance.
<div class = "container">
<div class="row">
<div class="col-sm-3 offset3">
<a href="/bat-times/week">
<button class="btn btn-red"> Test 1</button>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<button class="btn btn-yellow" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>
You simply use Bootstrap's default class .text-center and that's it, keeping in mind the sum of your columns must be 12 (unless you use a custom number of columns). See code below:
<div class="container">
<div class="row">
<div class="col-sm-6 text-center">
<a href="/bat-times/week">
<button class="btn btn-red "> Test 1</button>
</a>
</div>
<div class="col-sm-6 text-center">
<a href="#">
<button class="btn btn-yellow " onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>
And see Bootply. I have added some CSS for visualization purposes, but you don't need it at all, only the HTML part. And of course, you could use text-left, text-right, text-justify, etc. See Bootstrap Type Alignment for complete list
Try this:
TYPE 1
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 row">
<a href="/bat-times/week">
<button class="btn btn-red pull-right">Test 1</button>
</a>
</div>
<div class="col-xs-6 col-sm-6 row">
<a href="#">
<button class="btn btn-yellow pull-left" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>
DEMO1
TYPE 2
<div class="container">
<div class="row text-center">
<a href="/bat-times/week">
<button class="btn btn-red">Test 1</button>
</a>
<a href="#">
<button class="btn btn-yellow" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
DEMO2
I found in your code you are using col-sm-3 which is not applicable for smaller devices like mobile rather it will work for tablet and desktop etc. we know that bootstrap grid system has divided our device screen with 12 equal parts if we will use col-xs-6 for our both div then it will divide our device screen into two equal part whether it is a mobile or tablet... doesn't matter. Then I used bootstrap text-center class for making the inside element centered align, bootstrap center-align class which is nothing but text-align:center; in our plain css.
Try the below piece of code. Demo
<div class = "container">
<div class="row">
<div class="col-xs-6 text-center">
<a href="/bat-times/week">
<button class="btn btn-red"> Test 1</button>
</a>
</div>
<div class="col-xs-6 text-center">
<a href="#">
<button class="btn btn-yellow" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>