I m tried to click #onclick="#Toggle" and hide current div and then show the new div , but its not worked for me
here the issue
#my current div is not hide and new div section not showing there
any one know the solution
thanks
code here
<div class="sh-agreement-tp" style="background-color: #fff; padding: 20px;">
#* AgreementTemplate section one *#
<Row Gutter="(24, 24)">
<Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6"><a #onclick="#Toggle" >
<Card class="sh-agreement-tm" Bordered="false">
<Body>
<div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry One</p></div>
</Body>
</Card>
</a>
</Col>
<Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6">
<Card class="sh-agreement-tm" Bordered="false">
<Body>
<div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry Two</p></div>
</Body>
</Card>
</Col>
<Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6">
<Card class="sh-agreement-tm" Bordered="false">
<Body>
<div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry Three</p></div>
</Body>
</Card>
</Col>
<Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6">
<Card class="sh-agreement-tm" Bordered="false">
<Body>
<div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry Four</p></div>
</Body>
</Card>
</Col>
</Row>
<div><p hidden="#(!HideLabel)">New section here </p></div>
</div>
#* END of AgreementTemplate section one *#
#code {
private bool HideLabel {get;set;} = false;
private void Toggle()
{
HideLabel = !HideLabel;
}
}
This code works well:
<div hidden="#showPanel2">Panel 1</div>
<div hidden="#(!showPanel2)">Panel 2</div>
<button class="btn btn-primary" #onclick="Toggle">Click me</button>
#code
{
bool showPanel2 = false;
void Toggle() { showPanel2 = !showPanel2; }
}
So I suspect that your Toggle() never gets called.
Try to debug that.
You are doing it a wrong way, you can hide any div or paragraph like this
To hide div
<div style="visibility: #(HideLabel ? "hidden" : "visible")"><p>New section here </p></div>
To hide paragraph
<div><p style="visibility: #(HideLabel ? "hidden" : "visible")">New section here </p></div>
Related
In my project I want to show images when I click the button. How I can configure the method openModal() on (click) to do this?
The IMG are taken from assets directory, and change based on your code (B1, B2) choice.
<!-- OPERATION -->
<div class="card my-5">
<div class="card-header" style="text-align: center; font-size: 20px;">
<p><strong>Operation</strong></p>
</div>
<div class="card-body">
<form>
<div class="form-group">
<tr *ngFor="let arr of varOperation; index as i">
<td>
Code: {{arr.operation.code}}
- {{arr.operation.description}}
</td>
<button style="margin-left: 20px; float: right;" class="btn btn-primary" (click)="viewCodeOperation(arr.operation.code)" (click)="openModal()">
Go
</button>
</tr>
</div>
</form>
</div>
</div>
<!-- IMAGES -->
<div class="overflow-auto">
<div *ngIf="imgB1">
<img src="assets\images\B1.jpg">
</div>
<div *ngIf="imgB2">
<img src="assets\images\B2.jpg">
</div>
</div>
viewCodeOperation(code: string) {
this.imgB1 = false
this.imgB2 = false
console.log(code)
if(code == "B1"){
this.imgB1 = true
}
else if(code == "B2"){
this.imgB2 = true
}
}
openModal() {
}
You can try using a library like this https://github.com/maximelafarie/ngx-smart-modal one to set up modals in angular.
I have a main element which is divided into a grid of 3 columns.
in the middle column I am displaying some listings.
each listing is a div element and has a react bootstrap card inside it.
I am trying to get the card to span 100% of the parent but that doesn't seem to be working for me.
React component
<div className="backfill">
<Row key={Listing_Id}>
<Card style={{ cursor: 'pointer' }} border="light" className="text-center fullCard" >
<Card.Body>
<Card.Title className="Title">
{Listing_Name}
<hr />
<Button className="Button" variant="outline-success" onClick={() => props.handleLikeDisLike(Listing_Id, 'Listing_Likes', Listing_Location)}> <Twemoji options={options} text=":+1:" /></Button>
<Badge className="Badge" variant="light">{Listing_Likes}</Badge>
<Button className="Button" variant="outline-danger" onClick={() => props.handleLikeDisLike(Listing_Id, 'Listing_DisLikes', Listing_Location)}><Twemoji options={options} text=":-1:" /></Button>
<Badge className="Badge" variant="light">{Listing_DisLikes}</Badge>
<hr />
<Button className="Button" variant="outline-info" ><Twemoji text=":pushpin:" /></Button>
<Badge className="Badge" variant="light">{Listing_Location}</Badge>
</Card.Title>
<Card.Text className="Listing" onClick={() => handleClick(Listing_Id)} >
<hr />
{ListingBody}
<ModalLayout
Listing_Location={Listing_Location}
Listing_Likes={Listing_Likes}
Listing_DisLikes={Listing_DisLikes}
Listing_Name={Listing_Name}
Listing_Id={Listing_Id}
handleLikeDisLike={props.handleLikeDisLike}
handleClose={closeModal}
show={showModal} />
</Card.Text>
</Card.Body>
</Card>
</Row>
<br />
</div >
CSS for div and Card elements
.backfill {
background-color: aqua;
}
.fullCard {
width:'100%';
}
I currently end up with the UI looking like this. Please can you help me sort this out. I want to get the card to be 100% of its parent div.
Just had to remove the single quotes from the CSS
.fullCard {
width:'100%';
}
had to become
.fullCard {
width:100%;
}
How can I move the green text from the image attached under the image icon?
I need to move it just under the image. I am using ReactJS and HTML. The text appears when a therapist has paid for their account.
<Link to={`/therapist/profile/${this.therapist.id}`} target="_blank" onClick={this.props.handleViewProfileGuest.bind(this, this.props.therapist.id)}>
<li key={this.props.index} className="tc-list-item">
{/* Avatar Container */}
<div className="tc-image-container">
<img src={this.getAvatarUrl(this.therapist)} alt='therapist-avatar' />
</div>
{/* User Profile Container */}
<div className="tc-info-container">
{/* Name & Title */}
<div className="tc-main-info">
<span className="tc-u-name">{`${this.therapist.firstName} ${this.therapist.lastName}, `}</span>
<span className="tc-u-title"> { ` ${this.therapist.title || 'Therapist'}` }</span>
</div>
<div className="flags-row">
{this.renderVerifiedFlag()}
{this.renderInsuranceFlag()}
</div>
{/* Details */}
<div className="tc-details-info">
{/* Email */}
<div className="tr-reviews-row">
<Rating placeholderRating={this.therapist.avgScore || 0}
emptySymbol={<img src={ratingStarEmpty} className="icon" alt="ratingEmpty"/> }
placeholderSymbol={<img src={ratingStarFull} className="icon" alt="ratingFull" />}
readonly/>
<span className="tr-reviews-value">{ `(${this.therapist.reviewCnt} reviews)` }</span>
</div>
{/* Phone */}
{this.renderContactInfo()}
</div>
</div>
<ReactTooltip type="info" place="right"/>
</li>
</Link>
and here is the css part
& .tc-image-container {
width: 130px;
height: 130px;
border-radius: 15px;
overflow: hidden;
}
& .tc-image-container img {
width: 100%;
height: 100%;
}
& .tc-info-container {
//margin-left: 140px;
flex: 1;
padding-left: 50px;
}
If I'm understanding your question correctly, its very simple... just move the div to the correct location in your html.
<Link to={`/therapist/profile/${this.therapist.id}`} target="_blank" onClick={this.props.handleViewProfileGuest.bind(this, this.props.therapist.id)}>
<li key={this.props.index} className="tc-list-item">
{/* Avatar Container */}
<div className="tc-image-container">
<img src={this.getAvatarUrl(this.therapist)} alt='therapist-avatar' />
</div>
<!-- Moved it to here -- >
<div className="flags-row">
{this.renderVerifiedFlag()}
{this.renderInsuranceFlag()}
</div>
{/* User Profile Container */}
<div className="tc-info-container">
{/* Name & Title */}
<div className="tc-main-info">
<span className="tc-u-name">{`${this.therapist.firstName} ${this.therapist.lastName}, `}</span>
<span className="tc-u-title"> { ` ${this.therapist.title || 'Therapist'}` }</span>
</div>
<!-- text was here -->
{/* Details */}
<div className="tc-details-info">
{/* Email */}
<div className="tr-reviews-row">
<Rating placeholderRating={this.therapist.avgScore || 0}
emptySymbol={<img src={ratingStarEmpty} className="icon" alt="ratingEmpty"/> }
placeholderSymbol={<img src={ratingStarFull} className="icon" alt="ratingFull" />}
readonly/>
<span className="tr-reviews-value">{ `(${this.therapist.reviewCnt} reviews)` }</span>
</div>
{/* Phone */}
{this.renderContactInfo()}
</div>
</div>
<ReactTooltip type="info" place="right"/>
</li>
Try moving the flag row to the left column:
// Add a new div with the class name "left-col"
<div className="left-col">
<div className="tc-image-container">
<img src={this.getAvatarUrl(this.therapist)} alt="therapist-avatar" />
</div>
// Move the flags-row div from its original place to here
<div className="flags-row">
{this.renderVerifiedFlag()}
{this.renderInsuranceFlag()}
</div>
</div>
<div className="tc-info-container">
...the rest of your DOM remains unchanged
</div>
// Give .left-col div the same width as the current image-container.
& .left-col {
width: 130px;
}
You might need to fiddle with the CSS a bit. But the general idea is here.
Moving the verified provider text code directly under the img code will do the trick.
Might just have to adjust bottom margin for the img for spacing.
I used React and React-Bootstrap to build a website. I want to create a box with border inside a modal. This is my code.
.JSX file
<Modal.Header closeButton>
<Modal.Title>Preview</Modal.Title>
</Modal.Header>
<Modal.Body>
<Col md={6}>
<div className="previewCard">
<Col md={3}></Col>
<Col md={7}>
<p className="topicTH">Line1</p>
<p className="topicTH">Line2</p>
<p className="topicTH">Line3</p>
<p className="topicTH">Line4</p>
<p className="topicTH">Line5</p>
</Col>
<Col md={2}></Col>
</div>
</Col>
</Modal.Body>
<Modal.Footer></Modal.Footer>
.CSS file
div.previewCard{
border-style: dashed;
}
As you can see, there is noting inside the box even it put elements inside <div className="previewCard"></div>. How do I resolve this?
Instead of div use Row:
<Row className="previewCard">
I am making one android app with help of phonegap.I need help how i can hide the image or show the image when i wanted
when my toggleswitch is off then my image which is in third page should hide if my toggleswitch is on then it will show the image
plz help me out how i can do
In HTML5:-
<div data-role="page" id="page1">
<div data-role="content">
<select name="toggleswitch1" id="toggleswitch1" data-theme="" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<a data-role="button" id="button1" data-inline="true" href="#" onclick="clickfn();">Button</a>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<p>some text</p><p>some text</p>
<a data-role="button" id="button2" data-inline="true" href="#page3" >Button</a>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<p>some text</p><p>some text</p>
<img src="xyz image" />
<a data-role="button" id="button3" data-inline="true" href="#page1" >Button</a>
</div>
in jquery:-
$(document).unbind('pageinit').bind('pageinit', function () {
clickfn();
});
function clickfn(){
$('#button1').click(function(){
if($("#toggleswitch1 option:selected").val() == 'off'){
$.mobile.changePage("#page2");
}else{
$.mobile.changePage("#page2");
}
});
}
there is property called .hide and .show where you can show or hide the images.
Let us say the id of your image is img, then
$('#button).click(function(){
if($("#toggleswitch1 option:selected").val() == 'off'){
$("#img").hide ();
}else{
$("#img").show ();
}
Add a id in your img
<img id="myimg" src="xyz image" />
And swicth the visibility in code
function clickfn(){
$('#button1').click(function(){
if($("#toggleswitch1 option:selected").val() == 'off'){
$("#myimg").hide ();
}else{
$("#myimg").show ();
}
});
}