I'm working with a number of large interchangeable style sheets. I need to use the border colour from one of the classes as the border for a div. The class in question has a number of properties, I only want the border.
Is there any way of doing this with CSS? I'd be happy with a CSS3 solution if it degrades nicely.
Of course I can use JS to do it, I know how with JQuery. But I was hoping to avoid that.
Lyle
Update: As I feared not possible, why hasn't CSS3 provided a solution to this? As I said I'm working with a number of large interchangeable style sheets, the re-factoring suggestions simply aren't workable and they'd not only be a large job in themselves, but have far reaching implications :( I'll just have to do it with JQuery.
JQuery solution (JQuery.css doesn't like shorthand, like border or border-color):
var border = $('.class').css('border-top-color');
$('div').css('border-color', border);
This is simply not possible in CSS alone, unless you alter the way the CSS declarations work.
For example:
.class1 {
background: green;
}
.class1, .class2 {
border: 1px solid red;
}
...and the HTML:
<div class="class1"></div>
<div class="class2"></div>
Or:
.class1 {
background: green;
}
.class2 {
border: 1px solid red;
}
...and then in your HTML:
<div class="class1 class2"></div>
<div class="class2"></div>
Nope. Try to refactor your stylesheets. You can add multiple classes to one element.
<div id="mydiv" class="borders black"></div>
Related
I am using Angular 12 drag and drop to move a mat-list-item to "dropzone" (cdkDropList) in another component.
When I drag the item over the droplist, the droplist expands as if to make room for the item. Since this is not really a list, this behavior is undesirable. How can I stop it from expanding?
<mat-list-item
cdkDrag
[cdkDragDisabled]="!isDraggable"
[cdkDragData]="r.id"
(click)="selectRecord(r, i)"
*ngFor="
let r of recordList | filterList: searchText:filterField;
let i = index">
<p id="{{ 'Item-' + r.id }}" [innerHTML]="lineTitle(r)"
matLine></p>
</mat-list-item>
<div
(cdkDropListDropped)="svc.dropSub1($event)"
*ngIf="!svc.sub1"
cdkDropList
class="drag-here-column text-center"
style="border: 1px grey dotted; line-height: 300px; font-size: smaller; font-style: italic;">
Drag preferred subject here
</div>
I tried to used dragula but although is easier to configure I ended up having the same issue, where dragula will just add more elements when the destination is full and changing that behaviour was not obvious to me
After searching in many places about how to avoid cdkDropList from autoexpading or growing, I ended up doing a custom drag/drop approach, especially because I need to have placeholders as destination of my objects.
Is really useful to set HTML IDs to each element that is going to be dragged, in this way you can recognize origin and destination based on those id (for example concatenating a prefix of the container with the position ('contA_1','contB_9')
Here is one basic example that once you understand can help you setup your drag/drop event handlers and how to update the model to reflect the drop operation
https://idkblogs.com/angular2/2/Implement-Drag-and-Drop-in-Angular-2-4-5-6
Locally ran Basic AngularJS 1.x Example, found out if style="height: 100%;" the grid collapsed into a horizontal line. Setting it to something else like 100px works.
Everything the same except my Angular is 1.5.0, and ag-grid v8.1.0.
<div ng-controller="exampleCtrl">
<div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
</div>
JS is the same as the tutorial. Looks like a bug.
This is almost certainly due to you having DOCTYPE html in your html file.
If you do, then you need to ensure that the grids container has a non-0 height to fill, otherwise it will appear as a flat line as you've found.
This is not an ag-Grid specific issue - it's a side effect of not having quirks mode in use.
The easiest thing for you to do is this:
<style>
html, body {
width: 100%;
height: 100%;
}
This StackOverflow Question/Answer explains the underlying issue pretty well
You shall try setting the autoHeight of the ag-grid, by setting the DomLayout.
See the sample code below for angular.
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
//The ag-grid is not enlarging based on the page height,
//so dynamically adjusting the height of the grid
this.gridApi.setDomLayout("autoHeight");
}
For reference see this https://plnkr.co/edit/Jb1TD7gbA4w7yclU?preview
.ag-root-wrapper-body.ag-layout-normal.ag-focus-managed {
height: 100%;
}
Is it somehow possible to place a span as the value of a text input field?
I am making a mailing system for a website and want a nice looking receivers input field, where added receivers are contained and added to the value of input text field. At the moment i use a separate "adding field" while showing added receivers in a span-container. I want to merge these to fields together. Just like any input field in regular e-mail software.
Help would be most appreciated! Thanks in advance!
Short answer: no, you cannot include a <span /> within an <input />.
You have a few options. You could use javascript to emulate behaviour like the email To: field. E.g. listen to key presses and handle actions like backspace after a ;.
Another option would be to make a list appear (css styled) like a textbox. Have the last <li /> contain a textbox with cleared styles. Every time the user adds a new email then insert a new <li /> before the textbox.
E.G.
html:
<ul class="email-textbox">
<li>bob#email.com;</li>
<li>jane#email.com;</li>
<li><input type="text" /></li>
</ul>
css:
.email-textbox {
background-color: #fff;
border: 1px solid #ccc;
padding: 2px 4px;
}
.email-textbox li {
display: inline-block;
list-style: none;
margin-left: 5px;
}
.email-textbox input {
background: none;
border: none;
}
javascript (jQuery, can change to vanilla)
$(function () {
$('.email-textbox').find('input').focus();
});
You will need to extend this javascript to include a keypress handler etc, but it gives the general idea.
Demo: http://jsfiddle.net/UeTDw/1/
Any option will require some javascript however.
If you can use jQuery, you could check out jQuery UI autocomplete
One way to do it would be to layer a text input on top of a div that is styled to look like a text input.
<div id="fake-input">
<span class="input-item">John Doe</span>
<span class="input-item">Jane Deere</span>
<input id="receiver-input" type="text" />
</div>
You can strip all styling off of receiver-input, and add borders, background colors, and such to fake-input so that it appears to be a text field. When a receiver is added, you can create a new input-item span and append it to the list.
Input text fields are typically used to accept raw text input. Attempting to wrap input text inside of a text field opens you to user error and potential difficulties with parsing data if the person is able to manipulate the tags.
Personally I would suggest keeping your current method but enabling some form of AJAX support to make things more dynamic and less error-prone to the user.
(My $0.02)
TextExtjs is probably what you want. It's a jquery plugin for allowing removable tags with autocompletion etc in a textarea.
And here is a related SO discussion - where I found this plugin - on mimicking the similar behavior found in some inputs on facebook.
I'm developing a GWT project, and I encountered a problematic cross-browsering problem.
When using firefox, there are problems with the display of all the pages. I found the reason why :
In UIBinder, each of my pages are wrapped by a "g:HTMLPanel" : at start and at the end of the xml file, to wrap the content of all the pages
When doing this, the generated code of the panel goes like this :
div style="width: 100%; height: 100%; ....
The problem is that "height : 100%". If I remove it with firebug, the display is perfect.
So my goal is to programatically remove that generated 100% height.. But no way to do it !
I tried everything : setHeight, setSize, working on the Element itself with getElement().methods()... I tried to do things like style.clear(), everything that could have a chance to work.. But in the generated code that "height: 100%" will ALWAYS be there. If I set it's height to "50%" or "50px" it has no effect at all.
I even tried to give it an ID, then with pure javascript to change it's style, but no solution either..
Note : I'm sure that I'm working on the right element : adding a styleName, for example, works well.
Any idea ?
Your help would be really appreciated, I have no clue of how to remove this bit of generated code, and I've been looking for hours already :(:(:(:(
Best regards,
Nils
I just inspected some of the code generated by GWT from my uibinders in firebug and < g:HTMLPanel > isn't adding any width or height styling.
I don't have < g:HTMLPanel > as the root element in my uibinder though, I have my own class.
<a:FormPanel ui:field="form">
<g:HTMLPanel>
<input type="hidden" ui:field="discoveryId" />
<table cellpadding="2" cellspacing="0" class="{widgets.gridPanel}">
<tr>
<td>Name:*</td>
What about using say FlowPanel as your root uibinder class instead, then HTMLPanel?
Failing that you could always use the !important css rule to override the ones assigned on the div.
.myHTMLPanel {
width: auto !important;
height: auto !important;
}
This can be due to the fact that an HTMLPanel is wrapped into a DeckPanel. A DeckPanel adds "height: 100%" and "width: 100%" to the elements.
After showing the widget, add the following code:
deckPanel.add(widget);
deckPanel.showWidget(0);
Element e = DOM.getParent(widget.getElement());
DOM.setStyleAttribute(e, "height", "");
DOM.setStyleAttribute(e, "width", "");
widget.setHeight("");
widget.gwtContainer.setWidth("");
Wordpress wraps images with captions in a div with a class of .wp-caption.
I'm looking for a way to select images that don't have this div so I can wrap them in different div. (to keep a consistent border around all the images)
<div class="blog-post-content">
<div id="attachment_220" class="wp-caption alignleft" style="width: 310px">
<img class="size-medium wp-image-220" src="/path/to/image" alt="" width="300" height="280" />
<p class="wp-caption-text">Caption Text</p>
</div>
<p>This is the body of the post</p>
</div>
To test my selector, I'm just trying to add a green border. I can handle the .wrap() once the selector is working.
The most promising of my attempts is:
$('.blog-post-content img').parent('div:not(".wp-caption")').css('border', '2px solid green');
... but no luck.
How about this: (untested)
$('.blog-post-content img').filter(function(){
return !$(this).parents('div').hasClass('wp-caption');
}).css('border', '2px solid green');
try:
$('.blog-post-content img').parent(':not("div.wp-caption")')
Not if what Matti says abotu the a element in the hierarchy then the above wont work.
I know this question was asked a long time ago, but I would like to suggest the following:
$('.blog-post-content img').closest('div:not(".wp-caption")')
Untested, but I think that should work, and is shorter than the answer above that works. Using closest means the a is ignored.