I'm trying to stick two texts horizontally inside a button by using Bootstrap 4.
The word "Link" is always pushed to the next line and I want it to be next to "Copy".
I've tried using Float but it pushes "Link" too far to the right.
<div className="col-3 w3-button w3-tiny">
<button
onClick={() => {
this.copyReferralLink();
}}
className="btn btn-block btn-primary"
>
{this.props.t("Copy")}
<span className="d-none d-sm-block btn-primary float-right">
{this.props.t("link")}
</span>
</button>
</div>
This is what I have so far, any help is appreciated!
You'd use d-sm-inine-block instead of d-sm-block class.
Additionally you might want to wrap this.props.t("Copy") into a span of its own.
Related
I saw it on a site called Medium.com and I want to make it on my website too.
When the shared post is at the top of the page =
first.image
When the shared post is at the bottom of the page =
second.image
I will make this in angular. I hope I have made my request clear.
I would suggest to use Angular Material Menu which looks similar and handels the positioning of the dropdown and is supported by the Angular Material Team.
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Check voice mail</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Disable alerts</span>
</button>
</mat-menu>
I'm trying to have the right column in Bootstrap 4 grid system fixed using position: fixed.
Here's a demo and it's code.
I want the button group on the right to stick to the viewport when I scroll the document. I have tried adding position: fixed; this doesn't work as intended - it causes the button group to overlay on top of the window like this.
I have already seen this answer on making columns fixed in Bootstrap, but the solutions won't work when the position of the columns is interchanged. Few of the solutions there will cause the right column to overlay on top of the left column in small screens, which is undesirable. In such cases, when viewed on small screens, I want the columns to be stacked (with the sticky feature disabled).
I prefer CSS solutions but if possible, I'd also like to know how it's done in JS.
Bootstrap 4 has the position-fixed class for this...
<div class="container">
<div class="row">
<div class="col-md-9">
..
</div>
<div class="col-md-3" align="center">
<div class="position-fixed">
<button class="btn btn-success btn-custom">
<span>Button 1</span>
</button>
<br>
<button class="btn btn-warning btn-custom">
<span>Button 2</span>
</button>
<button class="btn btn-danger btn-custom">
<span>Button 3</span>
</button>
</div>
</div>
</div>
</div>
https://codeply.com/go/exOfOB2Igy
Place your buttons inside another div and then add a style of position: fixed to that div like so:
<div class="col-md-3" align="center" style="margin-bottom: 40px;/* position: fixed; */">
<div style="position: fixed;">
<button class="btn btn-success btn-custom">
<span>Button 1</span>
</button>
<br>
<button class="btn btn-warning btn-custom">
<span>Button 2</span>
</button>
<button class="btn btn-danger btn-custom">
<span>Button 3</span>
</button>
</div>
</div>
You can make the style a css class and make it show only on big screens
I am using vuejs2 for my webapp with bootstrap.
I have two blocks with v-if and v-else, so only one of those renders. I have bootstrap button in each of these blocks. When I press the button from first of div, second div becomes visible and vice versa.
Problem is when I click button of first div, button of second div appears, but still it is focussed, I want to have a normal button, but it is focussed with outline.
Here is simplified code:
<div id="app">
<div v-if="switc">
<button type="button" class="btn btn-secondary" #click="switc = !switc">
<span >First</span>
</button>
</div>
<div v-else>
<button type="button" class="btn btn-secondary">
<span>Second</span>
</button>
</div>
<br> <br>
<button type="button" class="btn btn-secondary" #click="switc = !switc">
<span>Switch</span>
</button>
</div>
Here is working fiddle, if you press first button, second still shows outline.
I missed this: key in v-if/else in docs. Vue tries to render elements as efficiently as possible, often re-using them instead of rendering from scratch. It seems in my case as well it is using the same component and re-rendering it completely.
To fix it I just need to add key field in each button, like following:
<div v-if="switc">
<button type="button" class="btn btn-secondary" #click="switc = !switc" key="first">
<span >First</span>
</button>
</div>
<div v-else>
<button type="button" class="btn btn-secondary" key="second">
<span>Second</span>
</button>
</div>
Updated fiddle here.
I have an web app which is working phine on the simulator,android and ios, but on windows phone one onclick event does not work. This is my HTML code:
<ul id ="triggerresolutionbg" class="table-view">
<li class="table-view-cell media">
<element>
<button class="btn btn-link btn-nav pull-left">
<span class="icon icon-left-nav" id ="triggerLeft" onClick = "triggerText(this.id)" ></span>
</button>
</element>
<button class="btn btn-link btn-nav pull-right">
<span class="icon icon-right-nav" id ="triggerRight" onClick = "triggerText(this.id)"></span>
</button>
<element>
<center id ="triggerText">After I...</center>
</element>
</li>
</ul>
I´m using Ratchet,Bootstrap and JQuery.
Why the onclick methods on Windows Phone does not work ?
According to the HTML5 spec for button putting interactive content inside a button element is invalid.
Content model:
Phrasing content, but there must be no interactive content descendant.
So you should not expect event listeners to work on elements inside a button. Some browser violate the spec and permit this, but others do not. Try attaching the onclick handler to the button element itself.
Since you are using this.id, I would recommend restructuring your HTML in the process, but something like this should work.
<button class="btn btn-link btn-nav pull-left" onclick="triggerText(this.firstElementChild.id)">
<span class="icon icon-left-nav" id="triggerLeft"></span>
</button>
I need this time a help with this example:
DEMO
You can see that the css on example 1 goes good. When you click on the button the state of the button change (press)
On example 2 i can't do the same. on my app i need that the "radio button" appear on vertical line (i get it).
But when i press the button, when i click out i back to the first state (don't press)
<h4>Exmaple 2</h4>
<div class="btn-group" data-toggle="buttons-radio">
<div class="row" ng-repeat="company in vm_login.decimals">
<button type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
</div>
Can anybody help me?
I got a final version and this is how i need
DEMO
Thanks for all
<div class="btn-group-vertical" >
<button ng-repeat="value in vm_login.options"
class="btn btn-primary"
type="button"
ng-model="vm_login.model"
btn-radio="value.id">
{{value.desc}}
</button>
</div>
<p>texto aqui: {{vm_login.model}}</p>
This worked for me try this approach in one line without using buttons:
<div class="btn-group">
<label class="btn btn-primary" ng-repeat="company in vm_login.decimals" ng-model="radioModel" ng-model="radioModel.id" btn-radio="company.id">{{company.desc}}</label>
</div>
The btn-group classed element expects it's children to be buttons (a btn classed element). Not a div element. Take out the div and move the ng-repeat to the actual button. Now if you want your button to align verticaly you'll need to use btn-group-vertical instead of btn-group as stated in the bootstrap documentation. Here's the update code:
<div class="btn-group-vertical" data-toggle="buttons-radio">
<button ng-repeat="company in vm_login.decimals" type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
Updated Plunker: http://plnkr.co/edit/kVFqNAXisMgkMVqy0WAF?p=preview