I'm working on a project using React and Bootstrap. I have one big bar graph and 2 little boxes that all need to sit horizontally together.
Here's how it should work.. expand the pen window to see them sit horizontally together (the correct way):
https://codesandbox.io/s/lO9rvrBYM
However I need some conditional rendering logic in there in case there is no data and I don't want to display the big bar graph. Check that out here:
https://codesandbox.io/s/ELLzLo3g
In the example with conditional rendering it can no longer properly position the elements. They sit permanently on top of one another.
I think it has to do with line 69. I need to render that graph with one less closing </div> to keep the horizontal layout in tact, but that throws a syntax error.
Anyone great at Bootstrap have any tips to solve this?
First of all, your question & samples are not that clear on what you want to achieve, so my answer might be missing the point :)
You basically want a 2 column layout mixed with a conditionnal display for the first column.
The column display will be handled fully by bootstrap (and you actually messed up a lot with your columns here), the conditionnal display should be managed through your component state.
First your layout should look like somthing like that :
<div className='row'>
<div className='col-sm-7'>
<div> [your chart here] </div>
</div>
<div className='col-sm-5'>
<div> [your first block here] </div>
<div> [your second block here] </div>
</div>
</div>
Then you need a boolean value inside your component state that will decide whether or not the chart should be displayed. Lets assume you store this information in this.state.showChart
<div className='row'>
{this.state.showChart ?
<div className='col-sm-7'>
<div> [your chart here] </div>
</div>
: '' }
<div className='col-sm-5'>
<div> [your first block here] </div>
<div> [your second block here] </div>
</div>
</div>
If this is insuffisant, try to improve your explanations a bit and I can work on your sandbox samples directly :)
Related
I'm working with a third-party code and I'm quite limited in terms of filtering a list of elements.
Each of these elements has this structure:
<div class="item-preview">
<div class="item-info">
<div class="tag">
<svg class="tag-public"></svg>
</div>
</div>
</div>
The only thing that changes is the svg class, so it's whether tag-public or tag-private. Depending on the user type that's checking the content, I'd like to hide it when it's tag-private. I've tried this:
$('.tag-private').closest('.item-preview').hide();
And this:
$('.tag-private').parents('.item-preview').hide();
But any of them works. The code uses React and the items are brought by JSON/AJAX, so I guess the problem is related to trying to modify the page once is loaded...
Any thoughts on how to make my JS "override" the original code? Thanks a ton.
In
https://codesandbox.io/s/vskdf
I have a template that is not rendered inside of my vuedraggable. Any ideas why?
InventorySectionGroup.vue:
<template>
<!-- this div renders -->
<div class="inventory-section-group">
<p>{{ itemSectionGroupProps.itemSectionCategoryName }}</p>
<div
v-for="group in itemSectionGroupProps.itemSectionCategoryItemList"
:key="group.itemSectionCategoryId"
>
<inventory-section-group-item :itemDataProps="group">
</inventory-section-group-item>
</div>
<!-- div doesn't render :-(
<draggable v-model="itemSectionGroupProps.itemSectionCategoryItemList">
<transition-group>
<div
v-for="group in itemSectionGroupProps.itemSectionCategoryItemList"
:key="group.itemSectionCategoryId"
>
<inventory-section-group-item :itemDataProps="group">
</inventory-section-group-item>
</div>
</transition-group>
</draggable> -->
</div>
</template>
Fixed errors related to comp. init:
https://codesandbox.io/s/y2cur?file=/src/components/InventorySectionDraggable.vue
Nested dnd can be replicated like:
https://codesandbox.io/s/priceless-perlman-n6psw?file=/src/components/MyContainer.vue
You have several errors in your code (browser console + ESlint), try fixing them, this will highlight several issues that may be blocking at some point.
As for your current issue, you do have some duplicated code: the block that is rendered and the one that is not. This is coming from the fact that the :key needs to be unique. Since your code is the same on the 2 blocks, the key is duplicated and only one is rendered I guess.
If you take the second block with it's
<div :key="group.itemSectionCategoryId">
And update it to some naive unique key like this
<div :key="`${group.itemSectionCategoryId + 1}`">
This will render the 2 blocks as expected I guess.
Here is the end result.
I've decided to go with nested draggable (build satellite data related to inventory groups and items):
https://codesandbox.io/s/x8ur4?file=/src/components/InventorySectionDraggable.vue
I still need to wrap the props around components.
Done:
https://codesandbox.io/s/rmh2n
I need to print invoice with unknown number of items, and at the end of the invoice there is terms and conditions that is also - unknown number of lines.
So i have something similar to this:
<body>
<div class="page">
<div class="marginTop"></div>
<div class="invoicecontent"></div>
</div>
<div class="page">
<div class="marginTop"></div>
<div class="invoicecontent"></div>
</div>
<div class="page">
<div class="marginTop"></div>
<div class="invoicecontent"></div>
<div class="termsAndConditions"></div>
</div>
</body>
So now the page has a background image, that contains the identity of the company, and at the top there is logo. In the div of marginTop I am skipping number of lines so there is nothing to be printed their.
So in invoice content I always have it in the right place.
Now the terms and conditions comes as a variable that holds a text of html, the user will type it and i will read it and show it here.
What I want, that if the customer entered long term and conditions I want to break it into pages. But the thing is I cannot break it because i don't know where to break exactly, as it can be any thing especially if it contains html code. And I want when it got printed out the top margin should be always their.
Can anyone give me any clues?
I can only use simple JavaScript, I cannot use jQuery, and I cannot get the height of the content after page load, any JavaScript should be used while rendering. I have tried to do that but it did not work.
I am using Angular 1.4.7 and need to do the following
<div ng-if="varIsTrue">
<div ng-if="!(varIsTrue)" my-custom-directive>
A lot of content
</div>
So basically, if the div is set only the proper div shows up. I tried do a few variations of this with ng-if and ng-show but I believe because how the browser renders the dom it is messing it up with the multiple divs, but that is the concept I am going for. Does anyone know how I can accomplish this?
You cannot do this you should have 2 closing tags
<div ng-if="varIsTrue">
</div>
<div ng-if="!(varIsTrue)" my-custom-directive>
A lot of content
</div>
or you will have to switch in my-custom-directive
I intend to create multiple expand/collapse button at the bottom of each article that I display in a stream using AngularJS.
This is what my page structure looks like:
<h1>Heading of the Page</h1>
<div class="item-content-wrapper">
<div class="item-content-block">
<article id="item-content" class="item-content">Some very long text goes here.
</article>
</div>
<div class="action-bar-wrapper">
<div class="action-bar">
<div class="action-button">
<icon name="expand">E</icon>
</div>
<div class="action-button">
<icon name="share">S</icon>
</div>
</div>
</div>
I have multiple item-content-blocks and I want to expand and collapse each block using AngularJS (Please DO NOT use jQuery anywhere).
Since there will be multiple blocks, with same Class names and everything, a scalable code will be needed.
I am just beginning with AngularJS, so any help will be appreciated. Thanks!
Since there will be multiple blocks, with same Class names and everything, a scalable code will be needed.
you essentially should have each block driven off an item in your view model. Just an an expanded (boolean) option to each item. Then you can drive css classes off of it using ngClass.
More
https://docs.angularjs.org/api/ng/directive/ngClass