Buy Now
Sign in

semantic ui Modal not rendered properly

Proximate , February 21 at 17:57
P
Proximate
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:
Bildschirmfoto_2018-02-21_um_18.45.02.png
Bildschirmfoto_2018-02-21_um_18.47.39.png
admin
Hi Proximate,
What happens when you apply the latest update ? does it fix any of these issues ?
Best regards
Max
If your main question got answered then please mark the answer using the button!​
​Please let us know if you have any problems with the new forums text editor, we appreciate your feedback!
P
Proximate
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