css styles are not getting applied in modal dialog - how can I fix?

By -

React 16.13.1; Semantic UI React 2.0.2

Happens on Chrome, Firefox and Edge

I'm using SortableContainer from react-sortable-hoc package to make a UI for sorting an array. I'm having trouble with the css styling under the context that I'd like to use the package in. In a different context, it's behaving how I'd like.

Here's the context in which it's working. See notes below each image.

In the above image, the sortable list is in the lower left. This shows its idle state for context.

enter image description here In the above image, note that the list item that's being dragged has a yellow border and the text is visible. The SortableList element creates a new element on-demand that gets dragged around. The styling is set by a class that's passed to the SortableList element. In this case, the class is called file-upload-sortable-list-item-helper, as seen in the Elements pane by the red arrow.

But I need the sortable list in its own modal window rather than in the table cell as shown above. But when I do that, the styling doesn't get set for the item as it's dragged. But first, here's the sortable list in a modal window at idle.

enter image description here In the above picture, the sortable list is in a modal window and is at idle. So far so good.

enter image description here In the above picture, the item that's being dragged is not styled properly, and is practically invisible (red arrow 1), even though the Elements pane is showing that the file-upload-sortable-list-item-helper is set for the item (red arrow 2).

I can't figure out how to get the Chrome dev tools to show me the item Style details for the dragged item, because if I enter element selection mode and click on the list item, it doesn't get activated for dragging. I have to then click again to start it dragging but by then the element selection mode is deactivated.

Here's the relevant style definitions

.file-upload-sortable-list {
    list-style-type: none;
    margin: auto;
    width: 80%;
    padding: 10px 5px;
}
.file-upload-sortable-list-item {
    /*border-style: solid;*/
    border: 1px solid;
    text-align: center;
    padding: 2px;
    border-color: rgb(84,200,255);
    border-radius: 4px;
}
/* This class is for the list item that moves
around when using the SortableList. Because
of how it's instantiated on-demand, it can't be
a child of .pennai.
The most important part is the z-index. Without it
the element isn't visible at all.
See https://github.com/clauderic/react-sortable-hoc/issues/87
*/
.file-upload-sortable-list-item-helper {
    border: 2px solid;
    text-align: center;
    /* something happens to the padding compared to the regular item defined above,
       and the text is aligned at bottom of border instead of middle.
       But these settings aren't effecting things. Huh. 
    */
    padding-top: 0 !important;
    padding-bottom: 5px !important;
    border-color: yellow; /* rgb(84,200,255);*/
    border-radius: 4px;
    z-index: 10; /*important*/
    color: rgba(255,255,255,.9);
    list-style-type: none; /*remove the bullet*/
 }

Thanks for any suggestions.



from Recent Questions - Stack Overflow https://ift.tt/3stKZJ7
https://ift.tt/38N2L2a

Comments

Post a Comment

Popular posts from this blog

Hibernate Search - Elasticsearch with JSON manipulation

By -
Elasticsearch with JSON manipulation Elasticsearch ships with many features. It is possible that at some point, one feature you need will not be exposed by the Search DSL. To work around such limitations, Hibernate Search provides ways to: Transform the HTTP request sent to Elasticsearch for search queries. Read the raw JSON of the HTTP response received from Elasticsearch for search queries. Direct changes to the HTTP request may conflict with Hibernate Search features and be supported differently by different versions of Elasticsearch. Similarly, the content of the HTTP response may change depending on the version of Elasticsearch, depending on which Hibernate Search features are used, and even depending on how Hibernate Search features are implemented. Thus, features relying on direct access to HTTP requests or responses cannot be guaranteed to continue to work when upgrading Hibernate Search, even for micro upgrades (x.y.z to x.y.(z+1)). Use this at your own risk....
Read more

Today Walkin 14th-Sept

By -
Image
14th Sept 2017 ( GO Through all List) Read Walkin details properly , Try to call company before attending if possible !!! ==================================== 1. Myntra through fresherworld (Call Based , Venue shared to shortlisted candidates) _____________________________ 2. Magna : Hiring for Client Harman : C++
Read more

Spring Elasticsearch Operations

By -
Elasticsearch Operations Spring Data Elasticsearch uses two interfaces to define the operations that can be called against an Elasticsearch index. These are ElasticsearchOperations and ReactiveElasticsearchOperations. Whereas the first is used with the classic synchronous implementations, the second one uses reactive infrastructure. The default implementations of the interfaces offer: Read/Write mapping support for domain types. A rich query and criteria api. Resource management and Exception translation. ElasticsearchTemplate The ElasticsearchTemplate is an implementation of the ElasticsearchOperations interface using the Transport Client. @Configuration public class TransportClientConfig extends ElasticsearchConfigurationSupport {   @Bean   public Client elasticsearchClient() throws UnknownHostException {                      Settings settings = Settings.builder().put("cluster.name", "elasticsearch")....
Read more