2sxc: Any way for forcing menu to appear Left-To-Right on inside a Right-To-Left div - 2sxc

Question

Good morning,
Is there any way for achieving result as in the attachment?
The Blue one (on the right) is how it is currently displayed.
The Orange one (on the left) is how I want it to be displayed
Current and required
EDIT:
This is the CSHTML snipet:
#using Extensions;
#using ToSic.SexyContent;
#using System.Collections;
#using System.Web.UI;
#using DotNetNuke.Security.Permissions;
<link rel="stylesheet" data-enableoptimizations="true" href="#App.Path/assets/Announcements.css" />
#if ((Dnn.User.IsSuperUser == false) || (Dnn.User.IsInRole("Administrators") == false))
{
<style>
.sc-content-block-quick-insert {
display: none !important;
}
div.sc-cb-highlight-for-insert {
background: none !important;
}
</style>
}
else
{
<style>
.sc-menu-a {
width: 28px!important;
height: 28px!important;
line-height:28px!important;
background-color: #0088f4;
border-style: solid;
box-sizing: content-box;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
color: #fff;
text-align: center;
font-size: 15px;
background-color: purple;
}
</style>
}
<script src="~/DesktopModules/ToSIC_SexyContent/JS/2sxc.api.min.js" data-enableoptimizations="100"></script>
<script src="~/DesktopModules/ToSIC_SexyContent/Js/AngularJS/angular.min.js" data-enableoptimizations="101"></script>
<script src="~/DesktopModules/ToSIC_SexyContent/Js/AngularJS/2sxc4ng.min.js" data-enableoptimizations="110"></script>
#functions
{
public HtmlString GetFiles(ToSic.SexyContent.DynamicEntity dynEntContent, bool bReverse = false)
{
var lFiles = AsAdam(dynEntContent, "Attachments").Files.ToList();
var iFilesCount = lFiles.Count();
var iTmp = 0;
var sRawHtmlString = "";
if (bReverse)
{
lFiles.Reverse();
}
if (iFilesCount > 0)
{
// sRawHtmlString = "« \r\n"; /* "«" */
sRawHtmlString = "« \r\n"; /* "«" */
foreach(var file in lFiles)
{
sRawHtmlString += "\t\t\t\t\t\t<" + $"a href='{#file.Url}'>{#file.FileName}</" + "a>";
sRawHtmlString += ((++iTmp < iFilesCount) ? " ‖\r\n" : "");
}
// sRawHtmlString += "\r\n\t\t\t\t »"; /* "»" */
sRawHtmlString += "\r\n\t\t\t\t\t »"; /* "»" */
}
return (#Html.Raw(sRawHtmlString));
}
}
<div class="app-announcments app-announcments-list">
<h2>
<div id="ulItem_Menu_(U)" name="ulItem_Menu_(U)" style="width: 100%; direction: ltr;">
<table style="width: 100%; padding: 0 5px 0 5px; border: solid 1pt black;" cellpadding="0" cellspacing="0">
<tr style="height: 55px;">
<td style="width: auto;" valign="top">
#if (Dnn.User.IsSuperUser)
{
#Edit.Toolbar(ListContent)
}
#if ((Dnn.User.IsInRole("Announcements")) && (Dnn.User.IsSuperUser == false))
{
#Edit.Toolbar(actions: "new",
contentType: "Announcements",
prefill: new {
UID = #Dnn.User.UserID,
PublishDate = DateTime.Now.ToString("yyyy-MM-dd HH:mm"),
PublishedBy = Dnn.User.FullName
}
)
}
</td>
<td style="text-align: right;">
לוח מודעות
</td>
</tr>
</table>
</div>
</h2>
#foreach(var li in List)
{
var anContent = li.Content;
var sMnuItem = "ulItem_" + anContent.EntityId + "_Menu_" + ((Dnn.User.IsSuperUser) ? "(SU)" : "(U)");
var sAdminCommands = "[ " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"action\" : \"new\"," +
" \"sortOrder\" : 0," +
" \"prefill\" : {" +
" \"UID\" : " + Dnn.User.UserID + "," +
" \"PublishDate\" : \"" + DateTime.Now.ToString("yyyy-MM-dd HH:mm") + "\"," +
" \"PublishedBy\" : \"" + Dnn.User.FullName + "\"" +
" } " +
"}, " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"entityId\" : \"" + anContent.EntityId + "\"," +
" \"action\" : \"edit\"," +
" \"sortOrder\" : 0 " +
"}, " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"entityId\" : \"" + anContent.EntityId + "\"," +
" \"action\" : \"remove\"," +
" \"sortOrder\" : 0 " +
"}, " +
// "{" +
// " \"attributeSetName\" : \"Announcements\"," +
// " \"action\" : \"replace\" " +
// "}, " +
"{" +
" \"entityId\" : \"" + anContent.EntityId + "\"," +
" \"attributeSetName\" : \"Announcements\"," +
" \"action\" : \"publish\"," +
" \"sortOrder\" : 0 " +
"}, " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"action\" : \"more\"," +
" \"sortOrder\" : 0 " +
"}" +
" ]";
var sUserCommandsInAnnouncement = "[ " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"action\" : \"new\"," +
" \"sortOrder\" : 0," +
" \"prefill\" : {" +
" \"UID\" : " + Dnn.User.UserID + "," +
" \"PublishDate\" : \"" + DateTime.Now.ToString("yyyy-MM-dd HH:mm") + "\"," +
" \"PublishedBy\" : \"" + Dnn.User.FullName + "\"" +
" } " +
"}, " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"entityId\" : \"" + anContent.EntityId + "\"," +
" \"action\" : \"edit\"," +
" \"sortOrder\" : 0 " +
"}, " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"entityId\" : \"" + anContent.EntityId + "\"," +
" \"action\" : \"remove\"," +
" \"sortOrder\" : 0 " +
"}, " +
"{" +
" \"entityId\" : \"" + anContent.EntityId + "\"," +
" \"attributeSetName\" : \"Announcements\"," +
" \"action\" : \"publish\"," +
" \"sortOrder\" : 0 " +
"}, " +
"{" +
" \"attributeSetName\" : \"Announcements\"," +
" \"action\" : \"more\"," +
" \"sortOrder\" : 0 " +
"}" +
" ]";
<hr/>
<div class="app-announcments-item sc-element">
<div name="divInfoInAnnouncement">
#if (Dnn.User.IsSuperUser)
{
<!-- ## [Super User] block : BEGIN (line 152) ## -->
<ul id='#sMnuItem' name='#sMnuItem' class='sc-menu' data-toolbar='#Html.Raw(#sAdminCommands)'></ul>
<!-- ## [Super User] block : END (line 154) ## -->
}
#if ((Dnn.User.IsInRole("Announcements")) && (Dnn.User.IsSuperUser == false))
{
<!-- ## [Announcements User] block: BEGIN (line 158) ## -->
<ul id='#sMnuItem' name='#sMnuItem' class='sc-menu' data-toolbar='#Html.Raw(#sUserCommandsInAnnouncement)'></ul>
<!-- ## [Announcements User] block: END (line 160) ## -->
}
</div>
<div class="app-announcments-link" title="#anContent.AnnouncementTitle">
<table class="app-announcments-text" style="width: 100%; padding: 0 10px 10px 10px;" cellpadding="0" cellspacing="0">
<tr>
<td>
<h4>#anContent.AnnouncementTitle</h4>
פורסם על ידי:
#anContent.PublishedBy
</td>
<td valign="top">
<span class="app-announcments-date">#anContent.PublishDate.ToString("yyyy-MM-dd HH:mm")</span>
</td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr>
<td colspan="2">
#Html.Raw(anContent.AnnouncementBody)
</td>
</tr>
<tr>
<td colspan="2">
#if (AsAdam(anContent, "Attachments").Files.Count > 0)
{
<div id="divFiles" name="divFiles" style="height: 1em; font-size: 14pt; text-align: center; background: #f3f3f3; color: black; direction: ltr; padding: 5px 0 5px 0;">
#GetFiles(anContent, false)
</div>
}
</td>
</tr>
</table>
</div>
</div>
} #* foreach(var li in List) *#
</div>
...and the (most of the) CSS - I removed some unrelevant. (Most of the code css is from the original "News - Simple" 2sxc app):
/* Detail Styles */
.app-announcments-detail .app-announcments-image {
/* margin-bottom: 20px; */ border-radius: 4px;
}
.app-announcments-detail-trimmed {
-o-text-overflow: ellipsis; /* Opera */
text-overflow: ellipsis; /* IE, Safari (WebKit) */
overflow: hidden; /* don't show excess chars */
white-space: nowrap; /* force single line */
/* margin-bottom: 25px; */
width: 300px; /* fixed width */
height: 50px; /* Fixed height */
}
/* List Styles */
.app-announcments-item .app-announcments-image {
float: left; width: 38.19% /* Golden Ratio */; /* padding: 0 10px 10px 0; */
}
.app-announcments-item {
padding-bottom: 20px; margin-bottom: 0px;
}
div.app-announcments-link {
display: block; text-decoration: none; color: #666;
/* background-color: #fcfcfc; */ background-color: white;
/* padding: 10px 10px 0 10px; */ overflow: hidden;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease; -o-transition: all 1s ease;
transition: all 1s ease;
}
div.app-announcments-link:hover,
div.app-announcments-link:focus {
border-radius: 6px; /* background-color: #eee; */
background-color: #f3f3f3; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease; transition: all 1s ease;
}
div.app-announcments-link:hover h3,
div.app-announcments-link:focus h3,
div.app-announcments-link:hover h2,
div.app-announcments-link:focus h2 {
color: #000; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease; -o-transition: all 1s ease;
transition: all 1s ease;
}
/* Buttons */
div.app-announcments-button,
.app-announcments-button {
/* padding: 10px; */ background: #666; color: white;
display: inline-block; border-radius: 2px;
}
div.app-announcments-link:hover .app-announcments-button,
div.app-announcments-link:focus .app-announcments-button,
div.app-announcments-button:hover,
div.app-announcments-button:focus {
background: #000; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease; -o-transition: all 1s ease;
transition: all 1s ease;
}
/************************/
table.app-announcments-link {
display: block; text-decoration: none; color: #666;
/* background-color: #fcfcfc; */ background-color: white;
/* padding: 10px 10px 0 10px; */
overflow: hidden; border-radius: 4px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
box-shadow: 0px 0px 10px 0px rgba(204,204,204,1);
-webkit-transition: all 1s ease; -moz-transition: all 1s ease;
-o-transition: all 1s ease; transition: all 1s ease;
}
table.app-announcments-link:hover,
table.app-announcments-link:focus {
border-radius: 6px; /* background-color: #eee; */
background-color: #f3f3f3; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease; transition: all 1s ease;
}
table.app-announcments-link:hover h3,
table.app-announcments-link:focus h3,
table.app-announcments-link:hover h2,
table.app-announcments-link:focus h2 {
color: #000; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease; transition: all 1s ease;
}
/* Buttons */
table.app-announcments-button,
.app-announcments-button {
/* padding: 10px; */ background: #666; color: white;
display: inline-block; border-radius: 2px;
}
table.app-announcments-link:hover .app-announcments-button,
table.app-announcments-link:focus .app-announcments-button,
table.app-announcments-button:hover,
table.app-announcments-button:focus {
background: #000; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease; -o-transition: all 1s ease;
transition: all 1s ease;
}

Answer 1

I assume this is just all css rules. You'll have to override the originals of course - using either a stronger selector (like instead of ".sc-menu {}" use ".sc-menu.sc-ltr {...}" and then you'll have to spend some time fiddling with CSS till it works. Please post your result, so we can include it in 2sxc.