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.
Related
I am trying to add a space between these two buttons, So I used bootstraps modal-footer class and I believe the buttons were supposed to have space in between, but there is no spacing. My code is below:
< div className = "modal-footer">
<Button bsStyle = "primary pull-right" formNoValidate={true} type="submit">Submit</Button>
<Button bsStyle = "default pull-right" onClick={this.resetForm} type="reset">Reset</Button>
</div>
The white-spaces between your JSX tags are not kept once the JSX is compiled to javascript. If you want to keep them anyway, you can do this:
<Button bsStyle = "primary pull-right" formNoValidate={true} type="submit">Submit</Button>
{' '}
<Button bsStyle = "default pull-right" onClick={this.resetForm} type="reset">Reset</Button>
Put them inside 'btn-toolbar', not 'modal-footer'. The .modal-footer class is used to define the style for the footer of the modal. For .btn-toolbar class see more info on Bootstrap documentation.
Try this code:
<div className="btn-toolbar">
<button className="btn btn-primary pull-right" formNoValidate={true} type="submit">Submit</button>
<button className ="btn btn-primary pull-right" onClick={this.resetForm} type="reset">Reset</button>
</div>
Please note: I have used 'button' html tag NOT 'Button' of bootstrap. That's why I have changed the bsstyle to className. You can try on your bootstrap setup.
There are other css methods also using which you can provide space between buttons easiest one is to assign 'margin-right' to button.
To fix this I removed the "pull-right" and the spacing worked from bootstraps "modal-footer" class.
<div className= "modal-footer">
<Button bsStyle = "primary" formNoValidate={true} type="submit">Submit</Button>
<Button bsStyle = "default" onClick={this.resetForm} type="reset">Reset</Button>
</div>
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.
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'm facing a problem with getting a button to open a popver modal when hovering over and click.
<button type="button"
class="btn btn-success btn-lg"
data-target="#addChangeModal"
data-toggle="####"
data-toggle=""
data-content="Add change">
</button>`
when I set data-toggle to
data-toggle="modal"
or
data-toggle="popover"
Both values modal and popover work perfectly.
However I am unable to set
data-toggle="modal popover"
The official answer to this from the Devs of Bootstrap:
Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.
An example of this would be something like:
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span data-toggle="tooltip" title="Tooltip Message">Data<span>
</a>
credit to: Bootstrap: Collapse and Tooltip together
Launch your modal with jQuery:
$('#my-btn').click(function () {
$('#addChangeModal').modal('show');
$('[data-toggle=popover]').popover('hide'); //EDIT: added this line to hide popover on button click.
});
And then use a standard popover from Bootstrap, include data-trigger="hover" to show popover on hover.
<button id="my-btn" type="button" class="btn btn-success btn-lg" data-trigger="hover" data-original-title="Popover Title" data-content="Popover content" data-toggle="popover"></button>
Bootply Demo
Code contains text box and button
HTML:
<div id="input-collection" class="input-group input-group-lg">
<span class="input-group-addon">
<i class="glyphicon glyphicon-link"></i>
</span>
<input id= "url-input-box" type="url" class="form-control" name = "url" placeholder="http://www.example.com">
<span class="input-group-btn">
<button id="submit-url-btn" class="btn btn-success" type="button">Go</button>
</span>
</div>
which shows button and texbox like:
I changed margin-top and margin-left in all above class but no change.
Where I need to make change here?
Use Firebug (or chrome developer tools - Ctrl+Shift+J)
Look at the margin-bottom settings of: submit-url-btn (the tag)
against the margin-bottom of the url-input-box (span)
It seems that the button has a high value on margin-bottom. set both to 0 and see how they are positioned.