Hello I am trying to use angular-strap to put together a multiselect drop down menu. For testing, I am just putting in some dummy data like so. THe issue is that the check mark on selected items displays on almost new line. I am not sure how to go about fixing it.
{value:'BLAH.09', label:'BLAH.09 '}
Couple of things to keep in mind:
1. The extra spaces in label are just a part of the troubleshooting process, it still doesn't work if they are there.
2. The reason the box is so wide in the screenshot is because I manually adjusted the width in css to see if it makes a difference, it doesn't..
Button looks like this:
<button type="button" class="btn btn-default" ng-model="selectedIcons" data-html="1" placeholder="Category Filter" data-multiple="1" data-animation="am-flip-x" ng-options="val.value for val in display_data['fields']" bs-select> Action <span class="caret"></span></button>
Was missing an include to the main.min.css file.
Related
So basically, I have a vue web app and created a container with multiple bootstrap cards. The cards have a button, which collapses a form I've made for guests to apply. However, when I press the button of a card, it collapses the apply form of all cards at once. To fix that, I have to give each individual card a specific id which matches the data-bs-target and aria-controls of the button. So far, so good.
I've made a variable card_id and inserted it into the attribute values with v-bind, but it's not working. The reason is, that the attribute data-bs-target needs a hashtag before the actual variable name, but I can't figure out a way to do that.
Code sample:
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" :data-bs-target="card_id" aria-expanded="false" :aria-controls="card_id">Apply now!</button>
<div class="collapse" :id="card_id">
<div class="card card-body">
<GuestForm></GuestForm>
</div>
</div>
I obviously can't just put a hashtag in front of the variable, so what is my next best solution for this?
Thank you in advance.
You could use the string template with backticks `` like:
<button :data-bs-target="`#${card_id}`"
I'll try my best to explain what is going on as it is quite strange. Previous to making some changes on our website (this wasn't touched) this worked perfectly I am currently having 2 unexpected errors with Radio buttons in JQuery when I use .buttonset()
We currently have a multistep form, on the second step we use details from the first step to provide a list of service providers to the client where they can select which one they would like to use.
We use ajax to return HTML that is placed inside radio-group div. Example of HTML below:
<input type="radio" value="1" name="cleaner-select" id="cleaner-select-1" class="cleaner_selection ui-corner-left">
<label for="cleaner-select-1" class="cleaner-selection-box col-md-2 col-xs-12">
<div class="col-md-12 col-xs-12 center fivepxpad">
<button type="button" class="btn btn-default btn-primary" onclick="view_profile(1)"> View Cleaner Profile <span class="btn-icon-right icon-circle-right"></span></button>
</div>
<div class="col-md-12 col-xs-12 cleanerproducts">
<span class="icon green icon-leaf fontsize16"></span> Eco / Natural Products
</div>
<div class="col-md-12 col-xs-12">
<span class="icon icon-shield cleanerverified"></span> Verified
</div>
<div class="col-md-12 col-xs-12">
<span class="icon icon-location"></span> Close-By
</div>
</label>
This is placed inside a DIV below:
<div id="radio-group" class="center">
</div>
Using this JQuery
$('#radio-group').html(result[1]);
$('#radio-group').buttonset();
Current Errors:
When buttonset is called the values of all the radio inputs are removed. eg. changes from value="1" to just value. This didn;t previously happen, I know buttonset is causing this because when I remove $('#radio-group').buttonset(); the value stays just fine (no error in HTML).
When buttonset is applied to the parent div "radio-group" it receives ui-buttonset class as expected but nothing else happens, the input radio buttons are still visible, the colours aren't showing when selected and the labels stay white (meant to be a slight grey colour) but when the labels are clicked on the correct raido input is selected.
On our last update we joined a few CSS files and JS files together but kept everything in the same order that it was previously loaded in. This was to reduce the amount of calls we had to make and everything else is working fine so not entirely sure this is causing it. We also get no console errors.
Things I've tried:
Changed $('#radio-group').buttonset(); to $('#radio-group').button();
Called $('#radio-group').buttonset(); in document.ready and tried $('#radio-group').buttonset('refresh); when HTML changes
$('#radio-group').buttonset('refresh); by itself
Double checked all CSS and JS. (JQuery-UI .js and .css is included)
I'm about to try switching back to our old header and footer files (where more calls are made) to see if that fixes it but if anyone knows what is going on, any help / ideas / advice would be appreciated.
I can't seem to find anyone with a similar issue and I've been working in this for hours it's doing my head in. If you need anymore info let me know.
I have a table being built via the map function of JavaScript (ReactJS).
On the last column, I should be having buttons that are meant to open a popover that will (eventually) hold some information. This cell is being done like this:
<td>
<div>
<button className="btn btn-primary"
tabIndex="0"
role="button"
data-toggle="popover"
data-trigger="focus"
title="Details"
data-content="Testing, Testing">
<b>IN PIT</b>
</button>
</div>
</td>
So far, the said button appears, but no popover whatsoever. I'm not using npm or anything of the sorts since I'm not a front-end-designer myself, and that doesn't seem trivial to setup. I just want something "good enough" for testing purposes.
What am I missing?
Looking at your https://pastebin.com/KuRHjWxr. Popovers won't work, you have to implement them other way.
You initiate
$('[data-toggle="popover"]').popover();
$('[data-toggle="tooltip"]').tooltip(); when there are no buttons in DOM.
Call .popover() and .tooltip() after your buttons are successfully rendered to the DOM.
The names of your attributes imply that you are expecting bootstrap (an external library) to be loaded and attach to the element to provide functionality, is bootstrap included in a script tag on the page? Those attributes don't do anything themselves, they are just tags to attach actions to. Add a bootstrap cdn tag inside the bottom of the body tag to address.
I have a table in which column elements have text in them. I click a button and all the text elements become input elements. Based on a condition, there is a button displayed next to the input field.
What i have to do is display a button with an icon in the same column, next to the input field. I have done this, however the result is not as expected.
This is what I am getting.
This is what I am looking for.
<td id="id119ae">
<form class="mytemp" id="form19af" method="post" action="./Application"><div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden"><input type="hidden" name="form19af_hf_0" id="form19af_hf_0"></div>
<div style="padding:5px; border-width:0px;background-color: #ffffbb" id="editContainer19b0">
<button style="display:none;" data-toggle="modal" data-backdrop="static" class="btn btn-default btn-xs pull-right">
<span class="fa fa-bolt"></span>
</button>
<input value="Account test" name="editContainer:edit" id="edit1923">
</div>
</form>
This is the code that I currently have that gives me the first result. The layout is causing some problems. I need better layout suggestions or ways to fix this.
Use inputgroup classes to show the buttons adjacent to input type
http://getbootstrap.com/components/#input-groups-buttons
There is no unique solution for your request.
It depends on how you are designing? Are you considering the responsiveness? Are you using fixed width? or even are you using a library or framework like Bootstrap?
By the way, I think this one works for you:
use the percentage of width for your input and button.
For example:
<button style="display:none; width: 10%;" data-toggle="modal" data-backdrop="static" class="btn btn-default btn-xs pull-right">
<span class="fa fa-bolt"></span>
</button>
<input value="Account test" style="width:80%" name="editContainer:edit" id="edit1923">
What I did was set min-width for the table. The percentage did not help me since it was dynamic. For some reason it was not taking that into account when the new element was added and the button always came in the wrong place.
I set the min-width for that column to 250 px . I tried to set it to say 30% but that did not work either.
solution: use min-width in the header elements. that sets the entire table to follow the least width.
Using Bootstrap, Angular and ui-bootstrap I'm creating a bunch of radio buttons which look like normal buttons (working plunker here).
I now want to make the active button blue (.btn-primary) and the rest white (btn-default). I found some SO-answers which explain how to conditionally apply a class here. I tried implementing this technique like so (Plunker here):
<div class="btn-group">
<label class="btn" ng-class="{btn-primary: radioModel=='Left', btn-default: radioModel!='Left'}" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn" ng-class="{btn-primary: radioModel=='Middle', btn-default: radioModel!='Middle'}"ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn" ng-class="{btn-primary: radioModel=='Right', btn-default: radioModel!='Right'}"ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
Unfortunately it doesn't seem to work. Does anybody know how I can achieve the active button to be a btn-primary and the other ones being a btn-default? All tips are welcome!
You are missing quotes around css classes btn-primary and btn-default. You need quotes because there is a dash in the property of the object.
See edited plunker