Using the antd package (v3) I would like to have a button with a fixed width that wraps around its text and linebreaks when needed so the text fits inside the button and borders appear around the text correctly.
Here is what I have tried at the moment: Codepen. I noted that using whitespace: normal works with but not with antd
const { Button } = antd;
ReactDOM.render(
<>
<div style={{width:"100px"}}>
<Button block type="primary" ghost style={{whiteSpace: "normal"}}>Wrap around text</Button>
</div>
<button style={{width: '100px', whiteSpace: 'normal'}} type='primary'>Wrap around text</button>
</>,
mountNode,
);
The class "ant-btn" has fixed height property, you should need to override it by auto and it works.
<Button block type="primary" ghost style={{whiteSpace: "normal",height:'auto',marginBottom:'10px'}}>Wrap around text</Button>
Related
I'm trying to create a Navigation field for my website, and I would like my buttons to be underneath each other with a white line in between. I have managed to get this part working by adding two line breaks next to the button, as seen here:
<button id = "next" onclick="next()">
Volgende
</button><br><br>
I'm wondering if it's possible to have them show up like this, but if I hide the button, have the other buttons jump up, so they fill the gap and jump back down when the button becomes visible again.
Thanks in advance!
Don't use line breaks for layout. That's a misuse of their purpose, which is to break text.
Just put your buttons in block-level (or inline-block level) containers, like divs. Obviously you'd hide and show the containers, not the buttons.
.button-container:not(:first-child) {
border-top: 1px solid red;
padding-top: 4px;
margin-top: 4px;
}
<div id="next-btn-container" class="button-container">
<button id="next" onclick="next()">Volgende</button>
</div>
<div id="other-btn-container" class="button-container">
<button id="other" onclick="next()">Volgende</button>
</div>
<div id="another-btn-container" class="button-container">
<button id="another" onclick="next()">Volgende</button>
</div>
<br> is not a good practice for cross-browser perspective, kindly use the standard way by using margin and display:block property of css.
So your html will be like:
<button class="mb-20px d-block" id = "next" onclick="next()">
Volgende
</button>
And add below line in your css
.mb-20px { margin-bottom: 20px; }
.d-block { display: block; }
I have found how to make it work.
Instead of using
document.getElementById("button").style.visibility = 'hidden'
I have now used
document.getElementById("button").style.display = 'none'
This makes the buttons fill the gaps when they're hidden.
I have the following code:
<div id="question" onclick="location.href='{% url 'read_question' question.id %}';" style="cursor:pointer;">
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
The result:
When I click on the div #question I go to an other page.
But when I click on the button I also go to the other page.
However my button is disabled...
I would like not to go to another page when I click on the button.
In Firefox when I click on the button nothing happens (This what I want).
But in Chrome I go to the other page...
Someone could help me to permanently disable the button?
I use HTML5 and Bootstrap 4
you have the button inside the div so when you click on the button you are also clicking on the div. You can also do it your way and just check to see if the event.taget is a button. if it is don't go to the url, if it isn't then go.
<div id="question" onclick="location.href='{% url 'read_question' question.id %}';" style="cursor:pointer;">xxx
</div>
<div>
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
Try moving the onclick to the <button> itself rather than the surrounding <div>. The disabled attribute of the button will not be able to disable the onclick applied to its parent element.
In the two examples below I have styled it so you can see the difference between the surrounding div (In blue) and the button. Notice that the alert will only fire in the top example when clicking the div.
I am assuming that your styling means you can not see the difference between the div and button and it is left for Chrome and Firefox to decide whether you are clicking the disabled button or the div.
div {
background: blue;
padding: 1em
}
<div onclick="alert('test')">
<button disabled>my text</button>
</div>
div {
background: blue;
padding: 1em
}
<div>
<button disabled onclick="alert('test')">my text</button>
</div>
function myFunction(){
console.log(event.target.innerHTML);
if(event.target.innerHTML=='div')window.location.href='{% url ' + 'read_question' + 'question.id %}';
}
<div id="question" onclick='myFunction()' style="cursor:pointer;">
<button class="btn btn-primary" >div</button>
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
If you want to keep the button in the div, you should use event.stopPropagation();. Try the following code.
<body>
<div id="question" onclick="goLink();" style="cursor:pointer;">
<button class="btn btn-primary" onclick="noLink(event);">
<p>my text</p>
</button>
</div>
<script>
function goLink(){
window.location.assign("{% url 'read_question' question.id %}");
}
function noLink(){
window.alert("I didn't go anywhere.");
event.stopPropagation();
}
</script>
</body>
There is also a event.stopImmediatePropagation(); method. I hope this helps you out.
The button is disabled and that works exactly as it should (prevents the default action of the button).
However, by default, click events are bubbling. Which effectively means any such event on any elements in your page does not only get triggered on that particular element, but on every one of its parents until document or until one of the elements in the chain stop the bubbling.
To stop a click event (or any other bubbling event) from bubbling you have to call stopPropagation() method on it.
In your case:
document.querySelector('#question btn').addEventListener('click', function(e) {
e.stopPropagation();
})
...or, in jQuery:
$('#question btn').on('click', e => { e.stopPropagation() });
Now your button will not pass the click event to the div. If it's enabled it will do what you want it to, if not, it won't. The <div> won't have a clue in either case.
If you only want to cancel the bubbling when the button is disabled, change the selector from #question btn to #question btn[disabled]
I am making a simple auto complete input field with a close button at the end that would clear the field
<mat-form-field>
<input matInput type="text">
<button matSuffix mat-icon-button>
<mat-icon>close</mat-icon>
</button>
<mat-autocomplete>...</mat-autocomplete>
</mat-form-field>
However, I noticed that the button does not scale properly with the mat-icon, and the icon appears a little off to the right of the horizontal center of the button. Tried text-align and float, but none works. I then removed matSuffix, the button is not positioned on the same line anymore of couse, but it scales with the icon and centers it correctly
Sounds like https://github.com/angular/material2/issues/10313. The fix is to apply font-size, width, and height (and possibly line-height) to the button to counter what mat-suffix does to it.
I used the following style to align my icons better:
mat-icon {
margin-right: 0px !important;
vertical-align: middle;
}
This got rid of the space on the right (horizontal align) and moved the icon down a bit to align better with my calendar control or other input icons. Just make sure this doesn't break any other styling where mat-icons are used, in which case you will have to specifically style only the mat-icons for the inputs where needed and not apply this across the board.
I have some buttons in an html template, controlled by an AngularJS directive. The buttons ng-click event doesn't fire when you click on the buttons contents (icon and span), clicking anywhere on the padding or blank space works fine though...
This is only an issue in Safari.
I am using AngualrJS 1.4.
The icon is in an i element using classes to find the icon I want from a font file.
<button ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
<i class="icon icon-awesome"></i>
<span>Awesome</span>
</button>
Clicking in the green or orange area works fine.
The image on the right, clicking on the element in blue, doesn't trigger the click.
I have tried messing with the z-index and I have looked to see if the icon and span elements are capturing the click and preventing it from being passed to the button (which as far as I can tell they are not...)
try with this:
<a href="javascript:void(0)" ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
<i class="icon icon-awesome"></i>
<span>Awesome</span>
</a>
I've managed to get it working using z-index.
The icon and the span needed to have the position set for the z-index to have any effect.
I added the following to my .scss file.
.awesome {
.icon {
position: relative;
z-index: 1;
}
span {
position: relative;
z-index: 1;
}
}
I'm not sure what was capturing the click event but this seems to have fixed it in my specific case.
For me the solution was to move the ng-click inside the <button> tag. I had it previously in <span> and it was working in Chrome, but not in Firefox and IE.
After the ng-click resides in <button> instead of <span> tags, it works in all three browsers with no errors.
Here is my resulting code:
<button class="btn btn-default btn-xs" ng-click="myFunction()">
<span class="glyphicon glyphicon-th-list">
</span></button>
Hope this helps.
I would like to have a "Refresh" button on my page. For that I decided to use the bootstrap refresh-icon style. The icon appears on my button but it does not leave much room for the text "Refresh". Here is the code and Fiddle...
<input class="icon-refresh" type="submit" value="Refresh" name="Test"> </input>
http://jsfiddle.net/jjaleel/kVHbV/339/
Anyone have any suggestions on how I can expand the button width so it shows both the refresh icon and the text?
Thanks.
You could use a button tag instead, they were made to be styled with much more control than an input.
Here's how I would use one with the latest bootstrap..
<button class="btn btn-primary"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>
Use a <button>, with the submit action, instead:
<button type="submit"><i class="icon-refresh"></i> Test</button>
JSFiddle
Put the refresh icon in a span inside a button:
<button type="submit" value="Refresh" name="Test"><span class="icon-refresh"></span> </button>
update (based on OP comment)
Without being able to change the markup at all, this is tough. To get rid of the "Refresh" text, set the text-color to transparent. For sizing, set display to inline-block and fix height and width to 20px.
input{
display:inline-block;
color:transparent;
height:20px !important;
width:20px !important;
}