So I'm making a website (suprise, suprise) and I have a button on the top of the page, and when I click it, it does nothing. I am wondering how to fix it.
The button
<button class="Learn-Link" href="#VideoSlide">Learn How
<div class="Learn-Triangle"></div>
</button>
And the part I want to travel to
<div class="Slide" id="VideoSlide">
<!--More code here, but not relevant-->
</div>
button doesn't have an href attribute you need to add an a tag inside your button
#VideoSlide{
position: relative;
top:1000px;
height: 100px;
background: pink
}
<button class="Learn-Link" >Learn How
<div class="Learn-Triangle"></div>
</button>
<div class="Slide" id="VideoSlide">
<!--More code here, but not relevant-->
</div>
You can trigger button by using javascript
Eg:-
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
Related
For some reason when I added the third button, the buttons started showing in a column manner.
html:
<div class="creator-button-container" *ngIf="isCurrentUserTheChannelCreator">
<div *ngIf="isChannelEditable">
<button mat-raised-button color="accent" type="button" (click)="openDialog()">Add field </button>
<div *ngIf="isChannelReadyForBids">
<button mat-raised-button color="accent" type="button" (click)="setState('in progress')">Open the channel for
bidding
</button>
</div>
<button mat-raised-button color="accent" type="submit">Save Channel</button>
</div>
<div *ngIf="form.value.state=='in progress'&&userId === channel.creator">
<button mat-raised-button color="accent" type="button" (click)="setState('new')">Edit channel </button>
</div>
</div>
css:
.creator-button-container{
background-color: red;
display: inline-block;
flex-direction: row;
}
I though the 'display: inline-block' would work but its not working
I looked at this solution but i didnt understand it: Angular - display buttons in rows of two
its weird because as soon as i added the third button, the buttons started being displayed as a column
Add buttons in div tag because div is block level element.
Something like this:
<div>
<div><button class="btn">B1</button></div>
<div><button class="btn">B2</button></div>
<div><button class="btn">B3</button></div>
</div>
I'm working with a project in Blazor.
I'm using a component called "BlazorWheelZoom" (https://github.com/iso8859/BlazorWheelZoom)
This is my first page:
#page "/"
#page "/print"
#using Blazorise
#using LabelPrint.Shared
#using Linak.LabelPrint.Client.Shared.Components
<h3>Print</h3>
<div class="container-lg">
<div class="row">
<div class="d-flex justify-content-center">
<div style="border: thin solid green; width: 510px; height: 510px; padding: 5px;">
<WheelZoom Image="/Img/rotate0.png" width="500" height="500" />
</div>
</div>
.... and so on
For this HTML as you can see above, I get the following output:
The image refuses to move to the left, just as expected. If i zoom in a little bit I can move it a few pixels corresponding to the difference (the part of the image that you cannot see) and then it stops.
See the demo of the creator: https://blazorwheelzoom.azurewebsites.net
But when I add the exact same code to a popup Modal, I can keep moving it to the left.
I have the exact same HTML and CSS, so it must be something with the parent I guess. But I have tried to disable/enable stuff, but without luck. I just want the image to be prevented from moving "out of bounds" if you know what I mean.
This is the HTML in my Modal:
<Modal #ref="LabelPreview">
<ModalContent Centered="true" Size="ModalSize.Large">
<ModalHeader>
<ModalTitle>Show</ModalTitle>
<CloseButton />
</ModalHeader>
<nav class="navbar navbar-light bg-light">
<Button #onclick="() => RotateImage(true)">
<i class="fas fa-redo"></i>
</Button>
<Button #onclick="() => RotateImage(false)">
<i class="fas fa-undo"></i>
</Button>
</nav>
<ModalBody>
<div class="d-flex justify-content-center">
<div class="#($"{rotationClass} frame")">
<WheelZoom Image="#(rotate0)" width="500" height="500" />
</div>
</div>
</ModalBody>
<ModalFooter>
<Button Color="Color.Secondary" Clicked="#DownloadImage">Download</Button>
<Button Color="Color.Primary" Clicked="#HidePreviewModal">OK</Button>
</ModalFooter>
</ModalContent>
The Modal component I'm using is from Blazorise
This gotta be some CSS thing, but I'm about to give up. So hopefully some of you guys can help me.
I am trying to put links in bootstrap alert box but when I do the box is too big in height? When I change the css height the text and the link is well below it? What am I doing wrong? Thankyou
The code is
<div id = "mystuff" margin-top: 15px" class="alert alert-info">
<span id="mystuff1"><button id = "button1" type = "button" class = "btn btn-link">click here</button></span>
</div>
You did not leave much detail of what you are trying to achieve, but based on what you are doing as you add elements inside the outer container it grows too tall?
This is happening because the top container has the .alert class. And this class has padding: 15px;
If you remove that padding you should see what I think you want.
Try:
<div id="mystuff" style="margin-top: 15px; padding: 0;" class="alert alert-info">
<span id="mystuff1">
<button id="button1" type="button" class="btn btn-link">click here</button>
</span>
</div>
Cannot test it right now, but I think you have to change the mystuff1 from span to div or p element.
This part of your code contains an error:
<div id = "mystuff" margin-top: 15px" class="alert alert-info">
That should be
<div id = "mystuff" style="margin-top: 15px" class="alert alert-info">
Try this code snippet.
<div id="mystuff" style="margin-top: 15px; padding: 0;" class="alert alert-info">
<span id="mystuff1">
<button id="button1" type="button" class="btn btn-link">click here</button>
</span>
</div>
You also find the detail of alert in below link:
bootstrap alert details
I'm very new to CSS and HTML and I'm facing a very strange issue here, I have text area in my html as below.
<div class="ContentBox BPMSectionBody LastContentBox noHeader" id="div_3_1_1_2_11_1_1_1_1_1_1_10_1" data-view-managed="false">
<div class="Text_Area fullWidthTextArea CoachView CoachView_hidden CoachView_show" id="div_3_1_1_2_11_1_1_1_1_1_1_10_1_1" data-eventid="" data-viewid="Text_Area8" data-config="config99" data-bindingtype="String" data-binding="local.userAction.comments"
data-type="com.ibm.bpm.coach.Snapshot_7a0c03cc_ccef_4582_a1bc_7ccc8e9be488.Text_Area">
<div class="textLabel">
<label class="text controlLabel" id="div_3_1_1_2_11_1_1_1_1_1_1_10_1_1_label">Enter Cancellation Comments</label>
<div class="coachValidationDiv">
<img class="coachValidationImg smallImg CoachView_hidden" role="alert" alt="Error" src="/teamworks/webasset/2064.7a0c03cc-ccef-4582-a1bc-7ccc8e9be488/W/Error_icon_24x24.png">
<span class="coachValidationText" style="visibility: hidden;">!</span>
</div>
</div>
<textarea tabindex="0" class="dijitTextBox dijitTextArea dijitExpandingTextArea BPMTextAreaFont" id="dijit_form_Textarea_16" aria-labelledby="div_3_1_1_2_11_1_1_1_1_1_1_10_1_1_label" style="-ms-overflow-x: auto; -ms-overflow-y: hidden; box-sizing: border-box;"
rows="1" data-dojo-attach-point="focusNode,containerNode,textbox" widgetId="dijit_form_Textarea_16" autocomplete="off" value=""></textarea>
</div>
</div>
And a button as below :
<div class="Button pageFlowButton CoachView CoachView_show" id="div_3_1_1_2_12_1_2" data-eventid="boundaryEvent_17" data-viewid="Button10" data-config="config83" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_7a0c03cc_ccef_4582_a1bc_7ccc8e9be488.Button">
<button class="BPMButton BPMButtonBorder" type="button">Continue With Selected Action</button>
</div>
when I start typing in textarea and having my cursor still in the textarea and i click on button for the first time instead of action being taken, text area gets focused.
When I click button second time it works fine.
Can any body please help,what can be the possible reason here??
In case you are using jQuery, I guess you should use:
$('.Text_Area').click(function(noFocus){
noFocus.preventDefault();
});
I have an accordion with links in the header. It is in such a way that the accordion can be opened when clicked anywhere on the header. Because of this when clicked on the link, instead of going to that link (href) the accordion is opened.
Desired behaviour:
I want the accodion to be opened when clicked anywhere in the header except the link. (i.e when clicked on the link, the user must be redirected and accordion must not be opened)
<div>
<accordion close-others="false">
<accordion-group is-open="isopen" ng-repeat="ele in arr">
<accordion-heading>
<div>
<i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
<div style="width: 50%; float: left; padding-left: 6cm;">{{ele.a}}
<span >
link
</span>
</div>
<div style="text-align: center;">
<span>{{ele.b}}</span>
</div>
</div>
</accordion-heading>
</accordion-group>
</accordion>
</div>
Plnkr
You need to call $event.stopPropagation(); in your ng-click -> ng-click="$event.stopPropagation(); fn1();"
The trick is to call Event.stopPropagation() inside ng-click handler of anchor:
link
Here's an updated plunker.
use
ng-click="$event.stopPropagation()"//this will not apply accordion click event on this link tag
instead of
ng-click="fn1()"
This Might not work on plunk try it in your code.
When using accordion-heading, everything in it will be turned into an <a> tag.
Your code will be rendered in brower
<h4 class="panel-title">
<a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading">
<div class="ng-scope">
<i class="pull-right glyphicon glyphicon-chevron-right" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
<div style="width: 50%; float: left; padding-left: 6cm;" class="ng-binding">1
<span>
link
</span>
</div>
<div style="text-align: center;">
<span class="ng-binding">2</span>
</div>
</div>
</a>
</h4>
This is solution https://stackoverflow.com/a/14202514/3901308