As you can see in the image, there are no space between the border and the top of the <aui:container>.
I have already try different method to add spacing by css like padding or margin, but nothing happend.
Could you help me to add space where the arrows point in the image ?
Thank's
Here the jsp file :
<%#page import="xxx.CreatePortlet"%>
<%# include file="init.jsp"%>
<html>
<body class="borderBlackOne">
<div class="bottomLine" id="MainTitle" style="text-align: center">
<h1>Créer une REP</h1>
</div>
<aui:form action="<%=updateRepAction%>" method="post" id="updateForm" name="<portlet:namespace/>updateForm">
<aui:fieldset>
<aui:container cssClass="borderBlackOne">
<aui:container cssClass="paddingTop"> <!-- Don't work -->
<aui:row>
<aui:col cssClass="alignRight" width="<%=25%>">
<span class="bold black"><liferay-ui:message key="manage.nameLabel" /></span>
</aui:col>
<aui:col width="<%=75%>">
<aui:input cssClass="" name="repName" required="true" label="" type="text" value="" />
</aui:col>
</aui:row>
</aui:container>
<!-- Nom de l'auteur -->
<aui:container>
<aui:row>
<aui:col cssClass="alignRight" width="<%=25%>">
<span class="bold black"><liferay-ui:message key="manage.authorNameLabel" /></span>
</aui:col>
<aui:col width="<%=75%>">
<span class="fill">${authorName}</span>
</aui:col>
</aui:row>
</aui:container>
<!-- Commentaire -->
<aui:container cssClass="">
<aui:row>
<aui:col cssClass="alignRight" width="<%=25%>">
<span class="bold black"><liferay-ui:message key="manage.comentaryLabel" /></span>
</aui:col>
<aui:col width="<%=75%>">
<aui:input cssClass="" name="comentary" label="" type="textarea" value="" />
</aui:col>
</aui:row>
</aui:container>
<!-- Configuration services -->
<aui:container>
<aui:row>
<aui:col cssClass="alignRight" width="<%=25%>">
<span class="bold black"><liferay-ui:message key="manage.ServiceLabel" /></span>
</aui:col>
<aui:col width="<%=75%>">
<aui:container cssClass="borderBlackOne">
<aui:row>
<aui:col cssClass="alignRight" width="<%=25%>">
<span class="bold black"><liferay-ui:message
key="manage.rep.servicesLabel" /></span>
</aui:col>
<aui:col width="<%=75%>">
<aui:input name="comentary" label="" type="textarea" value="" />
</aui:col>
</aui:row>
<aui:row>
<aui:col cssClass="alignRight" width="<%=25%>">
<span class="bold black"><liferay-ui:message
key="manage.SystemeLabel" /></span>
</aui:col>
<aui:col width="<%=75%>">
<aui:input name="comentary" label="" type="textarea" value="" />
</aui:col>
</aui:row>
</aui:container>
</aui:col>
</aui:row>
</aui:container>
<aui:button-row cssClass="alignRight">
<aui:button type="cancel" value="Annuler"></aui:button>
<aui:button type="submit" value="Ok"></aui:button>
</aui:button-row>
</aui:container>
</aui:fieldset>
</aui:form>
</body>
</html>
And here are the css file :
/* Don't work */
.create .paddingTop {
margin-top: 5%
}
/* Don't work */
.create .paddingBottom {
margin-bottom: 25px;
}
/* Don't work */
.create .marges {
margin: 25px 0px 50px 0px;
}
.create .black {
color: black;
}
.create .bold {
font-weight: bold;
}
.create .alignRight {
text-align: right;
}
.create .borderBlackOne {
border: 1px solid black;
}
aui:container and aui:row generate HTML div element, therefore margin-x should work. I think, the problem might be with the CSS selectors you have defined or they may be conflicting.
Try:
1. Adding !important after the CSS properties (e.g. margin-top: 5% !important;). OR
2. Remove .create from CSS selectors. OR
3. Both 1 & 2.
Related
I am new to web devolopment, i want to add carousel in my project so i have copied this basic template from bootstrap docs, in desktop view it working but in mobile view it showing a unwanted black space and captions missing, please some one help
I am new to web devolopment, i want to add carousel in my project so i have copied this basic template from bootstrap docs, in desktop view it working but in mobile view it showing a unwanted black space and captions missing, please some one help
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<section class="home">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{% static 'img/slide-1.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'img/slide-2.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'img/slide-3.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</body>
</html>
custom.css
.carousel-item {
height: 24rem;
background: #000;
}
.carousel-item>img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: 100%;
opacity: 0.5;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.carousel-caption{
bottom: 25%;
}
.carousel-caption h5{
font-size: 30px;
margin-bottom: 20px;
}
.carousel-caption p{
font-size: 20px;
}
To make testing easier i added some grey color to the background (you can remove it later).
What I think you are missing, is to add the Bootstrap scripts, you can see the code for an example.
Here you have how to do it, from Bootstrap documentation.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
>>>>>>>>>> SCRIPTS HERE <<<<<<<<<<<<<
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
>>>>>>>>>>> UP HERE <<<<<<<<<<<<<<<<<
<title></title>
</head>
<body style="background-color: gray">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="IMAGE 1">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="IMAGE 2">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="IMAGE 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>
Regarding your question about "where" to put the text, after the images will be ok.
Here you have a working example (from one of my portfolio projects):
<!-- Testimonials -->
<section id="testimonials" class="colored-section">
<div id="testimonials-carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active container-fluid">
<h2 class="testimonial-text">I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<a class="carousel-control-prev" href="#testimonials-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#testimonials-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
</html>
Please, mark the answer as accepted ;)
below things worked for me
<div class="carousel-caption d-block">
Instead of
<div class="carousel-caption d-none d-md-block">
read here display properties
I have an InputText which has a function onChange. This function triggers an HTML component with partial refresh. EveryClass in this DIV works great.
but If refreshID is a XPages Design Element Partial Refresh works fine but CSS class does not. For example. In this examle the div which has class named "card", when i click on it It collapse and expand. When The page loaded first It works great but after partial refresh Collapsing and expanding does not work. I do not want to use full refresh because I have added Loading indicator which works with partial refresh and does not work with full refresh. Is there any way to solve this problem. If anyone has a clue I can share full codes..
Thank You
<xp:div id="Results" styleClass="card">
<div class="card-header bg-transparent header-elements-inline">
<span class="card-title font-weight-semibold">
Find What you are looking for...
</span>
<div class="header-elements">
<div class="list-icons">
<i class="icon-help"></i>
<a class="list-icons-item" data-action="collapse"> </a>
<a class="list-icons-item" data-action="remove"> </a>
</div>
</div>
</div>
<div class="card-body">
<div class="form-group form-group-feedback form-group-feedback-left">
<xp:inputText style="width:100%;" id="CompanyName" value="#{viewScope.CompanyName}" styleClass="form-control border-success-300 border-1"> <xp:this.attrs>
<xp:attr name="placeholder" value="What is it You looking for?">
</xp:attr>
</xp:this.attrs>
<xp:typeAhead mode="full" minChars="2" ignoreCase="true" valueList="#{javascript:getCustomersList();}"> </xp:typeAhead>
<xp:eventHandler event="onchange" submit="true" refreshMode="partial"
refreshId="Results"> <xp:this.action><![CDATA[#{javascript:getSearchResults(viewScope.CompanyName)}]]></xp:this.action>
</xp:eventHandler></xp:inputText>
<div class="form-control-feedback"> <i class="mt-2 icon-reading text-muted"> </i> </div> </div>
<div class="">
<xp:comboBox id="Staff" value="#{viewScope.Staff}" styleClass="form-control"> <xp:this.disabled><![CDATA[#{javascript:viewScope.CompanyName=="" || viewScope.CompanyName==null; }]]></xp:this.disabled>
<xp:selectItems> <xp:this.value><![CDATA[#{javascript:viewScope.Staff}]]></xp:this.value> </xp:selectItems>
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="Results"> <xp:this.action><![CDATA[#{javascript:var fName = viewScope.CompanyName;var uName = viewScope.Staff;
getUrunDetails(fName, uName)}]]></xp:this.action> </xp:eventHandler></xp:comboBox></div><div class="">
<xp:label value="Lastest Order Date:" id="label3" styleClass="col-form-label"></xp:label></div> <div class=""><xp:inputText id="LatestOrderDate" value="#{viewScope.LatestOrderDate}" styleClass="text-right form-control border-success-300 border-1" disabled="true">
</xp:inputText> </div> </div>
</xp:div>
UPDATE-2
<div id="view:_id1:_id1766:Results" class="card">
<div class="card-header bg-transparent header-elements-inline"><span class="card-title font-weight-semibold">Ara...</span>
<div class="header-elements"><div class="list-icons"><a class="list-icons-item" href="#"><i class="icon-help"></i></a>
<a class="list-icons-item" data-action="collapse"></a><a class="list-icons-item" data-action="remove"></a></div></div></div>
<div class="card-body"><div class="form-group form-group-feedback form-group-feedback-left">
<span id="view:_id1:_id1766:_id2717" dojotype="ibm.xsp.widget.layout.data.TypeAheadReadStore" jsid="view__id1__id1766__id2717" minchars="2" mode="full"></span>
<div class="dijit dijitReset dijitInline dijitLeft dijitTextBox dijitComboBox dijitValidationTextBox form-control border-success-300 border-1" id="widget_view:_id1:_id1766:FirmaAdi" role="combobox" aria-haspopup="true" data-dojo-attach-point="_popupStateNode" lang="en" widgetid="view:_id1:_id1766:FirmaAdi" style="width: 100%;"><div class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer" data-dojo-attach-point="_buttonNode" role="presentation" style="display: none;"><input class="dijitReset dijitInputField dijitArrowButtonInner" value="▼ " type="text" tabindex="-1" readonly="readonly" role="button presentation" aria-hidden="true"></div><div class="dijitReset dijitValidationContainer"><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " type="text" tabindex="-1" readonly="readonly" role="presentation"></div><div class="dijitReset dijitInputField dijitInputContainer"><input class="dijitReset dijitInputInner" name="view:_id1:_id1766:FirmaAdi" type="text" autocomplete="off" data-dojo-attach-point="textbox,focusNode" role="textbox" tabindex="0" id="view:_id1:_id1766:FirmaAdi" value="DÖKTAŞ DÖKÜMCÜLÜK TİC VE SAN. A.Ş." aria-invalid="false"><span class="dijitPlaceHolder dijitInputField" style="display: none;">Ne Aramıştınız?</span></div></div><div class="form-control-feedback"><i class="mt-2 icon-reading text-muted"></i></div></div><div><select id="view:_id1:_id1766:Urun" name="view:_id1:_id1766:Urun" class="form-control" size="1"> <option value="Staff 0</option>
<option value="Staff 1</option>
<option value="Staff 2</option>
<option value="Staff 3</option>
</select></div><div>
<label id="view:_id1:_id1766:label3" class="col-form-label">Son Sipariş:<a id="view:_id1:_id1766:link14" href="http://portal/xspFrmProposal.xsp?action=editDocument&documentId=FD0F115C68C2BD52432586950040A419" class="text-right mr-2 ml-2 r text-primary list-icons-item" target="_blank" data-popup="popover" data-trigger="hover" data-content="DÖKTAŞ DÖKÜMCÜLÜK TİC VE SAN. A.Ş. ye ait Sözleşme Formuna git..." data-original-title="Müşteri Bilgilerine Git" data-placement="bottom"><i class="icon-link2"></i></a></label></div><div><input type="text" value="11.03.2021 15:26:49" id="view:_id1:_id1766:SiparisTarihi" name="view:_id1:_id1766:SiparisTarihi" disabled="disabled" class="text-right form-control border-success-300 border-1"></div><div><label class="col-form-label">Son Teklif:<a id="view:_id1:_id1766:link12" href="http://portal.acarermetal.com.tr/ays/crm.nsf/xspFrmTeklif.xsp?action=editDocument&documentId=38ED7907DE9CFAD943258693003E7D3F" class="text-right mr-2 ml-2 r text-primary list-icons-item" target="_blank" data-popup="popover" data-trigger="hover" data-content="DÖKTAŞ DÖKÜMCÜLÜK TİC VE SAN. A.Ş. ye ait son teklif formuna git..." data-original-title="Müşteri Bilgilerine Git" data-placement="bottom"><i class="icon-link2"></i></a></label></div><div><input type="text" value="09.03.2021" id="view:_id1:_id1766:TeklifTarihi" name="view:_id1:_id1766:TeklifTarihi" disabled="disabled" class="text-right form-control border-success-300 border-1"></div><div><label class="col-form-label">Son Teklif Verilen Malzemeler:</label><textarea name="view:_id1:_id1766:Urunt" data-dojo-attach-point="focusNode,containerNode,textbox" autocomplete="off" class="dijitTextBox dijitTextArea dijitExpandingTextArea form-control elastic elastic-destroy dijitTextBoxDisabled dijitTextAreaDisabled dijitExpandingTextAreaDisabled dijitDisabled" tabindex="-1" lang="en" disabled="" aria-disabled="true" id="view:_id1:_id1766:Urunt" rows="1" widgetid="view:_id1:_id1766:Urunt" value="2 Ton FEMO 16995usd
" style="overflow: auto hidden; box-sizing: border-box; min-height: 72px; height: 68px;"></textarea></div></div></div>
I have a basic MathJax code of
<script type="text/javascript">
MathJax.Hub.Config({
extensions: ["tex2jax.js", "TeX/AMSmath.js"],
jax: ["input/TeX", "output/SVG"],
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<div>$$a = b + c$$</div>
I expect the formula should be replaced with an SVG code, but the result is the same as HTML output, MathML codes:
<div>
<span class="MathJax_Preview" style="color: inherit; display: none;"></span>
<span class="mjx-chtml MJXc-display" style="text-align: center;">
<span id="MathJax-Element-1-Frame" class="mjx-chtml MathJax_CHTML" tabindex="0" data-mathml="
<math
xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>a</mi>
<mo>=</mo>
<mi>b</mi>
<mo>+</mo>
<mi>c</mi>
</math>" role="presentation" style="font-size: 113%; text-align: center; position: relative;">
<span id="MJXc-Node-1" class="mjx-math" aria-hidden="true">
<span id="MJXc-Node-2" class="mjx-mrow">
<span id="MJXc-Node-3" class="mjx-mi">
<span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.224em; padding-bottom: 0.279em;">a</span>
</span>
<span id="MJXc-Node-4" class="mjx-mo MJXc-space3">
<span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.058em; padding-bottom: 0.335em;">=</span>
</span>
<span id="MJXc-Node-5" class="mjx-mi MJXc-space3">
<span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.279em;">b</span>
</span>
<span id="MJXc-Node-6" class="mjx-mo MJXc-space2">
<span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.279em; padding-bottom: 0.445em;">+</span>
</span>
<span id="MJXc-Node-7" class="mjx-mi MJXc-space2">
<span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.224em; padding-bottom: 0.279em;">c</span>
</span>
</span>
</span>
<span class="MJX_Assistive_MathML MJX_Assistive_MathML_Block" role="presentation">
<math
xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>a</mi>
<mo>=</mo>
<mi>b</mi>
<mo>+</mo>
<mi>c</mi>
</math>
</span>
</span>
</span>
<script type="math/tex; mode=display" id="MathJax-Element-1">a = b + c</script>
</div>
How can I get the output as SVG vector elements?
MathJax configuration script should be type of text/x-mathjax-config not text/javascript. Moreover ?config=TeX-MML-AM_CHTML seems to be somehow overriding the output/SVG. I used ?config=default. You can get more information about the configuration files here
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js", "TeX/AMSmath.js"],
jax: ["input/TeX", "output/SVG"],
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=default"></script>
<div>$$a = b + c$$</div>
In case anyone is still using MathJax 2.7.x, modifying the config parameter will work for rendering svg on initial load.
So change TeX-AMS_CHTML to TeX-AMS_SVG
or change TeX-MML-AM_CHTML to TeX-MML-AM_SVG
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_SVG"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG"></script>
I have created a view which is rendered in the kendo window. I have the cancel button on the view. I would like to close the window When I click the cancel button. I have written the code to do it. But nothing seems happening.
Please see the code and screen shot below
Kendo window code
$("#contextMenu").kendoContextMenu({
target: "#grid",
alignToAnchor: false,
select: function (e) {
var selectedItem = e.item; // check this item is add or edit and then open the kendo window
if ($(selectedItem).text() == 'Add' || $(selectedItem).text() == 'Edit') {
var accessWindow = $("#addEdit").kendoWindow({
actions: {}, /*from Vlad's answer*/
draggable: true,
height: "700px",
modal: true,
resizable: false,
title: "Add new User",
width: "800px",
visible: false,
}).data("kendoWindow").center().open();
$("#btnCancel").click(function () {
$(this).closest("[data-role=window]").data("kendoWindow").close();
});
$("#language").kendoDropDownList({
filter: "startswith",
dataTextField: "LanguageDescription",
dataValueField: "LanguageCode",
dataSource: language
//dataSource: {
// type: "odata",
// serverFiltering: true,
// transport: {
// read: {
// url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
// }
// }
//}
});
$("#country").kendoDropDownList({
filter: "startswith",
dataTextField: "CountryDescription",
dataValueField: "CountryCode",
dataSource: country
//dataSource: {
// type: "odata",
// serverFiltering: true,
// transport: {
// read: {
// url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
// }
// }
//}
});
}
}
});
The view that is rendered in the kendo window
<div id="addEdit" style="width 100%; height 100%; background-color #fff;">
<div class="demo-section k-content">
<ul class="fieldlist">
<li>
<label for="simple-input" >Employee Number</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">ForeName</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">ForeName</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Surname</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Preferred Name</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input" class="form-horizontal">Language</label>
<input id="language" class="form-horizontal" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Country</label>
<input id="country" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Time Zone</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Domain</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Network Id</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Email Address</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Status</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<button id="btnCancel" class="k-button">Cancel</button>
<button class="k-button k-primary">Save</button>
</li>
</ul>
<style>
.fieldlist {
margin: 0 0 -2em;
padding: 0;
}
.fieldlist li {
list-style: none;
padding-bottom: 2em;
}
.fieldlist label {
display: block;
padding-bottom: 1em;
font-weight: bold;
text-transform: uppercase;
font-size: 10px;
color: #444;
}
</style>
</div>
</div>
This has been resolved. I had to add the following jquery to fix it
$("#btnCancel").click(function () {
$(this).closest("[data-role=window]").data("kendoWindow").close();
});
I have closed "Current Users" portlet from the demo installation and now can't open it back -- there is no such a portlet in a list.
How one can have it back on page?
Thanks.
The "Current Users" portlet is in fact just a "Web Content Display" portlet that's been renamed. So if you add a "Web Content Display" portlet on to your page and set then find the piece of Web Content called: "Welcome Login" (it's ID on mine was 10232, but this may be different for you) and set that as the content to be displayed you'll get it back. Or you can add a new piece of web content with the code below:
<p><style type="text/css"> .loginuser { margin-top:5px; width:100%; display:block; text-decoration:none; padding: 2px; padding-bottom: 10px; } .loginuser h2 { margin:0; font-size:14px; /*text-align:center;*/ } .loginuser a { display:block; padding-left: 20px; margin-left: 95px; margin-top: 2px; } .loginuser img { padding:2px; margin-right: 5px; } .loginuser:hover { background-color: #CED9E2; /*cursor:pointer;*/ } .express_login { background: url("/html/icons/login.png") no-repeat; } .public_pages { background: url("/html/themes/classic/images/common/view_tasks.png") no-repeat; } </style></p>
<form name="loginadmin" method="post" action="/web/guest/home">
<input type="hidden" value="58" name="p_p_id" /> <input type="hidden" value="1" name="p_p_lifecycle" /> <input type="hidden" value="view" name="p_p_mode" /> <input type="hidden" value="maximized" name="p_p_state" /> <input type="hidden" value="/login/login" name="_58_struts_action" /> <input type="hidden" value="bruno#7cogs.com" name="_58_login" /> <input type="hidden" value="bruno" name="_58_password" />
<div title="Login: bruno#7cogs.com, Password: bruno" class="loginuser">
<div style="float: left; padding-right: 4px;" class="user-profile-image"><img width="80" class="avatar" alt="" src="/image/user_portrait?screenName=bruno&companyId=10112&t=1228845375900" /></div>
<h2>Bruno (Admin)</h2>
<div>The admin has full control over the entire portal, allowing modification and creation of users, communitities, and roles. <a class="public_pages" href="/web/bruno">View bruno's public page</a> <a onclick="document.loginadmin.submit();return false;" class="express_login" href="#">Login as bruno</a></div>
</div>
</form>
<form name="loginrich" method="post" action="/web/guest/home">
<input type="hidden" value="58" name="p_p_id" /> <input type="hidden" value="1" name="p_p_lifecycle" /> <input type="hidden" value="view" name="p_p_mode" /> <input type="hidden" value="maximized" name="p_p_state" /> <input type="hidden" value="/login/login" name="_58_struts_action" /> <input type="hidden" value="richard#7cogs.com" name="_58_login" /> <input type="hidden" value="richard" name="_58_password" />
<div title="Login: richard#7cogs.com, Password: richard" class="loginuser">
<div style="float: left; padding-right: 4px;" class="user-profile-image"><img width="80" class="avatar" alt="" src="/image/user_portrait?screenName=richard&companyId=10112&t=1228845375871" /></div>
<h2>Richard Publisher</h2>
<div>Richard has article submission rights for the content management system. <a class="public_pages" href="/web/richard">View richard's public page</a> <a onclick="document.loginrich.submit();return false;" class="express_login" href="#">Login as richard</a></div>
</div>
</form>
<form name="loginmichelle" method="post" action="/web/guest/home">
<input type="hidden" value="58" name="p_p_id" /> <input type="hidden" value="1" name="p_p_lifecycle" /> <input type="hidden" value="view" name="p_p_mode" /> <input type="hidden" value="maximized" name="p_p_state" /> <input type="hidden" value="/login/login" name="_58_struts_action" /> <input type="hidden" value="michelle#7cogs.com" name="_58_login" /> <input type="hidden" value="michelle" name="_58_password" />
<div title="Login: michelle#7cogs.com, Password: michelle" class="loginuser">
<div style="float: left; padding-right: 4px;" class="user-profile-image"><img width="80" class="avatar" alt="" src="/image/user_portrait?screenName=michelle&companyId=10112&t=1228845375823" /></div>
<h2>Michelle Editor</h2>
<div>Michelle has control over the staging and layout of all articles as well as publishing rights for workflow and the content management system. <a class="public_pages" href="/web/michelle">View michelle's public page</a> <a onclick="document.loginmichelle.submit();return false;" class="express_login" href="#">Login as michelle</a></div>
</div>
</form>
<form name="loginjohn" method="post" action="/web/guest/home">
<input type="hidden" value="58" name="p_p_id" /> <input type="hidden" value="1" name="p_p_lifecycle" /> <input type="hidden" value="view" name="p_p_mode" /> <input type="hidden" value="maximized" name="p_p_state" /> <input type="hidden" value="/login/login" name="_58_struts_action" /> <input type="hidden" value="john#7cogs.com" name="_58_login" /> <input type="hidden" value="john" name="_58_password" />
<div title="Login: john#7cogs.com, Password: john" class="loginuser">
<div style="float: left; padding-right: 4px;" class="user-profile-image"><img width="80" class="avatar" alt="" src="/image/user_portrait?screenName=john&companyId=10112&t=1228845375887" /></div>
<h2>John Regular User</h2>
<div>John is a user with minimum rights within the portal.
<div><a class="public_pages" href="/web/john">View john's public page</a> <a onclick="document.loginjohn.submit();return false;" class="express_login" href="#">Login as john</a></div>
</div>
</div>
</form>
Hope this helps!