I have a drop down menu under a bell icon that displays notifications but when there is no data available for it, it displays this on click :
my haml :
%nav.navbar.navbar-default
.container
.navbar-brand= link_to "wat", root_path
- if user_signed_in?
%ul.nav.navbar-nav.navbar-right
%li.nav-item.btn-group{"data-behavior"=>"notifications"}
%a#dropdownMenu1.dropdown-toggle.nav-link{"aria-expanded" => "false", "aria-haspopup" => "true", "data-behavior" => "notifications-link", "data-toggle" => "dropdown", :type => "button"}
= fa_icon "bell"
%span.notifs{"data-behavior" => "unread-count"}
.dropdown-menu{"aria-labelledby" => "dropdownMenu1", "data-behavior" => "notification-items"}
How to remove the little rectangle ?
Check if has data before add .dropdown-menu div
- if hasData?
.dropdown-menu{"aria-labelledby" => "dropdownMenu1", "data-behavior" => "notification-items"}
Related
Hello I'm developing an Elementor plugin that I have a transform setting in my widget like this :
$repeater->add_responsive_control(
'rp_translatex_header' ,
[
'label' => esc_html('Header Translate X ') ,
'type' => \Elementor\Controls_Manager::NUMBER ,
'devices' => [ 'desktop', 'tablet', 'mobile' ],
'min' => -100,
'max' => 100,
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}} hth' => 'transform:translate({{VALUE}}vw,{{rp_translatey_header.VALUE}}vh)',
]
]
);
in selectors I use another control value for translateY , this work well until the responsive mode !
on mobile or tablet the translateY value that come from another control doesn't work and return the desktop value (form target control) for fixing this I should use rp_translatey_header_mobile.VALUE for getting mobile mode value !
but this is not my ideal way to fix this and I'm sure that is a way for doing this I want something like :
'selectors' => [
// for normal mode (desktop)
'{{WRAPPER}} {{CURRENT_ITEM}} div' =>
'transform:translate({{VALUE}}vw,{{rp_translatey_header.VALUE}}vh)',
// for mobile mode
'{{WRAPPER}} {{CURRENT_ITEM}} div' =>
'transform:translate({{VALUE}}vw,{{rp_translatey_header_mobile.VALUE}}vh)',
]
I can get value by {{your_control_id.VALUE}} very well by I have problem in responsive mode , {{your_control_id.VALUE}} just return the value on desktop and in mobile mode it will return desktop value again ! what should I do ? with using your_control_id_mobile the proplem will solve but i want to use all mode value ! how can i tell to control and selector in which screen use desktop and mobile
I find the solution !
i
I added two more selector and just before the {{WRAPPER}} I added (mobile ) / (tablet) /(desktop ) like this :
'selectors' => [
'(desktop){{WRAPPER}} {{CURRENT_ITEM}} div' => 'transform:translate({{rp_translatex_text.VALUE}}vw,{{VALUE}}vh)',
'(tablet){{WRAPPER}} {{CURRENT_ITEM}} div' => 'transform:translate({{rp_translatex_text_tablet.VALUE}}vw,{{VALUE}}vh)',
'(mobile){{WRAPPER}} {{CURRENT_ITEM}} div' => 'transform:translate({{rp_translatex_text_mobile.VALUE}}vw,{{VALUE}}vh)',
] ,
and for each responsive mode get the responsive id like your_id_mobile.VALUE !
how do I enable the Rich Text Editor for a custom content element in TYPO3 8.7?
I tried
$GLOBALS['TCA']['tt_content']['types']['myCustomElement'] = array('showitem' => '--palette--;
LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.general;
general,header,subheader,header_link,bodytext,
richtext:rte_transform[flag=rte_enabled|mode=ts_css],rte_enabled;
image,--div--;
LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:tabs.appearance,--palette--;
LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.frames;
frames,--div--;
LLL:EXT:cms/locallang_ttc.xlf:tabs.access,--palette--;
LLL:EXT:cms/locallang_ttc.xlf:palette.visibility;
visibility,--palette--;
LLL:EXT:cms/locallang_ttc.xlf:palette.access;
access,--div--;
LLL:EXT:lang/locallang_tca.xlf:sys_category.tabs.category, categories, tx_gridelements_container, tx_gridelements_columns');
and
$GLOBALS['TCA']['tt_content']['types']['myCustomElement']['columnsOverrides']['bodytext']['defaultExtras'] = 'richtext[*]:rte_transform[mode=ts_css]';
in TCA/Overrides in my Extension. What am I missing?
I have improve your code and its work properly now
$myfield=[
'showitem' => '
--palette--; LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.general; general,header,subheader,header_link,bodytext,image,
--div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:tabs.appearance,
--palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.frames;frames,
--div--;LLL:EXT:cms/locallang_ttc.xlf:tabs.access,
--palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.visibility;visibility,
--palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.access;access,
--div--;LLL:EXT:lang/locallang_tca.xlf:sys_category.tabs.category, categories, tx_gridelements_container, tx_gridelements_columns
',
'columnsOverrides' => [
'bodytext' => [
'config' => [
'enableRichtext' => true,
'richtextConfiguration' => 'default'
]
]
]
];
And
$GLOBALS['TCA']['tt_content']['types']['myCustomElement']=$myfield;
May It will help you!!
The RTE in TYPO3 comes from an TYPO3-System-Extension called rte_ckeditor. Somehow I managed to deactivate it. After reactivating it I used the following in my TCA:
$GLOBALS['TCA']['tt_content']['types']['myCustomElement'] = array('showitem' =>'--palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.general;general,header,subheader,header_link,bodytext,image,--div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:tabs.appearance,--palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.frames;frames,--div--;LLL:EXT:cms/locallang_ttc.xlf:tabs.access,--palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.visibility;visibility,--palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.access;access,--div--;LLL:EXT:lang/locallang_tca.xlf:sys_category.tabs.category, categories, tx_gridelements_container, tx_gridelements_columns');
$GLOBALS['TCA']['tt_content']['types']['myCustomElement']['columnsOverrides']['bodytext']['defaultExtras'] = 'richtext[*]:rte_transform[mode=ts_css]';
I am using haml.erb file. I would like to add space between two buttons in UI. Now the two buttons are appearing one after one without space. How can i do?
= link_to :back, :class => "btn btn-success", :href => '/pt_setup' do
%i.icon-arrow-left.icon-white
Back // does not workout
=link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success'
you can add margin left on second button. you can add class on second button e.g
=link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success left-margin'
and then you can add css in your haml file
:css
.left-margin { margin-left: 2px }
Or you can add inline css to one of these buttons.
As you are using Bootstrap
Wrap your buttons in a div with class='col-xs-3' (for example).
Add class="btn-block" to your buttons.
Note: No need to use extra css unnecessary
Your current code puts a space behind the text 'Back', which is inside your link/button, so of course this will not have any affect on the spacing between the buttons themselves.
It has been a while since using haml but something along the lines of:
= link_to :back, :class => "btn btn-success", :href => '/pt_setup' do
%i.icon-arrow-left.icon-white
Back
= link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success'
Should work in your case.
However, why leave layout / styling to your template at all? use CSS for organizing your layout, put a margin on the right side of .btn class elements, or add a new custom button class and add the margin to limit the scope of buttons affected if you don't want a global margin setting on all buttons.
Try:
= link_to :back, :class => "btn btn-success", :href => '/pt_setup' do
%i.icon-arrow-left.icon-white
Back // does not workout
=link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success', :style => 'margin-left:10px;'
If you don't want to add a css for spacing. You can add ">" at the end of your brackets for space before and "<" for space after.
Example:
%form
%input{name: "search", placeholder: "Text Here", type: "text"}
%button{type: "submit"}>
%i.fa.fa-search
Will space before the button, separating it from the input text box
Or Equivalently:
%form
%input{name: "search", placeholder: "Text Here", type: "text"}<
%button{type: "submit"}
%i.fa.fa-search
Will space after the input box
I have a Kendo Grid and it the default CSS background-color or 'text' Color are what always display.
I was able to override the background colors with lines 1 & 2, however, it just replaced the colors. What I need to to be able to set the color based on the "InTruck" Boolean field.
I tried lines 5 and 6, and the html mark up is correctly updated and sometimes I see it flash the correct color before it is reset to the defaults. I have also tried adding in !important in rows 3 and 5, still no luck. Something seems to be setting the style AFTER everything is done using the kendo/telerik css. How do I stop that?
<style>
1 /*.k-grid-content>table>tbody>tr{background-color:lightgreen;}*/
2 /*.k-grid-content>table>tbody>.k-alt{background-color:red;}*/
3 .IN{color:lightgreen;}
</style>
<div id="divSearchResults">
#(Html.Kendo().Grid((IEnumerable<Models.SearchResult>)Model.SearchResults)
4 // .Events(ev => ev.DataBound("Grid_onRowDataBound"))
5 // .RowAction(row => { if (row.DataItem.InTruck) row.HtmlAttributes["style"] = "background-color:lightgreen"; else row.HtmlAttributes["style"] = "background-color:red !important"; })
.Name("grid")
6 .RowAction(row =>
{
if (row.DataItem.InTruck)
{
row.HtmlAttributes["class"] = "IN";
}
})
.DataSource(ds => ds.Ajax()
.PageSize(Constants.MaxSearchReults)
.Model(mod =>
{
mod.Id(m => m.ID);
mod.Field(p => p.Name).Editable(false);
mod.Field(p => p.CarrierCode).Editable(false);
mod.Field(p => p.CityState).Editable(false);
mod.Field(p => p.Phone).Editable(false);
}))
.Columns(columns =>
{
columns.Template(#<text></text>).ClientTemplate("<input type='checkbox' #= IsSelected ? checked='checked':'' # class='chkbx' value='#= CarrierID#' name='SelectedArea' />")
.HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width(20);
columns.Bound(p => p.Name).Filterable(false).Width(100);
columns.Bound(p => p.CarrierCode).Filterable(false).Width(75);
columns.Bound(p => p.CityState).Filterable(false).Width(100);
columns.Bound(p => p.Phone).Filterable(false).Width(75);
})
.Editable(ed => ed.Mode(GridEditMode.InCell))
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
)
</div>
I never did figure out how to do exactly what I wanted, however, this solution has the same results and I think it looks better and easier on the eyes than what was asked for. It will set the color behind the checkbox so there is an obvious color difference but it isn't gaudy.
.Columns(columns =>
{
columns.Template(#<text></text>)
.ClientTemplate("<span style='float:left; width:100%; background:#= InTruckMate ? \"lightgreen\" : \"palevioletred\"#'><input type='checkbox' #= IsSelected ? checked='checked':'' # class='chkbx' value='#= CarrierID#' name='SelectedArea' /></span>")
.HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>")
.Width(25);
columns.Bound(p => p.Name).Filterable(false).Width(100);
My grid has 5 data columns and 1 command column (update/delete)
the column separator between command column and last data column is missing, making everything shift when entering inline edit mode.
Any ideas what am I doing wrong ?
this is the grid's view code:
<%=
Html.Telerik().Grid<ActivityPOCO>()
.Name("ActivityGrid")
.DataKeys(dataKeys =>
{
dataKeys.Add(e => e.ActivityID);
}
.ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Image))
.DataBinding(dataBinding =>
{
dataBinding.Ajax() //Ajax binding
.Select("SelectActivityGridAjax", "Activity")
.Insert("InsertActivityGridAjax", "Activity")
.Update("UpdateActivityGridAjax", "Activity"
.Delete("DeleteActivityGridAjax", "Activity");
})
.Columns(c =>
{
c.Bound(o => o.ActivityID).Title("ID").ReadOnly(true).Width(30);
c.Bound(o => o.ActivityName).Title("NAME").Width(130);
c.Bound(o => o.ActivityTimeHours).Title("TIME").Width(50);
c.Bound(o => o.Cost).Title("COST").Width(100);
c.Bound(o => o.WarrentyMonths).Title("WARRENTY");
c.Command(commands =>
{
commands.Edit().ButtonType(GridButtonType.Image);
commands.Delete().ButtonType(GridButtonType.Image); ;
}).Width(180).Title("COMMAND");
}).Editable(editing => editing.Mode(GridEditMode.InLine))
%>
Well, it looks like a problem in the RTL CSS:
I've changed the .t-last-header{border-right-width:1;} from 0 and got the separator.
Still looking for answer for the grid rows, especially in edit mode...