styloola

[styloola]

I think I found the problem: it’a css definition for the “hidden” class in bootstrap:

COPY CODE

.hidden {
display: none!important;
visibility: hidden!important;
}

Any idea on how to “remove” it?
I tried adding this to the style.css in the kleo-child dir, with no success:

COPY CODE

#pods-file-2931 {
    display: block;
    visibility: visible;
}

[styloola]

Unfortunately there’s no error in the console
The image is added in the dom, but is not shown. Here is the dom after the image upload.

COPY CODE

<li class="pods-file hidden" id="pods-file-2931" style="display: list-item;">
        <input name="pods_field_cover[2931][id]" data-name-clean="pods-field-cover-id-id" id="pods-form-ui-pods-field-cover-id-id" class="pods-form-ui-field-type-text pods-form-ui-field-name-pods-field-cover-id-id" type="hidden" value="2931">

        <ul class="pods-file-meta media-item">
            
            <li class="pods-file-col pods-file-icon">
                <img class="pinkynail" src="http://local-www.apetime.it/wp-content/uploads/2015/01/2523878740_83d0bea717_b5-150x150.jpg" alt="Icon">
            </li>

            <li class="pods-file-col pods-file-name">
                2523878740_83d0bea717_b            </li>

            <li class="pods-file-col pods-file-delete"><a href="#delete">Delete</a></li>

			        </ul>
    </li>

If I remove the “hidden” class from the first < li >, using the inspector, the image appears.

This is the same DOM part taken with theme Twenty Fifteen.

COPY CODE

<li class="pods-file hidden" id="pods-file-20" style="">
        <input name="pods_field_image[20][id]" data-name-clean="pods-field-image-id-id" id="pods-form-ui-pods-field-image-id-id" class="pods-form-ui-field-type-text pods-form-ui-field-name-pods-field-image-id-id" type="hidden" value="20">

        <ul class="pods-file-meta media-item">
            
            <li class="pods-file-col pods-file-icon">
                <img class="pinkynail" src="http://www.scarletpassion.com/wp-content/uploads/2015/01/2523878740_83d0bea717_b1-150x150.jpg" alt="Icon">
            </li>

            <li class="pods-file-col pods-file-name">
                    <input name="pods_field_image[20][title]" data-name-clean="pods-field-image-id-title" id="pods-form-ui-pods-field-image-id-title" class="pods-form-ui-field-type-text pods-form-ui-field-name-pods-field-image-id-title" type="text" value="2523878740_83d0bea717_b" tabindex="2" maxlength="255">
            </li>

            <li class="pods-file-col pods-file-delete"><a href="#delete">Delete</a></li>

			        </ul>
    </li>

In this case the image appears even if there is the same “hidden” class. Could it be a CSS error? Or maybe Kleo is defining “hidden” behaviour in a different way from Twenty Fifteen?

[Author]

Posts