Forums

semantic ui Modal not rendered properly

Proximate 21 Feb, 2018
Edit: Problem appears in the Backend

I have successfully created a modal which contains a form to add elements BUT if i use the Modal Code from here inside a view (Custom HTML) Element it renders it like attached. Can someone Please give me a Hint what i can do? Is it because of an old version of semantic ui?

Other Question: The Joomla! integrated Bootstrap Solution is also not working (at all) when used on a Chronoconnectivity Event Page is this already known?

Bootstrap Example Code (no effect on click)
<?php
$modal_params = array();
&nbsp;&nbsp;$modal_params['title'] = 'This is the title';
&nbsp;&nbsp;$modal_params['backdrop'] = "false";
&nbsp;&nbsp;$modal_params['footer'] = '<p>This is the footer.</p>';
$body = '<div><div>Something</div><p>An image and some text.</p></div>'; &nbsp;&nbsp;
?>
<a href="#myModal" class="btn" data-toggle="modal"> Click here to see my image with a caption.</a>

<?php echo JHTML::_('bootstrap.renderModal', 'myModal', $modal_params, $body); ?>
And the Semantic ui Modal as Screenshots attached.
  1. The Content Section is to wide,
  2. the height of the Select Dropdown is too large
  3. and the Close Icon are missplaced (think because of the Wide Content)
the height of the Select Dropdown is too large
and the Close Icon are missplaced (think because of the Wide Content)

I've tried a couple of things but when i use the Original Structure Infos from Semantic UI it looks like you see below:



Max_admin 03 Mar, 2018
Hi Proximate,

What happens when you apply the latest update ? does it fix any of these issues ?

Best regards
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
Proximate 07 Mar, 2018
Hi Max
sorry for the late response, yes the Rendering Issue is still here - i have created a a little CSS Override to bring a better look and feel:
<style type="text/css">
.ui.selection.dropdown{min-height:0 !important;}
</style>
I solved the overlapping width issue with a width Class for the input fields (eight wide)...
So it looks ok for the moment but the "issue" still exists.

Kind regards
Proximate
This topic is locked and no more replies can be posted.