How to navigate to another page when click on dojox.mobile.Button using dojox in worklight.
I want to use only dojox.mobile.Button for this. Any one please help me how to do it.
How to go from page one to page two?
function dojoInit() {
require([ "dojox/form/DropDownSelect", "dijit/form/Select", "dojo/ready",
"dojo/parser", "dojox/mobile", "dojo/dom", "dijit/registry",
"dojox/mobile/ScrollableView", "dojox/mobile/View",
"dojox/mobile/Overlay", "dojox/mobile/Heading",
"dojox/mobile/TextArea", "dojox/mobile/SimpleDialog",
"dojox/mobile/TextBox", "dojox/mobile/Button",
"dojox/mobile/RadioButton", "dojox/mobile/Accordion", "dojox/mobile/GridLayout","dojo/parser",
"dojox/mobile/ContentPane", "dojo/on", "dojo/domReady!" ],
function(ready) {
ready(function() {}
);
});
}
<div id="M_LanguageView" class="selectLang"
data-dojo-type="dojox.mobile.View" data-dojo-props="selected:false">
<img src="images/LanguageLogo.png" class="logo">
<p>Select Your Language</p>
<div align="center">
<hr>
<div>
<form name="dojo" action="Login_en_View">
<button id="M_LanguageView_en_Btn" class="selectLangbtn"
data-dojo-type="dojox.mobile.Button" >
<span class="btnlbl englishFont">ENGLISH</span>
<span class="lang_Indicationarrow"> </span>
</button>
</form>
</div>
<div>
<button id="M_LanguageView_ar_Btn" class="selectLangbtn"
data-dojo-type="dojox.mobile.Button">
<span class="btnlbl arabicFont">العربية</span>
<span class="lang_Indicationarrow"> </span>
</button>
</div>
</div>
</div>
<div id="Login_en_View" class="qHeaderBg englishFont" data-dojo-type="dojox.mobile.View">
<div data-dojo-type="dojox.mobile.ScrollableView" id="Login_en_View_Id"
data-dojo-props="selected:false">
<h1 id="Login_en_View_Header" data-dojo-type="dojox.mobile.Heading"
data-dojo-props="fixed:'top'" style="background: rgba(255, 198, 0, 1.0);">
<img src="images/Header_en.png" class="headerImgAlignment">
</h1>
<div id="Login_en_View_DivId">
<div class="errorMsg englishFont" id="Login_en_View_Error"></div>
<div class="successMsg englishFont" id="Login_en_View_Success"></div>
<label id="Login_en_View_Mno_lbl">Mobile Number :</label>
<input id="Login_en_View_Mno_txt" class="clearFields englishFont"
data-dojo-type="dojox.mobile.TextBox" onKeyDown="if(this.value.length==13 && event.keyCode != 8)return false;" type="number" min="0" inputmode="numeric" pattern="[0-9]*" title="Non-negative integral number">
<label id="Login_en_View_Uc_lbl">Password Code :</label>
<input id="Login_en_View_Uc_txt" class="clearFields englishFont" data-dojo-type="dojox.mobile.TextBox"
onKeyDown="if(this.value.length==8 && event.keyCode != 8)return false;" type="password" min="0" inputmode="numeric" pattern="[0-9]*" title="Non-negative integral number">
<button id="Login_en_View_Sub_Btn" data-dojo-type="dojox.mobile.Button" class="buttonProfile button englishFont">SUBMIT</button>
<button id="Login_en_View_Reg_Btn" data-dojo-type="dojox.mobile.Button" class="buttonProfile button englishFont">REGISTER</button>
<button data-dojo-type="dojox.mobile.Button" id="Login_en_View_Ruc_Btn" class="buttonProfile button englishFont marginBottom">RESED PASSWORD CODE</button>
</div>
<h2 id="Login_en_View_Footer" data-dojo-type="dojox.mobile.Heading"
data-dojo-props="fixed:'bottom'">
<img src="images/Back.png" class="footerImgAlignment"
onclick="goBack()" id="backLang">
</h2>
</div>
</div>
Create form and in mention action attribute value as your destination page.
<form name="dojo" action="your_next_page">
<button></button>
</form>
Use as below on click of the button from the first page.
var presentView = registry.byId("M_LanguageView");
presentView.performTransition("Login_en_View", direction ? direction : 1, "slide");
Related
I'm creating an application where input flexibility is of paramount. My application generates contents dynamically (input, textarea, buttons). this picture shows the bottom section separated from the top with a borderline was generated dynamically
What I want to do is, when I click the grey plus button, it should generate an additional director's name, and director's address fields for a PARTICULAR SECTION (separated by a grey line). Unfortunately, my application keeps adding (and removing) director's name, and director's address fields for all sections instead of the section where the grey button (or red button is clicked) see here. Can that be achieved in Vue.js PLEASE? I.m using the 'add_new_director_field()' function in my Vue.js code to add the aforementioned fields. Thanks in Advance good people. See my code below:
<script>
import NavBar from './VettingReportMenu.vue';
import BreadCrumb from './BCRPreviousDirectors.vue';
import SideLinkPreviousDirectors from './SideLinkPreviousDirectors.vue';
export default {
data() {
return{
header_1: "Previous Directors",
count: 0,
disabled: true,
checked: false,
isActive: true,
inputs: [{
director: "",
}],
sec: []
}
},
components:{
NavBar, BreadCrumb, SideLinkPreviousDirectors
},
setup(){
let myClass = "LeftLine";
let counts = 1;
return myClass, counts;
},
methods:{
add_new_director_field(){
this.inputs.push(this.inputs.length+1);
},
remove_director_field(index){
this.inputs.splice(index, 1)
},
add_new_section(){
this.count++;
this.isActive = false;
this.sec.push({
director: ''
});
},
remove_section(index){
this.count--;
if(this.count == 0)
this.isActive = true;
this.sec.splice(index, 1)
},
trythis: function() {
alert(this.counts);
},
}
}
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
<template>
<div class="row">
<div class="col-sm-12">
<NavBar />
<BreadCrumb />
<br />
</div>
</div>
<!-- This is the main div splitting the page into two (2) -->
<div class="row">
<div class = "col-sm-1"><!-- Left Space Section-->
</div>
<div class = "col-sm-8"><!-- Main Content Section -->
<h2 style="border-bottom: 1px solid #DDDDDD">{{header_1}}</h2>
<br />
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-6">
<div class="chiller_cb form-check-inline align-items-center">
<input id="addDirectorsHistory" type="checkbox" name="prev_dir_checkbox" value="Add Previous Directors" v-model="checked">
<label for="addDirectorsHistory"><strong>Check this box to fill this part, or click 'Save and Continue' to skip.</strong></label>
<span></span>
</div>
</div>
<div class="col-sm-3">
</div>
</div>
<br />
<!-- Here starts the section containing the previous directors -->
<div v-if="checked"> <!-- Wrapper -->
<!-- Buttons for Adding and Removing Previous Director's Section -->
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="input-group">
<button #click.self="add_new_section()" class="btn shadow-sm btn-secondary btn-block rounded-2" id="add_pds" data-toggle="tooltip" data-placement="top" title="Remove Address Field">
<i class="fas fa-plus-square" style="horizontal-align: left;"></i>
Previous Director's Section
</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="input-group">
<button :disabled="isActive" #click="remove_section(count)" class="btn shadow-sm btn-danger btn-block rounded-2" id="remove_pds" data-toggle="tooltip" data-placement="top" title="Remove Address Field">
<i class="fas fa-minus-square" style="horizontal-align: left;"></i>
Previous Director's Section
</button>
</div>
</div>
</div>
<div class="col-sm-2">
</div>
</div>
<!-- Buttons for Adding and Removing Previous Director's Section -->
<br />
<div v-for="(secs,k) in sec" :key="k" style="border-bottom:1px solid #b7b7b7">
<br />
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Heading for Previous Directors' Entry:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-heading" style="color: #8FBC8F"></i>
</span>
</div>
<input placeholder="Heading for Previous Directors Entry" class="form-control" :name="'prev_dir_heading_' + k" required >
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Appointed By Resolution Dated:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="far fa-calendar-alt" style="color: #8FBC8F"></i>
</span>
</div>
<input type="date" class="form-control" placeholder="e.g. 2018" name="resolution_date" required >
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Presented for Filing Dated:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="far fa-calendar-alt" style="color: #8FBC8F"></i>
</span>
</div>
<input type="date" class="form-control" name="filing_date" required >
</div>
</div>
</div>
</div>
</div>
</div>
<!-- The listing of Directors -->
<div :id="'c'+k+d" v-for="(input,d) in inputs" :key="k+d">
<div class="row" >
<div class="col-sm-1">
<strong>{{d+1}}.</strong>
</div>
<div class="col-sm-11">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Director's Name:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-user-tie" style="color: #8FBC8F"></i>
</span>
</div>
<input v-model="input[d]" class="form-control" placeholder="e.g. Hassan Dele Ekene" :name="'current_director_' + k + '_' + d" required >
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="input-group">
<button :v-model="'remove_btn' + k + '' + d" #click="remove_director_field(k + d)" type="button" v-show="d || ( !d && inputs.length > 1)" class="btn shadow-sm btn-danger btn-block rounded-2" data-toggle="tooltip" data-placement="top" title="Remove Address Field">
<i class="fas fa-minus-square" style="horizontal-align: left;"></i>
</button>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="input-group">
<button :id="'add_btn' + k + '' + d" :v-model="'add_btn' + k + '' + d" v-show="d == inputs.length-1" #click="add_new_director_field()" type="button" class="btn shadow-sm btn-secondary btn-block rounded-2" data-toggle="tooltip" data-placement="top" title="Add New Address Field">
<i class="fas fa-plus-square" style="horizontal-align: left;"></i>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Director's Address:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-map-marked-alt" style="color: #8FBC8F; margin-top: -30px"></i>
</span>
</div>
<textarea class="form-control _textarea" :name="'dir_addr_' + k + '_' + d"
maxlength="1000" placeholder="Director's Address" rows="2" required></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
</div>
</div>
<!-- End of listing -->
<!-- Here ends the section containing the current directors -->
<br />
<div class="row">
<div class="col-sm-3">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<button type="submit" class="btn shadow-sm btn-success btn-block rounded-0" id="btn_submit">
<i class="fas fa-angle-double-left" style="horizontal-align: left;"></i>
Back to Share Capital
</button>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
</div>
<div class="col-sm-3">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<button type="submit" class="btn shadow-sm btn-success btn-block rounded-0" id="btn_submit">
<i class="far fa-save"></i>
Save and Continue
<i class="fas fa-angle-double-right" style="horizontal-align: right;"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "col-sm-3" ><!-- SideLink Section-->
<div class="row myClass">
<SideLinkPreviousDirectors />
</div>
</div>
</div>
<br />
<br />
</template>
You have no pointer in your add_new_director_field method in what section inputs should be added. It's very hard to understand from your code whats happening at all. I'd recommend to start from designing a data structure at first, then go to markup. Very quick and simplified draft how can it be:
const inputsGroup = [
{
type: 'text',
value: 'Name',
},
{
type: 'text',
value: 'Address',
},
]
data() {
return {
sections: [
{
inputs: [inputsGroup]
},
]
}
}
...
addSection() {
this.sections.push({ inputs: defaultInputs })
}
removeSection(index) {
this.sections.splice(index, 1)
}
addInputs(sectionIndex) {
this.sections[sectionIndex].inputs.push(inputsGroup)
}
deleteInputs(index, sectionIndex) {
this.sections[sectionIndex].inputs.splice(index, 1)
}
<template>
<button
#click="addSection"
>
Add section
</button>
<div v-for=(section, sectionIndex) in sections>
<div v-for="(inputGroup, inputGroupIndex) in section.inputs">
<input
v-for="input in inputGroup"
:value="input.value"
:type="input.type"
>
<button
#click="deleteInputs(inputGroupIndex, sectionIndex)"
>
Delete inputs
</button>
</div>
<button
#click="addInputs(sectionIndex)"
>
Add inputs
</button>
<button
#click="deleteSection(sectionIndex)"
>
Delete section
</button>
</div>
</template>
I am trying to create one component in VueJS and need to reuse that component.
below is code for me.
Vue.component("radio" , {
props: ['selectGender'],
data: function() {
return{
selected: 1
}
},
template : `
<div class="modal fade" :id="compId" style="background: rgb(0, 0, 0, 0.8);">
<div class="modal-dialog default-font" style="top: 30%;">
<div class="modal-content center">
<div class="modal-header base-bg center">
<div class="center">
<span class="validationHeadSpan">Select Gender</span><br/>
</div>
<button type="button" class="close modal-close" data-dismiss="modal" style="font-size:3rem">×</button>
</div>
<div class="modal-body t-left" id="printArea">
<div class="container">
<div class="row" style="padding: 0rem 1rem;">
<div class="col">
<div class="custom-control custom-radio" style="margin: 1rem 0rem;">
<input class="custom-control-input" type="radio" id="rdbMale" value="0" checked v-model="selected"/>
<label class="custom-control-label" for="rdbMale">
<div class="addr_header_1" style="margin-top: 0.8rem;">Male</div>
</label>
</div>
</div>
<div class="col">
<div class="custom-control custom-radio" style="margin: 1rem 0rem;">
<input class="custom-control-input" type="radio" id="rdbFemale" value="0" checked v-model="selected"/>
<label class="custom-control-label" for="rdbFemale">
<div class="addr_header_1" style="margin-top: 0.8rem;">Female</div>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer center">
<button type="button" class="button" data-dismiss="modal" v-on:click="selectGender(selected)"><span class="validationButtonContent">Select</span></button>
</div>
</div>
</div>
</div>
`,
mounted : function(){
},
methods : {
}
});
Here is my another component from where i am opening reusable component.
Vue.component("Component1" , {
data: function() {
return{
selected: 1
}
},
template : `
<div>
<radio ref="returnOpenFirst" :selectGender="selectGenderFirst"></radio>
<radio ref="returnOpenSecond" :selectGender="selectGenderSecond"></radio>
</div>
<div class="btn btn-primary formButton" v-on:click="openFirst">
<span>Open First</span>
</div>
<div class="btn btn-primary formButton" v-on:click="openSecond">
<span>Open First</span>
</div>
`,
mounted : function(){
},
methods : {
openFirst:function(){
jQuery(self.$refs.returnOpenFirst.$el).modal({
'backdrop' : false
}).modal('show');
},
openSecond:function(){
jQuery(self.$refs.returnOpenSecond.$el).modal({
'backdrop' : false
}).modal('show');
},
selectGenderFirst:function(gender){
console.log("First Gender", gender);
},
selectGenderSecond:function(gender){
console.log("Second Gender", gender);
},
}
});
While opening second component, data property is updated of first component only not for second component.
Any help is highly appreciated.
Thanks in advance.
Here i found solution.
Vue.component("radio" , {
props: ['selectGender','type'],
data: function() {
return{
selected: 1
}
},
template : `
<div class="modal fade" :id="compId" style="background: rgb(0, 0, 0, 0.8);">
<div class="modal-dialog default-font" style="top: 30%;">
<div class="modal-content center">
<div class="modal-header base-bg center">
<div class="center">
<span class="validationHeadSpan">Select Gender</span><br/>
</div>
<button type="button" class="close modal-close" data-dismiss="modal" style="font-size:3rem">×</button>
</div>
<div class="modal-body t-left" id="printArea">
<div class="container">
<div class="row" style="padding: 0rem 1rem;">
<div class="col">
<div class="custom-control custom-radio" style="margin: 1rem 0rem;">
<input class="custom-control-input" type="radio" :id="'rdbMale'+type" value="0" checked v-model="selected"/>
<label class="custom-control-label" :for="'rdbMale'+type">
<div class="addr_header_1" style="margin-top: 0.8rem;">Male</div>
</label>
</div>
</div>
<div class="col">
<div class="custom-control custom-radio" style="margin: 1rem 0rem;">
<input class="custom-control-input" type="radio" :id="'rdbFemale'+type" value="0" checked v-model="selected"/>
<label class="custom-control-label" :for="'rdbFemale'+type">
<div class="addr_header_1" style="margin-top: 0.8rem;">Female</div>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer center">
<button type="button" class="button" data-dismiss="modal" v-on:click="selectGender(selected)"><span class="validationButtonContent">Select</span></button>
</div>
</div>
</div>
</div>
`,
mounted : function(){
},
methods : {
}
});
Issue with same id created by VueJs, we need to pass one dynamic property and with the use of that we need to create id for radio.
Thank you guys.
how do i focus input with a button onClick?
<div class="form-group"
v-for="(file, i) in registerData.requiredDocuments"
:key="`file-${i}`">
<label for="npwp" class="text-muted"> {{file.name}} </label>
<input type="file"
:name="file.name"
class="form-control-file"
:id="file.name"
:accept="file.name === 'Logo' ? `image/png, image/jpg, image/jpeg` : `application/pdf`">
<div class="d-flex">
<button class="btn btn-primary" type="button">Choose File</button>
</div>
</div>
i was hoping by clicking the 'choose file' button it would trigger the input. I've tried
// the input
<input :ref="file.name" type="file">
// the button
<button #click="$refs.file.name.focus()">Choose File</button>
but what i get is the name is undefined anyone knows how to fix this?
I had similar problem before, Here is how and did it.
<template>
<div>
<div class="form-group" v-for="(file, i) in registerData.requiredDocuments" :key="`file-${i}`">
<label for="npwp" class="text-muted"> {{file.name}} </label>
<input type="file" :ref="'file' + i" :name="file.name" class="form-control-file" :id="file.name"
:accept="file.name === 'Logo' ? `image/png, image/jpg, image/jpeg` : `application/pdf`">
<div class="d-flex">
<button #click.prevent="setFileFocus(i)" class="btn btn-primary" type="button">Choose File</button>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
setFileFocus(index) {
this.$nextTick(function(){
this.$refs[("file" + index)][0].focus()
})
}
}
}
</script>
I called focus on nexttick. Hope my answer will be helpful
I have two modals in my page and I need a way to listen to 'ok' event when pressing ok button on first modal and respond by opening the another modal.
There are no examples in the documentation:
https://bootstrap-vue.js.org/docs/components/modal/
I wanted to use this listener but nothing is explained and I couldn't find out what is what here.
export default {
mounted() {
this.$root.$on('bv::modal::show', (bvEvent, modalId) => {
console.log('Modal is about to be shown', bvEvent, modalId)
})
}
}
This is the relevant part of my code:
<div>
<b-modal id="modal-center-add-post" style="width: 120px" centered class="h-50 d-inline-block min-vw-100" ok-title="next" >
<add-post></add-post>
</b-modal>
</div>
<div>
<b-modal id="modal-center-add-content" style="width: 120px"
centered class="h-50 d-inline-block min-vw-100"
ok-only ok-title="Create" >
<add-content></add-content>
</b-modal>
</div>
and add-post component code is
<template>
<form>
<div class="form-group row">
<label for="title"
class="col-sm-2 col-form-label">
Title
</label>
<div class="col-sm-10">
<input type="text"
class="form-control"
id="title"
placeholder="Title">
</div>
</div>
<div class="form-group row">
<label for="chooseTopic"
class="col-sm-2 col-form-label">
Topic
</label>
<div class="col-sm-10">
<select id="chooseTopic" class="form-control">
<option selected>Leadership</option>
<option>HR</option>
<option>Sales</option>
<option>Marketing</option>
</select>
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0"> Type</legend>
<div class="col-sm-10">
<div class="form-check-inline ">
<label class="form-check-label"
for="video"
:class="{'checked':(isChecked==='video')}"
#click="isChecked='video'">
<input class="form-check-input"
type="radio" name="video"
id="video"
v-model="postingType"
value="video" checked>
<i class="fab fa-youtube "></i>
Video
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label"
for="ebook"
:class="{'checked':(isChecked==='ebook')}"
#click="isChecked='ebook'">
<input class="form-check-input"
type="radio"
name="ebook"
id="ebook"
v-model="postingType"
value="ebook">
<i class="far fa-file-pdf "></i>
Ebook
</label>
</div>
<div class="form-check-inline ">
<label class="form-check-label "
for="article"
:class="{'checked':(isChecked==='article')}"
#click="isChecked='article'">
<input class="form-check-input " type="radio"
name="article" id="article"
v-model="postingType" value="article" >
<i class="fas fa-pen-square "></i>
Article
</label>
</div>
</div>
</div>
</fieldset>
</form>
</template>
<script>
export default {
name: "AddPost",
data(){
return{
postingType:'',
isChecked:'video'
}
},
}
</script>
So when I click on ok (next) in add-post component I want the second modal to pop up.
it's right on the bottom of the documentation under Events
basicly use
#ok="yourOkFn"
I'm trying to implement input field with additional options similar to gmail search box. You can see it on the screenshots below.
When you click on a caret sign then additional form is shown up:
Currently, I'm struggling with making a nice looking form shown after clicking on the caret sign. Anyone knows how to achieve that with Bootstrap?
Here is a jsfiddle link:
https://jsfiddle.net/x1sfs9xb/1/
<div class="container">
<div class="row">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<form action="#" class="form-horizontal">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Input 1</label>
<div class="col-sm-9">
<input class="form-control" id="name" name="input1" type="text" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Input2</label>
<div class="col-sm-9">
<input class="form-control" id="name" name="input2" type="text" />
</div>
</div>
</div>
</div>
<p>
<input class="btn action-button pull-right" name="commit" type="submit" value="Save">
</p>
</form>
</li>
</ul>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div><div class="row">
<div class="col-md-12">
<h1>Some content</h1>
</div>
</div>
</div>
You can achieve that by using a little CSS and JS:
CSS (your dropdown menu is relative to input-group-btn so you have to change position of that to static - now your dropdown menu is related to the input-group):
.input-group-btn {
position: static;
}
.dropdown-menu {
left: 0;
}
JS (get width of the input and assign it to your dropdown menu, also change it on browser resize):
var inputWidth = $('.form-control').outerWidth();
$('.dropdown-menu').css('width', inputWidth);
$(window).resize(function () {
inputWidth = $('.form-control').outerWidth();
$('.dropdown-menu').css('width', inputWidth);
});
JSFIDDLE