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.
Related
Hi have buttons on my website that could have material icons inside (left or right). For example:
<button class="btn btn-primary">
Button Label
</button>
<button class="btn btn-primary">
Button Label
<span class="material-icons-outlined"> settings </span>
</button>
<button class="btn btn-primary">
<span class="material-icons-outlined"> settings </span>
Button Label
</button>
As you can see, icon could be present or not and in case is present, it could be before or after text.
I'd need to "space" this icon from text, but I can't simply apply margin:0 20px to it because I'd need to create space only between text and icon and from icon to button side.
I thought that a possible solution could be wrap text label in another span to target it and then use :first-child or :last-child to target icon but... if could be possible to not add this wrap could be ideal.
<button class="btn btn-primary">
<span>Button Label</span>
<span class="material-icons-outlined"> settings </span>
</button>
.material-icons-outlined:last-child {
margin-left: 20px;
}
Did you try giving text an id and icon an id, then providing a margin? Just a thought. I believe you can also wrap it as you mentioned. Flexbox might be worth a go as well.
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>
enter image description here
I want to move the bottons on the navbar to the right edge of the page. So I used the class " navbar-right" but the buttons stay at the center. what can i do?
here is what i wrote.
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-flulid">
<div class="navbar-header navbar-left ">
<a style="font-family:Serif;font-size:50px" class="navbar-brand" href="#">KHS</a>
</div>
<div id="barbuttons" class="navbar-right navbar-btn" >
<button style="width:150px;" type="button" class="btn btn-primary ">Home</button>
<button style="width:150px" type="button" class="btn btn-primary " >Portofolio</button>
<button style="width:150px" type="button" class="btn btn-primary ">Contact</button>
</div>
</div>
</nav>
navbar-right should do the trick.
You better investigate with browser dev tools.
For Chrome, hit F12 and select Elements then using the select elements tool (top left button), inspect the element styles.
More info: Inspect and Edit Pages and Styles
Explorer is similar; hit F12 and select DOM Explorer then using the select elements tool (top left button), inspect the element styles.
More info: Diagnose and fix layout problems
Other browsers have similar features.
I assumed there is no difference until I spent hours trying to figure out why my buttons do not align properly.
Originally, I had the following code:
<div class="col-sm">
<button id="btnRegisterX" type="button" class="btn btn-Orange" data-toggle="modal" data-target="#mdlRegisterX">X</button>
</div>
<div class="col-sm">
<button id="btnRegisterY" type="button" class="btn btn-Orange " data-toggle="modal" data-target="#mdlRegisterY">Y</button>
</div>
<div class="col-sm">
<button id="btnRegisterZ" type="button" class="btn btn-Orange" data-toggle="modal" data-target="#mdlRegisterZ">Z</button>
</div>
The purpose was to have the buttons lined up in one column. That was not the case. They were in separate rows, but no matter how much I tried, the buttons did not line up. However, when I tried the <asp:Button.../> alternative (the exact same attributes in each button, just in that format), everything worked as intended. There was also nothing in the CSS file that contained any alignment attributes for those particular classes.
Any thoughts as to why?
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; }