Given the following design:
I'd like to hide the 'magnifier' icon and show the 'close' X icon in case the the input's placeholder is not shown.
My markup is:
input:not(:placeholder-shown) {
// hide 'magnifier' icon
// show 'close' icon
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group input-group-sm w-50" id="search-box">
<div class="input-group-prepend">
<span class="input-group-text bg-white" id="input-magnifier">
<i class="fa fa-search text-muted"></i>
</span>
<span class="input-group-text bg-white">
<i class="fa fa-close text-muted"></i>
</span>
</div>
<input type="search" placeholder="Search with 'exact match'" class="form-control" />
<div class="input-group-append">
<div class="dropdown btn-group" role="group">
<button class="btn btn-light btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button">filters</button>
</div>
</div>
</div>
How to make this input group behave in that way? Or in another words, how do I access the icons from my input element in Scss?
Due to the way CSS works, there is no way to do this without javascript given your current html markup. CSS sibling and adjacent selectors can only select elements that come after a given element, because css "cascades" through the markup from top to bottom.
That said, if you switch around your markup you can absolutely achieve this. Luckily, the input-group class already has display:flex;, so if you move the children elements, you can still control the display order with the order property.
Then all you need to do is use the + (adjacent) selector. See the attached code.
/* CSS adjacent selectors used here, to select the prepend
class only when the placeholder is shown or not shown */
input:not(:placeholder-shown)+.input-group-prepend #input-magnifier {
display: none;
}
input:placeholder-shown+.input-group-prepend #input-delete {
display: none;
}
/* This is the code used to reorder the elements so that
the buttons still appear before the input */
.input-group-prepend {
order: -1;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group input-group-sm w-50" id="search-box">
<input type="search" placeholder="Search with 'exact match'" class="form-control" />
<!-- moved .input-group-prepend div to here so that the adjacent selector works -->
<div class="input-group-prepend">
<span class="input-group-text bg-white" id="input-magnifier">
<i class="fa fa-search text-muted"></i>
</span>
<span class="input-group-text bg-white" id="input-delete">
<i class="fa fa-close text-muted"></i>
</span>
</div>
<div class="input-group-append">
<div class="dropdown btn-group" role="group">
<button class="btn btn-light btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button">filters</button>
</div>
</div>
</div>
I have the following code in my node/express file:
{{#each allimages}}
<div class="col m3 14">
<div class="card hoverable">
<div class="card-image">
<a href="/uploads/{{imageName}}" data-lightbox="mygallery" data-title="This is a test">
<img src="/uploads/{{imageName}}">
</a>
</div>
<div class="card-action2 right-align">
<form action="/user/{{id}}?_method=DELETE" method="POST">
<button type="submit" class="btn-floating btn waves-effect waves-light red">
<i class="material-icons">delete</i>
</button>
</form>
<form action="/user/{{id}}?_method=DELETE" method="POST">
<button type="submit" class="btn-floating btn waves-effect waves-light blue">
<i class="material-icons">edit</i>
</button>
</form>
</div>
</div>
</div>
{{/each}}
I can see my delete button in red but when I click on it it does not delete the file. When I am using and type is set to submit it works perfectly with my route and deletes the file. How can I use the materialize css delete style to submit my delete request form?
Thanks guys for any help!
You need to make it a button, not an anchor. You can just add the relevant class definitions to use the styles of a Materialize button:
<div class="card-action2 right-align">
<form action="/user/{{id}}?_method=DELETE" method="POST">
<button type="submit" class="btn-floating btn waves-effect waves-light red">
<i class="material-icons">delete</i>
</button>
</form>
<a href="2.html">
<i class="material-icons blue-grey-text">edit</i>
</a>
</div>
I'm trying to create a view where I show the bootstrap thumbnails on the same line, I've tried different methods and I'm showing thumbnails type list.
Here is my method in the controller:
public function show($id)
{
$properties = Property::find($id);
$files = File::where('property_id', $properties->id)->get();
return view('properties.show', compact('properties', 'files'));
}
This is my method in the view:
#foreach($properties->files as $index=>$file)
<div class="row">
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->property_id }}" width="300" height="200">
<div class="caption">
<div class="caption" align="center">
<button onclick="return confirm('Está seguro eliminar esta imagen?')" class="button btn btn-danger btn-xs" data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="material-icons delete-white">delete</i></button>
</div>
</div>
</div>
</div>
</div>
#endforeach
This way they are showing the images as thumbnails:
This should be the right way:
Can someone guide me to correct this small inconvenience?
You should loop inside your .row. The foreach method just repeats every code inside of it. So it was repeating <div class="row">...</div> every single time.
<div class="row">
#foreach($property->files as $index => $file)
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->property_id }}" width="300" height="200">
<div class="caption">
<div class="caption" align="center">
<button onclick="return confirm('Está seguro eliminar esta imagen?')" class="button btn btn-danger btn-xs" data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="material-icons delete-white">delete</i></button>
</div>
</div>
</div>
</div>
#endforeach
</div>
I want to make this page fill out the mobile screen so buttons and text maximizes on this template.
<template name="adminClub">
<div class="container">
<div class="well well-sm">
<h3>{{clubname}}</h3>
<a id="plus" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<br>
{{occupancy}}%
<input type="text" value="{{visitors}}" id="visitors">
of {{capacity}}
<br>
<a id="minus" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
</div>
</template>
I would like i to look like this (without zomming)
And not like this.
Now the div seem to fill out to much of the page with. I have installed twbs:bootstrap 3.3.6.
Assuming that you know how to update the <head>...</head> section in your html in meteor, add the following in your head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Also I noticed you're html structure is a bit incorrect for bootstrap. Try something like this and see if you get any luck:
<template name="adminClub">
<div class="container">
<div class="row">
<div class="col-xs-12>
<div class="well well-sm">
<h3>{{clubname}}</h3>
<a id="plus" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<br>
{{occupancy}}%
<input type="text" value="{{visitors}}" id="visitors">
of {{capacity}}
<br>
<a id="minus" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
</div>
</div>
</div>
</template>
Change you class="btn btn-info btn-lg" by class="btn btn-large btn-info" and so the entire width of mobile extends
you also can insert query media to set the CSS in mobile mode
Example:
#media (max-width: 767px){
}
Bootstrap
Is there a way to assign more than one event to a bootstrap control via "data-toggle".
For example, lets say I want a button that has a "tooltip" and a "button" toggle assigned
to it.
Tried data-toggle="tooltip button", but only the tooltip worked.
EDIT:
This is easily "workaroundable" with
$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");
If you want to add a modal and a tooltip without adding javascript or altering the tooltip function, you could also simply wrap an element around it:
<span data-bs-toggle="modal" data-bs-target="modal">
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip">
Hover Me
</a>
</span>
Since tooltip is not initialized automatically, you can make changes in your initialization of the tooltip. I did mine like this:
$(document).ready(function() {
$('body').tooltip({
selector: "[data-tooltip=tooltip]",
container: "body"
});
});
with this markup:
<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>
Notice the data-tooltip.
Update
Or simply,
$('[data-tooltip="tooltip"]').tooltip();
I managed to solve this issue without the need to change any markup with the following piece of jQuery. I had a similar problem where I wanted a tooltip on a button that was already using data-toggle for a modal. All you will need to do here is add the title to the button.
$('[data-toggle="modal"][title]').tooltip();
This is the best solution that I just implemented:
HTML
<a data-toggle="tooltip" rel="tooltip" data-placement="top" title="My Tooltip text!">Hover over me</a>
JAVASCRIPT that you anyway need to include regardless of what method you use.
$('[rel="tooltip"]').tooltip();
Not yet. However, it has been suggested that someone add this feature one day.
The following bootstrap Github issue shows a perfect example of what you are wishing for. It is possible- but not without writing your own workaround code at this stage though.
Check it out... :-)
https://github.com/twitter/bootstrap/issues/7011
Since Bootstrap forces you to initialize tooltips only through Javascript, I changed data-toggle="tooltip" (since it's useless then) to class="bootstrap-tooltip" and used this Javascript to initialize my tooltips:
$('.bootstrap-tooltip').tooltip();
And so I was free to use the data-toggle attribute for something else (e.g. data-toggle="button").
I use href to load the modal and leave data-toggle for the tooltip:
<a
data-toggle="tooltip"
data-placement="top"
title="My Tooltip text!"
href="javascript:$('#id').modal('show');"
>
+
</a>
Just for complement #Roman Holzner answer...
In my case, I have a button that shows the tooltip and it should remain disabled until furthermore actions. Using his approach, the modal works even if the button is disabled, because its call is outside the button - I'm in a Laravel blade file, just to be clear :)
<span data-toggle="modal" data-target="#confirm-delete" data-href="{{ $e->id }}">
<button name="delete" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
<i class="fa fa-trash fa-fw"></i>
</button>
</span>
So if you want to show the modal only when the button is active, you should change the order of the tags:
<span data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
<button name="delete" class="btn btn-default" data-href="{{ $e->id }}" data-toggle="modal" data-target="#confirm-delete" disabled>
<i class="fa fa-trash fa-fw"></i>
</button>
</span>
If you want to test it out, change the attribute with a JQuery code:
$('button[name=delete]').attr('disabled', false);
One more solution:
<a data-toggle="modal" data-target="#exampleModalCenter">
<span
class="tags"
data-toggle="tooltip"
data-placement="right"
title="Tooltip text"
>
Text
</span>
</a>
There is a nice solution using class .stretched-link. Button must have a class .position-relative. Here is a full working example:
Tooltip must be added to the button otherwise its position will be incorrect.
$('[data-toggle="tooltip"]').tooltip();
/*DEMO*/.btn{margin-left:5rem;margin-top:5rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--BUTTON-->
<button class="btn btn-primary position-relative" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Tooltip text">
<span class="stretched-link" data-toggle="modal" data-target="#exampleModal"></span>
Click Me!
</button>
<!--DEMO MODAL-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body">Modal body</div></div></div></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
When you opening modal on a tag and want show tooltip and if you implement tooltip inside tag it will show tooltip nearby tag. like this
I will suggest that use div outside a tag and use "display: inline-block;"
<div data-toggle="tooltip" title="" data-original-title="Add" style=" display inline-block;">
<a class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="setSelectedRoleId(6)">
<span class="fa fa-plus"></span>
</a>
</div>
I've also tried to use
<span></span>
but
<a></a>
worked great for me.
Here you are:
<button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here">
<a data-bs-toggle="tooltip" title="Example">Some info here</a>
</button>
Even better, try to wrap the entire button (that uses popover) with a div:
<div data-bs-toggle="tooltip" title="Something">
<button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here">
Button label
</button>
</div>
HTML (ejs dianmic web page): this is a table list of all users and from nodejs generate the table. NodeJS provide dinamic "<%= user.id %>". simply change for any value like "54"
<span type="button" data-href='/admin/user/del/<%= user.id %>' class="item"
data-toggle="modal" data-target="#confirm_delete">
<div data-toggle="tooltip" data-placement="top" title="Delete" data-
toggle="modal">
<i class="zmdi zmdi-delete"></i>
</div>
</span>
<div class="modal fade" id="confirm_delete" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true"
data-backdrop="static">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticModalLabel">Static Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body">
<p> This is a static modal, backdrop click will not close it. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form method="POST" class="btn-ok">
<input type="submit" class="btn btn-danger" value="Confirm"></input>
</form>
</div>
</div>
</div>
</div>
<!-- end modal static -->
JS:
$(document).ready(function(){
$('#confirm_delete').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('action', $(e.relatedTarget).data('href'));
});
});
<a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>