In PrimeNG 9, I could center-align the content projected into a button. Does anybody know how this can be achieved in PrimeNG 10?
<div class="ui-g ui-fluid" >
<div class="ui-g-12">
<button pButton>
<div>Content</div>
<i class="fa fa-home"></i>
</button>
</div>
</div>
Button Rendered in PrimeNG 9:
I already submitted an issue of having the rendered when the label is missing.
https://github.com/primefaces/primeng/issues/9482
Add style="width: 100%" to your Content div.
And you can set label=" " to avoid the char while waiting fix from PrimeNG team.
See StackBlitz
PrimeNG's documentation is not up-to-date when it comes to primeflex, please check primeflex's documentation directly instead:
https://www.primefaces.org/primeflex/
Below code snippet centers a button, you can re-use that to center content within the button as well:
<div class="flex justify-content-center">
<button pButton type="button" label="Submit"></button>
</div>
Related
I have created my own modals from scratch and i want to prevent scrolling in the background when a modal is open, all i can find online is stuff about bootstrap which isn't helpful to me because my code doesn't automatically call 'modal-open' so
body.modal-open{
overflow:hidden;
}
Doesn't work for me.
<div id="wrapper3">
<a class="button" href="#openModal-4">
<img class="image"src="img/Animation.png">
<p class="text">Animation</p>
</a>
</div>
<div id="openModal-4" class="modalbg">
<div class="dialog">
X
<div class="popout">
<h1>2D Animation Project</h1>
<div>
<h2>Project Brief</h2>
<a class="modalfullimg"><img src="img/Design/moodboard.png"></a>
</div>
<h2>Sketches</h2>
<a class="modalfullimg"><img src="img/Design/initialsketches.png"></a>
</div>
</div>
</div>
Can you just modify the script you wrote to add a body class like 'modal-open' so you can apply the appropriate CSS? Seems like the easiest solution, if you're making it custom anyway.
I have a bootstrap button group with two buttons and I want some text to span across the two of them.
They are Decrease and Increase buttons. So I have the text "Contrast" across the two buttons with a "-" on one button and a "+" on the other button.
I have overlayed(?) a div with the required text on top and used "pointer-events:none" to get it working - BUT I need it to work on older browsers (IE 10) that do not support pointer-events.
Is there an alternative/better way of doing it??
<div class="btn-group">
<div style="position:absolute;top:5px;left:3px;text-align:center;width:100%;color:white;z-index:300;pointer-events: none;">
<i style="left-padding:2px;vertical-align: middle;" class="fa fa-adjust fa-2x"></i>
<div style="display:inline;top: 2px;position: relative;">Contrast</div>
</div>
<button type="button" class="btn">
<br> <br>-
</button>
<button type="button" class="btn">
<br> <br>+
</button>
</div>
In the end I changed the design so that there were separate buttons and did not use a word spanning the two buttons.
<button class="ui button" #click="beforeAdd">添加</button>
<div class="ui modal">
<div class="header">Header</div>
<div class="content">
<div class="description">
<p>Description</p>
</div>
</div>
<div class="actions">
<div class="ui negative right labeled icon button">
取消
<i class="remove icon"></i>
</div>
<div class="ui positive right labeled icon button">
提交
<i class="checkmark icon"></i>
</div>
</div>
</div>
view methods:
beforeAdd(){
const modal = $(this.$el).find('.ui.modal')
console.log(modal)
modal.modal('show')
}
first click,modal show, second click nothing happened, I found semantic change modal to root for div class='ui dimmer modals page transition hidden',how can solve it
Semantic is removing it from your $(this.$el) so next time it does not find it.
It works when you use with global $ and an id:
show(){
const showModal = $('#mymodal')
console.log(showModal)
showModal.modal('show')
}
See Updated fiddle.
If you also want to use Vue variables in your modal, it is necessary to clone the modal and only show the cloned version.
With this approach Vue will still be able to keep track of the original modal, because Semantic doesn't remove it from the DOM.
beforeAdd(){
const modal = $(this.$el).find('.ui.modal').clone()
console.log(modal)
modal.modal('show')
}
I have two scenarios with similar problems. I'm attempting to add a font awesome icon:
Inline with a text input and 'add on' button, yet superscript (JSFiddle1)
<div>
<div class="input-group">
<input class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" id="copy-link" type="button">
<i class="fa fa-files-o"></i> Copy
</button>
</span>
</div>
<span>
<i class="fa fa-info-circle"></i>
</span>
</div>
Inline with text in a bootstrap panel heading text, but in the top right corner of the heading area (JSFiddle2)
<div class="panel panel-default">
<div class="panel-heading">
<b>
Text
</b>
<span>
<div class="dropdown">
<i class="fa fa-cog dropdown-toggle listing-cog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
</div>
</span>
</div>
<div class="panel-body">
</div>
</div>
Here's how I'd like each to look:
I don't know if this is important, but as a side note:
In the first scenario, the icon has a popover
In the second scenario, the icon has a dropdown
I don't think these have any effect on the layout, so I left out the related code.
For the first problem, your HTML structure is wrong. You need to add the icon inside the input-group DIV. Also to do superscript, you need a CSS class for that. Here is the update code for you:
JS Fiddle
For your second problem, your DIV must be displayed inline with a flotation. Here is the CSS for it:
.dropdown {
display:inline-block;
float:right
}
For your first issue: JS Fiddle
For your second issue as Raed N. said before just add a float:right to your dropdown:
.dropdown { float:right; }
I know similar questions have been asked earlier, but I have tried them and they aren't working. I have a dialog box, with some text and a button, which I need to position in the center of the box. My HTML is given below:
<div id='step3' class='item'>
<div class='row span9'>
<div class="text center"><button id='loginButton' class='btn btn-success' onClick='window.location.reload()'>Login again</button></div>
<small>using your new credentials.</small>
</div>
</div>
I tried placing the button inside a div and used <div style="text-align:center"> but it didn't work. Does anyone know how I could place the button in the center, preferably without adding an external CSS class?
Your class="text center" should be class="text-center", and you also don't need the row tag (it breaks the responsiveness).
<div id="step3" class="item">
<div class="span12">
<div class="text-center">
<button id="loginButton" class="btn btn-success" onClick="window.location.reload()">Login again</button>
<br> <small>using your new credentials.</small>
</div>
</div>
Also you have single quotes '' on most of your markup. Keep in mind this is with an old version of Bootstrap so depending on how wide the viewport is it might not be perfectly center.