On the Themeroller page, the author of jQuery UI shows that there are icons available if you use certain keywords. Example:
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-circle-close">
</span>
</li>
This creates a nice little X in the middle of a circle, framed by a box with rounded corners and a border.
But what if my icons are not in a list? What if they're in a table cell for instance?
<td>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</li>
</td>
This works, although it's not technically correct, because I don't have an opening and closing < ul> element.
Do I use
<td class="showcities">
<span class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-triangle-1-s">
</span>
</span>
</td>
If so, what should the css be to define the ui-corner-all the same as the Themeroller example?
Instead of span, use <div> here, like this
<td class="showcities">
<div class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</div>
</td>
Related
Is there anyway to use excel or googlesheets to extract each <img src="......." to a separate column, if I have a column full of individual snipets of HTML such as this?
<li class="thumbs is-selected slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="0" role="option" aria-describedby="slick-slide10" style="width: 84px;">
<span>
<span>
<img src="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02409281_0.jpg" data-fullsrc="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02409281_0.jpg" alt=" ">
</span>
</span>
</li><li class="thumbs slick-slide" data-slick-index="1" aria-hidden="false" tabindex="0" role="option" aria-describedby="slick-slide11" style="width: 84px;">
<span>
<span>
<img src="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02557182_0.jpg" data-fullsrc="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02557182_0.jpg" alt=" ">
</span>
</span>
</li><li class="thumbs slick-slide" data-slick-index="2" aria-hidden="false" tabindex="0" role="option" aria-describedby="slick-slide12" style="width: 84px;">
<span>
<span>
<img src="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02554585_0.jpg" data-fullsrc="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02554585_0.jpg" alt=" ">
</span>
</span>
</li><li class="thumbs slick-slide" data-slick-index="3" aria-hidden="false" tabindex="0" role="option" aria-describedby="slick-slide13" style="width: 84px;">
<span>
<span>
<img src="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02600108_0.jpg" data-fullsrc="/prod-live/static/WFS/Haefele-HDE-Site/-/Haefele/en_DE/images/default/furniture-handle-aluminium-finger-pull-handle_155.01.831_x/02600108_0.jpg" alt=" ">
</span>
</span>
</li>
Try using this formula B2 of the demo sheet
=ARRAYFORMULA(IFERROR(REGEXEXTRACT(SPLIT(SUBSTITUTE(A3:A, "<img src=", "♥️<img src="), "♥️"),"img src=""(.*?jpg)"), ""))
A slight issue will be the that first column will be empty but I am guessing you are more interested in extracting all the images.
I'm not positive, but I think that this formula in B3 does what you want.
=ArrayFormula(REGEXTRACT(A3:A,"img src=""(.*?jpg)"))
Here is aa sample sheet:
https://docs.google.com/spreadsheets/d/1tAFGvTZwRL6al3ixM0eOEY5v03kUGgWkscVY8lOij2E/edit?usp=sharing
In the future, please make your sample sheet editable by everyone, to make it easier for people to help. Thanks.
If this doesn't do what you need, please clarify your question. And if it does do what you need, please select it as a valid answer, to help others.
I have a popover where i want all the content of my span tags to stay on the same line but allow linebreakes between span tags if needed.
But if i apply white-space: nowrap; on my span tags all my content is placed on one line and going outside the popover.
<button uib-popover-template="dynamicPopover.templateUrl" type="button" class="btn btn-default">Popover With Template</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>
<span style="white-space: nowrap;">Word one, </span>
<span style="white-space: nowrap;">Word two, </span>
<span style="white-space: nowrap;">Word three, </span>
<span style="white-space: nowrap;">Word four, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
<span style="white-space: nowrap;">Test, </span>
</div>
</script>
http://plnkr.co/edit/grWorND24x0Zo378hGxO?p=preview
You need spaces between the span tags otherwise it will treat it like 1 word.
A more maintainable solution is to use "display: inline-block;". It tries to keep text of each item on 1 line but only if it all fits on that line. It also breaks to the next line if it's going to overflow and takes up an entire line.
Also, I would suggest using css styles instead of inline styles since those are much more maintainable. If you don't want to make a stylesheet you can do something like this:
<style>
.popover-content span {
display: inline-block;
}
</style>
because of different configurations I have to write the same autocomplete twice. The only difference is that one uses md-floating-label and the other placeholder. Is there a way to implement only one autocomplete, which decides to use the one or the other, because of an value?
I tried to implement a custom attribute directive. As result angular could not compile the template and crashed.
The following sample shows my current code:
<md-autocomplete
ng-disabled="ctrl.isDisabled"
md-no-cache="ctrl.noCache"
md-selected-item="ctrl.selectedItem"
md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
md-search-text="ctrl.searchText"
md-selected-item-change="ctrl.selectedItemChange(item)"
md-items="item in ctrl.querySearch(ctrl.searchText)"
md-item-text="item.name"
md-min-length="0"
placeholder="Pick an Angular repository"
md-menu-class="autocomplete-custom-template"
ng-if="!ctrl.showAsLabel">
<md-item-template>
<span class="item-title">
<md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
<span> {{item.name}} </span>
</span>
<span class="item-metadata">
<span class="item-metastat">
<strong>{{item.watchers}}</strong> watchers
</span>
<span class="item-metastat">
<strong>{{item.forks}}</strong> forks
</span>
</span>
</md-item-template>
</md-autocomplete>
<md-autocomplete
ng-disabled="ctrl.isDisabled"
md-no-cache="ctrl.noCache"
md-selected-item="ctrl.selectedItem"
md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
md-search-text="ctrl.searchText"
md-selected-item-change="ctrl.selectedItemChange(item)"
md-items="item in ctrl.querySearch(ctrl.searchText)"
md-item-text="item.name"
md-min-length="0"
md-floating-label="Pick an Angular repository"
md-menu-class="autocomplete-custom-template"
ng-if="ctrl.showAsLabel">
<md-item-template>
<span class="item-title">
<md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
<span> {{item.name}} </span>
</span>
<span class="item-metadata">
<span class="item-metastat">
<strong>{{item.watchers}}</strong> watchers
</span>
<span class="item-metastat">
<strong>{{item.forks}}</strong> forks
</span>
</span>
</md-item-template>
</md-autocomplete>
This code:
<td>
<label>
<input type="checkbox">
</label>
</td>
yields this: , which is wide. I want only the check-box square part, like the check-boxes in this demo. Writing only <td><input type="checkbox"></td> creates simple check-box (not JQM style), since it's inside a table.
Does somebody has simple solution ?
first of all you will not be able to customize the by default developed HTML control. what I meant is just taking out the square portion from check box.
The link you share is doing it with the help of css classes and images.
Initially.
<label class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-checkbox-on
ui-btn-up-c" data-theme="c" for="selectRow-2">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text">
</span>
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-on">
</span>
</span>
</label>
Later on when you click the square with help of java-script they have just swapped classes.
<label class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-checkbox-off ui-btn-up-d"
data-theme="d" for="selectRow-1">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text">
</span>
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-off">
</span>
</span>
</label>
The easiest way would be using some thing similar in your layout and swapping the classes with JS.
I'm using jQuery UI icons in a table and they take up the size of the table cell, which is elongated horizontally.
Q: What html/css is necessary to make the icon have the same width as it's height?
Here's what I have so far:
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-minus"></span>
</div>
</td>
If the result you are expecting is the icon wrapped in a rounded box then you have to do set the container div a width of 16px, like here:
http://jsfiddle.net/marcosfromero/n2tYP/
#wanted .delete div {
width: 16px;
}
Not entirely sure if this is what you want, but maybe you need to set the behaviour of the div so that it does not fill 100%. Like this:
<table>
<td class="delete">
<div class="ui-state-default ui-corner-all" style="display:table">
<span class="ui-icon ui-icon-circle-minus"></span>
</div>
</td>
</table>
The div's display style is changed so that it does not scale to full width.
I can't tell if you want a jQuery specific answer or just a css answer. Since I don't know the former here's the latter. If you want to limit the width to known pixels and have the height adjusted so that it maintains the proper aspect ratio, a style like
img{width=32px; height= auto;}
should do the trick. Since most icons are square and of known size I would think
img{width=32px; height=32px;}
would work out too.
I don't understand. Are you sure some other CSS in your page isn't causing this problem?
jQuery UI CSS uses the background-image property to display images, and generally those images shouldn't be "taking up the size" of its parent.
I put together a quick jsFiddle with the following contents:
Dependencies:
jQuery 1.5.1
jQuery UI 1.8.9
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css
HTML:
<table>
<tr>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-minus"></span>
</div>
</td>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthick-1-w"></span>
</div>
</td>
</tr>
</table>
<br />
<table>
<tr>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-minus"></span>
Hello
</div>
</td>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthick-1-w"></span>
world!
</div>
</td>
</tr>
</table>
CSS:
/* Extend the width ... */
td.delete { width: 100px; }
And it came out looking fine in Google Chrome:
Is there a particular browser this is happening on for you? Can you provide a concrete example?