Is it possible in angular with primeNg v 4.3.0 and Angular 5 to resize 2 layouts in the same screen like the windows 10 explorer in the picture below ? Or is possible with pure css ?
If no, why ? And if yes, how is that possible? I tried anything ...
Thank you very much for your answers !!!!!!!
<div class="ui-g">
<div class="ui-g-2 ui-g-nopad">
<p-panel>.... </p-panel>
</div>
// wanna put here a vertical line and pull right left, so the 2 panels gonna be resized ...
<div class="ui-g-10 ui-g-nopad">
<p-panel>.... </p-panel>
</div>
</div>
Related
I wanna add a simple text box to side of my page.
I have a table. So when the widget has added the table has to be decrease it's width.
Thanks in advance!
.
Probably you need to create a layout (https://getbootstrap.com/docs/5.2/forms/layout/) with properly setup grid system and have a place for your widget. So checkout the layout and grid system in bootsrap first to understand.
<div class="row">
<div class="col">
Your table
</div>
<div class="col">
Widget here
</div>
</div>
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 :)
I am new to angularjs and I want create one Page in which I want to add 2 ui-grid with one button called "other-grid" first time it must Load 1st grid and when we click again then 1st grid must replace with 2nd grid But some Problems are there I want to use ng-show and ng-hide it works for first grid but not loading 2nd grid Properly Why So and Any Solution Please..
You are probably better off using ng-if when dealing with ui-grid.
As for ng-show, it does weird things when rendering ui-grids (refer to: https://github.com/angular-ui/ui-grid/issues/4559)
Here is plunker of 2 grids with a toogle button:
http://plnkr.co/edit/IGF6X7SqtFdFSk8jiory?p=preview
<button ng-click="toggleuigrid()">toggle grid</button>
<div class="row">
<div class="span4" ng-if="show">
<div id="grid1" ui-grid="gridOptions1" class="grid" ></div>
</div>
<div class="span4" ng-if="!show">
<div id="grid2" ui-grid="gridOptions2" class="grid" ></div>
</div>
</div>
Make sure you give the 'other' hidden grid proper height and width so that the framework knows the grid dimensions
You can try using ng-if, ng-show, ng-hide and make the other grid visible when you click on the button - 'other grid'
Here is the official UI grid tutorial which does something similar to what you want
I'm trying to use Bootstrap 3.0 as a template to create a website. The issue I'm having is that when you refresh the page all of the text disappears. It does not do it every time but 8/10 times it does. Here is the demo I have put on my website for you guys to check it out. http://dwayned.co/JSwebsite/
Please let me know if you have any questions or need to see any code.
Your HTML is quite messed up. Bootstrap structure should be like this...
<div class="container">
<div class="row">
<div class="col-xs-12">
YOUR CONTENT HERE
</div>
</div>
</div>
In the above example I've used one col-xs-12 class but you can use any combination of cols here as long as they add up to 12. See more on the Bootstrap grid system here in their docs: http://getbootstrap.com/css/#grid
I also notice in your code you are using a span12 class but this is from Bootstrap v2 and not the new v3 which uses the col classes I've outlined in my example above.
I found this existing thread that has a couple different answers referring to your issue. https://stackoverflow.com/questions/21984543/google-chrome-bug-website-not-displaying-text
my website
http://whoisdomains.co.uk/
is using twitter bootstrap
http://twitter.github.com/bootstrap/index.html
I am attemptimg to use the two column layout
http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
The code they give is
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
I however swop the 8 and the 4 around, but dont see why this should make a difference. AS you can see frommy website i have put some dummy text in but its broken and overlaps
You have 2 very long words in spans so they can't be wrapped. Put some space characters into the words and it will be aligned, something like that:
<div class="span8">dskjdskjdskjlsdjlsdj ldjslkd sjkldsjklsdjlsdkjskldj ldksjldskjklsdjl dkjdlsjsdkjkladmdklmc kldmslkcmdlasmkmlkdjslkaj dlkjdsakjsdljlk sjljds</div>
<div class="span4">dkjsasdjsdhakhfl kjhdlkah fklhskldfha skjdhfk hsdklhfkjsdh ajklhfjklshadl kfhsjkadhfkjlh dsfjlhjaksdhfjk hjhdsajlkhdfljhasd ljhflkdhlkfhlkhdskfd</div>
If you check the page using console like firebug you'll see that width of the span divs is correct.