I have a piece of Sightly/HTL code as follows -
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>${properties.tooltip_textfield}</p>
</div>
</div>
</div>
Please note that ${properties.tooltip_textfield} is hard coded into the code.
I am including this code in my component like this -
<div data-sly-include="/custom/tooltip-modal/tooltip-modal.html" data-sly-unwrap></div>
Now I want to pass a parameter to data-sly-include statement so that when my HTML code is rendered, the passed parameter should be placed in place of ${properties.tooltip_textfield} .
In other words -
Calling this
<div data-sly-include="/custom/tooltip-modal/tooltip-modal.html" parameter= "Dummy Text" data-sly-unwrap></div>
Should render this -
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Dummy Text</p>
</div>
</div>
</div>
Is this possible?
Thanks in Advance!
I believe what you're after is the Sightly Template and Call feature.
templates/tooltip.html:
<template data-sly-template.tooltip="${# text}" class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>${text}</p>
</div>
</div>
</template>
component.html:
<sly data-sly-use.tooltipTmpl="templates/tooltip.html"
data-sly-call="${tooltipTmpl.tooltip # text='Sample text'}" data-sly-unwrap>
</sly>
Related
I have a modal dialog in my ASP.NET Web application using the following code:
<div class="modal fade" id="mdlNewNote" tabindex="-1" aria-labelledby="mdlNewNoteLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mdlNewNoteLabel">Add New Note</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form class="was-validated" id="frmNote" name="frmNote" method="post">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="form-floating col-sm-12">
<textarea class="form-control" rows="10" id="NoteBody" name="NoteBody"></textarea>
<label for="NoteBody">Notes</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
In that block there is a <textarea> element that I want to be sized inside the modal according to its row count, which is set at 10. However, it only actually displays three rows in the modal, as shown below:
How do I fix it so that the <textarea> element is as tall as it should be (based on number of rows it is given) rather than the 3 rows it shows now?
With bootstrap, you have to override the height by using:
.specific-textarea { height: 100% !important; }
cf:
https://stackoverflow.com/a/58398265/12172974
Use HTML for textarea sizing.
<label for="story">Tell us your story:</label>
<textarea id="story" name="story"
rows="5" cols="33">
It was a dark and stormy night...
</textarea>
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
I am iterating ngFor in angular 6. When i am clicking on button a div should open beside row of that particular button but it is opening below ngFor like this
I want to make it open for that partcular row and below that.
<app-filter></app-filter>
<div class="bg-white" *ngFor="let data of dashboardData">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" (click)="openLayout=!openLayout">verify Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader"></div>
<div class="container" [hidden]="openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
Now it is coming like this
Desired behavior will be like this It's like accordian on click it should open below that row and rest of below rows will be shifted downwards
The problem resides into openLayout variable that is shared for all your rows.
You need one openLayout for each row. you can add it dinamically to your data like this:
<div class="bg-white" *ngFor="let data of dashboardData">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" (click)="data.openLayout=!data.openLayout">verify Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader"></div>
<div class="container" [hidden]="data.openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
At the beginning it will be false because undefined is like false.
I'm using bootstrap latest version 4.1.0. Bootstrap offset class isn't working properly in any screen size as expected. "Strange". Nothing changed. Please help me to get out of it. Here it is....
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-3">
<div class="cus_c">Content area</div>
</div>
<div class="col-md-3">
<div class="cus_c">Content area</div>
</div>
</div>
</div>
According to bootstrap 4, there is a change. Change col-md-offset-3 to offset-md-3.
if your trying to center the columns you can use justify-content-center class on the containing row
<div class="container">
<div class="row justify-content-center">
<div class="col-md-3">
<div class="cus_c">Content area</div>
</div>
<div class="col-md-3">
<div class="cus_c">Content area</div>
</div>
</div>
</div>
codepen
Bootstrap latest version: 4.1.0 there is a simple update.
Use this class offset-md-* instead of md-offset-*
Thank you.
I have added a code of accordion in my project. Till yesterday it was working fine today accordion is not working because there is space between id as shown in screen-capture from my project.
.
My code to show the accordion is:
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
#foreach($data as $from)
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading{{$from->id}}">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{$from->id}}" aria-expanded="true" aria-controls="collapse{{$from->id}}">
{{$from->from}}
</a>
</h4>
</div>
<div id="collapse{{$from->id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{$from->id}}">
<div class="panel-body">
{{$from->body}}
</div>
</div>
</div>
#endforeach
</div>
</div>
Is there any changes i can make, to get rid of this error?
EDIT:
Controller that passes all variable.
public function show(){
$data = Email::latest()->get();
return view('emails.display',compact('data'));
}
I'm not able to resize Jasny's Fileupload form. First I made a centered span8 with offset2. Then I put a simple input form into the span and set it to 'input-block-level'. That's working fine: the input form has now a size of span8.
I want to do the same with the Jasny's Fileupload. I tried a lot, but it didn't work for me. What I need, is a function that replaces the span3 entry in class="uneditable-input span3" with some kind of auto-resizing function, that stretches the input box to span8. Replacing span3 with input-block-level also doesn't work.
Another possibility would be a fixed value for the control button (maybe span3) and a for the input field (span5).
Any ideas?
<div class="row-fluid">
<div class="container pagination-centered">
<div class="span8 offset2" style="background-color:#FFCC33">
<form class="form" action="someaction" method="post" enctype="multipart/form-data" style="background-color:#FFFFFF">
<div class="control-group">
<div class="controls">
<input type="text" id="someid" name="somename" class="input-block-level" placeholder="well stretched box">
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" />
</span>
Remove
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>