I'm making a little quiz in ionic and im dynamically creating the boxes using n-g repeat for the answers. Ive bee trying for hours but it either works well on ipad but aweful on iphone or the other way round. Here is how it looks on my phone :
and here on my ipad
All im trying to do is have an object with an answer so for example "over the mood" and dynamically create the boxes that corespond with the answer so for this example [][][][] [][][] [][][][]..
I am using ng-repeat to do what i have in my example :
<form>
<span ng-repeat="content in answerArr track by $index" class="single-input"><span style="margin-right:10px;"></span><!--this adds space -->
<div class="testingg" style="width:50%;margin-right:auto;">
<div style="width:50%;margin-right:auto;margin-left:auto;">
<span class="single-input" ng-repeat="contentt in content track by $index">
<div class="row"style="">
<span ng-if="$index < content.length">
<div class="box single-number" style="">
<input type="text" class="" focus maxlength="1">
</div>
</span>
</div>
</div>
</span>
</div>
</span>
</form>
is there a better way to do this or am i missing something obvious? im trying to achieve the sort of centered css where if the word overlaps then it goes to the next line .. something like the below
althought they use __ and i am using a box. can anyone help?
Well, you can Set particular length for your each rows .And Using answer's length create substrings of tho and push them into any object.Like if your row's length is 5 and your answer is "over the mood" . You have to create 3 substrings
and push them into object . Now implement an nested ng-repeat, first with
that object containing substring and then inside that with substring itself
Hope It will help you :)
Related
I arranged the checkboxes and the text right next to each other using bootstrap grid. But, when I click on the textbox other than the first one, only the first checkbox gets enabled. How do I make the respective checkboxes get enabled without distorting the order?
Here is my stackblitz url
The stackblitz is not working properly but one thing you can try is making the id of the checkboxes unique like
component-
public routes=[{"id":1, "place":"Chennai - 500085/Madhapur, TS"}, {"id":2,
"place":"chennai-mumbai"}, {"id":3, "place":"chennai-madhapur"}, {"id":4,
"place":"chennai-secundrabad"}];
html-
<div class="col-sm-1" style="margin-top: 10px;">
<mat-checkbox class="check-style" id="route.id"></mat-checkbox>
</div>
<div class="col-sm-10">
<div class="routesList">
{{route.place}}
</div>
</div>
I hope it helps.
I am creating a mobile application using HTML, Cordova, Aurelia, and Bootstrap. The application has the ability to upload images and create a row of thumbnails. Being that this is a first time using Aurelia for me, the challenge is that I need a row to consist of only 4 images. I need to have the application create a new row of images after the current row reaches it's fourth image. I searched the web for solutions but didn't really find anything to suit my needs other than I might need to incorporate a value converter somehow. Does anyone know how I would go about accomplishing this task? Any assistance would be greatly appreciated. I have included my original code below, which is pretty much the code I had before knowing that I would have to dynamically create additional rows.
<div class="row">
<div class="col-sm-3" repeat.for="image of images">
<div class="thumbnail">
<img src.bind="image | blobToUrl" />
<div class="caption text-center">
<button type="button" class="btn btn-default" click.trigger="setCoverPhoto($index)" data-toggle="tooltip" title="Use as cover">Set Cover</button>
<button type="button" class="btn btn-default" click.trigger="removeAttachment($index)" data-toggle="tooltip" title="Remove photo">Remove</button>
</div>
</div>
</div>
</div>
Thanks for your help!!!!!
Ashley's answer is correct in this scenario.
Sometimes however it may be necessary to render a list with a wrapping element that contains x amount of items from this list.
You can solve this by grouping the list and iterating twice. Once on the grouped list and inside this loop another loop on the children lists.
You shouldn't pollute your VM with this grouped list if it's for UI purposes only, so it belongs in a converter. Example : https://gist.run/?id=9d624d96d86c7e0ad1c0919fd5fb8819
I put your code in a gist here: https://gist.run/?id=fb3631fe09d44395fd352c29e145c4a0
It looks fine to me as is.
Bootstrap is responsive, so you can't "lock" to 4 images per row, per se. It will go to one image per row below a certain screen width.
You can play with the dimensions in the images array in app.js to see how bootstrap will handle different things.
I hope someone can help me with these two problems.
They are part of the same work but different from each other.
I am using angularjs to filter through a list that is quiete big (more than 1000 elements) but it's very slow. I was wondering if there's a way to optimize this.
Here's the code
<div class="test">
<table class="table table-hover" >
<tbody>
<tr ng-repeat="test in tests| filter:query">
<td>
<div id="delete">D<br />E<br />L<br /></div>
<div id="edit">E<br />D<br />I<br />T</div>
<p ng-show="test.id">ID:<b>{{test.id}}</b></p>
<span ng-repeat="name in test.names" ng-show="test.names">Company: <b>{{name}}</b></span>
<span ng-repeat="age in test.ages" ng-show="test.ages">Country: <b>{{age}}</b></span>
<span ng-repeat="course in test.courses" ng-show="test.courses">Found: <b>{{course}}</b></span>
<span id="output" ng-show="test.out1">Then: <b>{{test.out1}}{{test.out2}}{{test.out3}}{{test.out4}}</b></span>
</td>
</tr>
</tbody>
</table>
</div>
The second question is regarding "tabset" in html
I have 3 tabs and in one tab I have an edit link on each item, I want the third tab to come up when I click on the edit link of the first tab.
I searched online and understand that some js or jquery is needed but nothing has worked so far.
thank you in advance
If you are handling such a big set of data you should use a pagination system.
Also I won't attach the entire 1k object to the scope and and use a filter in the ng-repeat but instead add just a chunk of data like 50 to the scope and every time you change the page you would change the $scope.tests with the next/previous 50 items from your 1k.
One more point, if you are using a lot of interpolation {{}} but not each of them needs a separate watcher you should consider using angular's "bindonce".
I am using bootstrap (Twitter-Bootstrap 3) in a quiz style application and I use bootstrap buttons for the answers of the quiz. My problem is that sometimes the answers are quite long, and instead of wrapping the text to the width of the col that the buttons are placed in, the text just keeps going in one line and goes over the col and the width. Is there an easy way to fix this (Note that I canot define set widths as the length of the answers change)? Showing the code is a bit difficult, as it uses javascript to populate the answer buttons, but I will show a screen shot and the resulted populated HTML (after the javascript has populated the question and answers):
Here is the resulting HTML:
<div class="row">
<div style="float: none; margin: 0 auto;" class="col-sm-7">
<div class="panel panel-default">
<div class="panel-heading">Quiz 4 - This is the quiz 4 description</div>
<div class="panel-body" id="question" style="display: block;"><font color="#AAAAAA"><strong>Code: </strong>80559</font><br><br><font color="#888888"><strong>Instruction: </strong>Based on the provided correct answer, select the answer choice that correctly gives the required evidence from the text. Once the timer runs down you will be forced to move onto the next question.</font><br><br><div class="alert alert-info"><strong>Question: </strong>express a negative sentiment in humorous terms</div></div>
<div class="panel-footer clearfix">
<div class="row">
<div class="col-sm-1" id="submit"></div>
<div class="col-sm-11" id="answers" style="display: block;"><button onclick="submitAnswer(22)" class="btn btn-default btn-sm">negative sentiment: You couldn't pay me to watch that....that's how I feel / humorous terms: beach reading without the beach, airport reading without the airport...</button><br><br><button onclick="submitAnswer(23)" class="btn btn-default btn-sm">negative sentiment: they are just the wrong amount of time / humorous terms: they don't have the compressed energy of a short story</button><br><br></div>
</div>
</div>
</div>
</div>
I would think that bootstrap should be wrapping the button text within the div automatically, but it doesn't. I have been looking for solutions but I haven't been able to find anything that covers this problem particularly. Any help would be appreciated. I don't want to use <a href='#" ...> because it is important that the page not reload or be redirected when the button is pressed. Only the onclick function submitAnwers() should be called with no redirect.
The btn class in Bootstrap 3 contains 'white-space:no-wrap;', so the buttons will not wrap on mutliple lines. You can change this using a simple CSS override like:
.btn {
white-space: normal;
}
Demo: http://www.bootply.com/90082
This is an old question with an old answer. The answer solves the problem, but you can get ugly word breaks, where the button breaks in the middle of a word, seemingly wherever it wants to.
My answer forces the button to wrap between words, providing for a nice, clean, and responsive button.
.btn-responsive {
white-space: normal !important;
word-wrap: break-word;
}
Click Here
Hope it helps someone in the future.
I'm using context to print blocks into a region. However, I'd like to have the region print wrapper DIVs around the blocks of the given area. I know this is possible with region.tpl.php in Drupal 7. I can't seem to figure out the best way in Drupal 6.
<div class="{region classes i.e. sidebarleft}">
<div class="{block 1}"></div>
<div class="{block 2}"></div>
<div class="{block 3}"></div>
<div class="{block 4}"></div>
</div>
However, currently it prints like this:
<a id="context-block-region-right" class="context-block-region">Right Sidebar</a>
// the previous anchor tags is hidden
<div id="block-block-82" class="clear-block block block-block">
<h2>Community Navigation Block</h2>
<div class="content">
<div id="community-landing-navigation-menu">
<div class="joinCommunityBox">
<div class="community-landing-pagePanelWrapperSideBar">
<div class="community-landing-pagePanelWrapperSideBar">
<a id="context-block-block-82" class="context-block editable edit-community_contexts"></a>
</div>
</div>
I wish it would print a region wrapper tag around ALL of that...
Also, I want to keep my page.tpl.php clean of extra wrapper tags. It would be better if we could preprocess regions to print a wrapper tag.
I figured it out... The answer is actually borrowed from zen. If you click the link below, several 'preprocess functions' are rendering a new region template. Then, blocks are collected into that region, and printed.
http://www.drupal.org/node/223440#comment-5304866
It works great, and is going to go production soon.