I am trying to apply the resizable column for table by following the solution provided here.
http://platformevangelist.com/deep-dive-into-lightning-design-system-table-column-resizing/
Issue: When the column resize handle is dragged the first time its not working but works from the second drag.
Div tag :
<div class="slds-resizable">
<input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-602" tabindex="0" />
<span class="slds-resizable__handle" onmousedown="{!c.calculateWidth}" ondrag="{!c.setNewWidth}">
<span class="slds-resizable__divider"></span>
</span>
</div>
Do I need to add any flags to the events "mousedown" and "Drag".
This question is a little bit outdated, but I just spent an hour on this problem and found a solution, draggable="true" should be added to resizable span element.
<span class="slds-resizable__handle" onmousedown="{!c.calculateWidth}" ondrag="{!c.setNewWidth}" draggable="true">
Related
I'm using Bootstrap 5, and in many places I combine a label and an anchor link, and I style the anchor link as small and fig-caption so you get a light gray link that is about the same size as the label.
This works okay on my PC and iPad, but on my phone the link is much larger than the label text.
Why is that, what is better way to do this so remains consistent for all platforms
<div class="row g-2 mb-2">
<div class="col">
<span class="ps-2">
<label>
All tracks composed by
</label>
<span>
<a href="/composer.start?cid=0$=Composer$2682&title=Composers+%2F+Johann+Sebastian+Bach" class="small figure-caption">
Johann Sebastian Bach
</a>
</span>
</span>
</div>
</div>
Update:Actually I have analysed the problem further and it turns out the issue that I have a heading near the top of the page, and if the heading is longer than the width of the screen I get the issue.
e.g
<div class="row g-0">
<div class="col mx-2">
<h4>
Albums / Albinoni; Vivaldi; Cimarosa: Venetian Oboe Concertos (Flac)
</h4>
</div>
I don't get the issue if I use h6 instead of h4 even when text is still wider than screen but then the text is smaller than I would like
I don't get the issue if I don't wrap within bootstrap row and column, if I just do:
<h4>Albums / Albinoni; Vivaldi; Cimarosa: Venetian Oboe Concertos (Flac)</h4>
then it works, but then I have the issue that I dont have the same margin to the left
I am building a lightning web component that uses a combobox. It seems to be having its dropdown portion cut short by the bounds of its container.
I've tried adding height, z-index, overflow, and margin modifiers to the style sheet for the input element and its container, and the only thing that's had a visible effect is adding margin to the combobox's container, which just makes more space for the dropdown to show its contents but doesn't solve the problem.
Here is an excerpt of the html file:
<div class="slds-col slds-grid">
<!-- Complete Task -->
<div class="slds-grid slds-col slds-size_2-of-4 slds-p-right_small slds-truncate">
<div class="slds-col">
<div class="slds-border_bottom" style="background-color: #ecd4b566">Log a Call</div>
<div class="slds-grid_vertical slds-p-top_small">
<div class="slds-col">
<lightning-combobox
class="spencer_combobox"
variant="label-hidden"
placeholder="-- Call Result --"
options={callResults}
value={selectedResult}
required
onchange={handleResultSelection}>
</lightning-combobox>
</div>
<div class="slds-col">
<lightning-textarea maxlength=255 placeholder="Write comments here" onchange={handleComment} value={commentValue}></lightning-textarea>
</div>
<div class="slds-col">
<lightning-button class="slds-col" variant="Brand" label="Complete Task" onclick={handleCompleteTaskClick} disabled={buttonDisabled}></lightning-button>
</div>
</div>
</div>
</div>
I expected the dropdown to be visible on top of the other elements, but it ends up hidden or cut off.
Here is a screenshot; the dropdown menu isn't being cut off by the next element below it, it's actually getting cut off by its own bounds.
Figured it out.
I put slds-truncate in the class of the container, and that comes with overflow:hidden, so I was able to just remove the truncate or edit the style sheet to fix the problem.
I'm writing some automated tests on an AngularJS application. I'm trying to click a button but whatever method I try and use, Selenium refuses to find the element.
<div class="row" _ngcontent-c24="">
<div class="column-12 column-center" _ngcontent-c24="">
<div class="buttons column-center" _ngcontent-c24="">
<div class="buttons-container-centred tablet-up" _ngcontent-c35="">
<div _ngcontent-c35="">
<kf-button _ngcontent-c35="" btnstyle="secondary no-outline btn-big" _nghost-c8="">
<button class="secondary no-outline btn-big" _ngcontent-c8="" title="" type="">
<span _ngcontent-c8="">Use a demo room</span>
</button>
</kf-button>
<span _ngcontent-c35="">Instant access</span>
</div>
This is html around the button - button text is "Use a demo room"
I've tried:
element(by.xpath(" full path from FirePath ").click()
element(by. buttonText("Use a demo room").click()
element(by.xpath('//span[#ngcontent("Use a demo room"]')).click
...to mention a few.
Usual error message stating the element cannot be found once the timeout is reached.
Other similar buttons work fine with a full xpath.
Would be really grateful for advice!
Thanks
David
I'm using ngFx for my animations in an angular app (and new to the world of angular)
ngFX is great - seems very easy to use, but I want to improve how it deals with resizing the containing element.
Easy to see below, upon removal of the image the containing div instantly resizes - I want that to be smooth, i.e. it takes 1 sec to resize instead of that instant jump.
Not sure where to start fixing this issue.
Thanks
<div class="well well-lg">
<h1 style="margin-bottom: 20px">NG SHOW</h1>
<button style="margin-bottom: 20px" type="button" class="btn btn-primary btn-sm" ng-click="showdog = !showdog">TOGGLE</button>
<br>
<img class="fx-fade-up-big" ng-show="showdog" src="http://vignette4.wikia.nocookie.net/simpsons/images/7/77/200px-SantasLittleHelper.png/revision/20090712224020" >
</div>
The way accordion is built is one accordion below another
I want to be able to make them side by side.
I have a button that will open/close everyone at once.
I tried adding a span above the accordion-group but it didn't help.
<div id="top-panel" style="height:auto;border-bottom-style: outset;">
<accordion close-others="false">
<span ng-repeat="widget in _widgets">
<accordion-group id="widgetsAccordion" heading="{{widget.name}}" is-open="widget.isOpen">
moo
<button ng-click="getPreviewContent('{{widget.postId}}')">{{widget.name}}</button>
</accordion-group>
</span>
</accordion>
</div>
<div id="bottom-panel">
<div id="feed-panel" style="height:580px;width:1075px; float: left;border-right-style:outset;">
<button class="btn btn-primary" ng-click="toggleCollapse()">collapse</button>
</div>
<div id="preview-panel" style='float:right; width:570px;'>
<ng-include src="htmlInclude" />
</div>
</div>
How can I achieve this?
[edit]:
I realize I might not have explained this correctly.
I want the accordions to be VERTICAL, but just for them to be located side-by-side
[solution]:
Well the solution was pretty simple, just added style="display:inline-block" to the accordion-group. cheers
Well the solution was pretty simple, just added
style="display:inline-block" to the accordion-group.
cheers
I have come across a plugin called zAccordian.
http://www.armagost.com/zaccordion/
It is a horizontal accrodian, i think this should suffice for your needs.
If you would like to have that all tabs open with one click, there is a start parameter that can be passed through. Not sure how familiar you are with JQuery but this should do the trick.
Regards,
Warren