i have a bootstrap treeview where the text is too long to fit on one line.
The text does flow to the next line, however the indentation only applies to the first line, not the second.
See screenshot of Current situation
What i want to reach is the next screenshot some paint job
Anyone have any idea how to reach this?
I have wraped the text inside the "li" element into a span element that contains the class node-label, then css will do the job:
/*
Align text in the consequent lines as well
*/
.node-label {
display: flex;
}
.node-tree > [class="icon glyphicon"] {
display: none !important;
}
.list-group-item {
display: flex !important;
}
this is an example on how the list needs be structured
<li class="list-group-item node-tree" data-nodeid="13" style="color:undefined;background-color:undefined;">
<span class="indent"></span>
<span class="indent"></span>
<span class="icon glyphicon"></span>
<span class="icon node-icon"></span>
<span class="node-label">Graduate Programs With Rotations</span>
</li>
Related
I would like to display the hidden button content in my card when hovering over it. I am currently attempting to use the adjacent sibling selector to do this, by connecting a hover element (the card) to another element (the hidden button) to achieve this. The code is is as follows
<div class="container">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<div class="card-white">
<div class="secret-button">
<img src="images/approve.svg" id="i">Hidden button
</div>
<img src="images/chococake2.jpg"
style="width: 245px; height: 191px;"
/>
<h3>Recipe</h3>
<h4>German Chocolate Cake</h4>
<p>5/5</p>
<p>reviews</p>
<p>make it again</p>
</div>
</div>
My hidden button is currently set as display none on my css purposely, but I would like to then make it visible by doing the below
.card-white:hover{
background-color: #8C8C8C;
border: 5px solid green;
text-decoration: none;
}
.secret-button{
display: none;
}
.card-white:hover + .secret-button{
display: block;
}
The issue is that despite my attempt above, this is not changing my html page. The plus button appears as orange on my sublime text, which suggests to me it does not like or recognize the selector as valid css code for some reason.
I think the main problem is that I may need to restructure the html/css as these two elements may not be proper siblings, but just want to know how best to go about this.
Is there any way to keep dropdown triangle (▼) displayed for multiple mode of ui-select?
<div ui-select multiple ng-model="selectedItems" class="form-control">
<div ui-select-match>
<span>{{$item.name}}</span>
</div>
<div ui-select-choices repeat="item in availableItems" >
<span>{{item.name}}</span>
</div>
</div>
I managed to steal the triangle from ordinary ui-select:
<i class="caret pull-right" ng-click="$select.toggle($event)"></i>
but having difficulties displaying it properly on the ordinary place to the right. Any tips? Thanks.
The solution I got so far: reused this caret class and made it displayed on top of the component using style position: relative; left: -1.5em;, placing the element right after ui-select (placing it straight inside ui-select is not possible because angularjs replaces it's content with own templates - so my caret comes after but then shifted left)
Also, I had to attach ng-click which does $select.toggle($event) to this caret element. As long as the $select is not available out of scope of ui-select, I had to introduce outer controller which includes both ui-select and caret elements - and simply assign $select a field within it using ng-init on ui-select.
So it looks something like:
<div ui-select multiple ng-model="selectedItems" class="form-control" ng-init="mySelect = $select">
<div ui-select-match>
<span>{{$item.name}}</span>
</div>
<div ui-select-choices repeat="item in availableItems" >
<span>{{item.name}}</span>
</div>
</div>
<span style="position: relative; left: -1.5em;" class="caret"
ng-click="mySelect.toggle($event)></span>
▼ is displayed only when dropdown is not opened. Also, clicking it requires some pixel-hunting (can be mitigated by putting the caret into a div that spreads vertical). So it's a partial solution.
The best approach I worked out is a scalable background SVG image applied using this CSS:
.select2-search-field {
width: 100%;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 13 6' fill='gray'><polygon points='0 1 8 1 4 5'></polygon></svg>");
background-repeat: no-repeat;
background-position-y: center;
background-position-x: right;
}
On a tablet (iPad Pro shown), if I double tap the screen to zoom in on the page, and then click to open the Menu, the menu opens under the search box but should open below the header but aligned with the logged in user.
The expected behavior is that it will always open below the logged in user offset vertically below the header.
The html pretty much looks like below. I am using flex to position the items in the header (e.g., logo, search, user) but that shouldn't impact the menu. According to the material docs (v1.1.8) By default, md-menu will attempt to align the md-menu-content by aligning designated child elements in both the trigger and the menu content. Which implies that the menu will line up as desired to the div which wraps the button,icons, and name even if I didn't already have the md-menu-origin attribute.
What would cause a zoomed tablet to cause the menu to open in the wrong location?
<md-menu-bar>
<md-menu hide show-sm show-md md-offset="0 9">
<div
class="md-icon-button"
ng-click="vm.openMenu($mdMenu, $event)"
aria-label="Open portal menu"
md-menu-origin
md-menu-align-target
role="button"
aria-label="Portal menu"
>
<span class="fa fa-user-o"></span>
<span class="user-name" ng-bind="vm.userName"></span>
<span class="fa fa-caret-down" ng-if="!$mdMenuIsOpen"></span>
<span class="fa fa-caret-up" ng-if="$mdMenuIsOpen"></span>
</div>
<md-menu-content layout="column" layout-align="start stretch" width="3">
<span>Portal Menu</span>
<md-menu-item>...</md-menu-item>
<md-menu-item>...</md-menu-item>
<md-menu-item>...</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-bar>
Check with css property set for the same.
Use position to two elements and set z-index to the two elements on which opened dropdown is getting overlapped.
Example:
(parent element)
.class1 {
position: relative;
z-index: -1;
}
(child element)
.class2 {
position: absolute;
z-index: 16;
}
Once, check with this. This answer is from CSS point of view.
I created a dropdown menu that opens when you click on a text box, and then when you chose a string for that dropdown list, it puts it in the text box.
I would like to make that when you hover your mouse on the strings in the dropdown, they get slightly highlighted! how can I achieve this?
<div class="row">
<div class="col-xs-12 max300" uib-dropdown is-open="vm.descriptionDropdownOpen">
<textarea name="remarks" class="form-control" ng-model="vm.presence.description" ng-click="vm.toggleDescriptionDropdown()" autofocus></textarea>
<ul id="descriptionDropdown" uib-dropdown-menu>
<li ng-repeat="descr in vm.loadedDescriptions" ng-click="vm.presence.description = descr.text; vm.descriptionDropdownOpen = false;">
{{descr.text}}
</li>
</ul>
and the css to keep the dropdown aligned with the textbox:
#descriptionDropdown {
width: 100%;
line-height: 150%;
padding-left: 8px;
position: relative;
}
thank you very much
you can do something like this
#descriptionDropdown li:hover{
background-color:#eaeaea;
}
Change the color code to your desired color code.
And remove the padding from ul to avoid space around background when you hover. Instead, use padding on li
#descriptionDropdown li{
padding-left:8px;
}
You could add this css :
li:hover {
background-color: blue;
}
I have a UI Bootstrap accordion whose heading I want to be fully clickable, not just the title like the default behavior.
<accordion class="fda-accordion panel-group panel-group-square" close-others="oneAtATime">
<accordion-group is-open="fdaClass1Open" ng-show="fdaRecallsClass1Count">
<accordion-heading>
<div class="panel-heading-blue">
<i class="fa fa-plus fa-fw" ng-class="{'fa-minus': fdaClass1Open, 'fa-plus': !fdaClass1Open}" style="margin-right:10px"></i>
FDA Class 1 Recalls ({{fdaRecallsClass1Count}})
</div>
</accordion-heading>
{{fdaRecallsClass1Content}}
</accordion-group>
</accordion>
Is there some workaround for this?
The issue is that the anchor that's handling the toggle is wrapped around the header text rather than the div. I would style the content of the heading with negative margins and matching positive paddings corresponding to the padding values of the heading panel in order to expand the clickable area beyond the div.
So say for instance the padding on your panel-heading is 9px 15px, you'd have the following css in your panel-heading-blue class
.panel-heading-blue{
margin: -9px -15px;
padding: 9px 15px;
}