I'm using the MUI Breadcrumbs component on a site I'm working on and I'm just about done but I'm trying to hide the first item in the path. I'm able to hide the actual word itself, but I can't figure out how to hide the separator.
For example, this is how it's structured now:
"W > X > Y"
This is how I want it to look:
"X > Y"
This is what I'm currently showing because I can't hide the first separator:
"> X > Y"
Anyone have any ideas on how to hide that first separator?
You can add a custom class to the Breadcrumbs component like this:
<Breadcrumbs className="breadcrumbsCustomStyle"
and using css set display: none; for the first two li children of this class like this:
.breadcrumbsCustomStyle li:first-child,
.breadcrumbsCustomStyle li:nth-child(2) {
display: none;
}
You can take a look at this sandbox for a live working example of this approach.
Related
I am using the Ant design components for React.
I would like to fixe the size of the multi selection input fields in order to have the selected values into the same line without taking a new line like is the default behavior :
https://ant.design/components/select/#components-select-demo-multiple
I need to have the values ranged into the same line.
I can fixe the size of the input fields by overriding the style
.ant-select-selection--multiple:before, .ant-select-selection--multiple:after {
display: inline !important; }
But when I select several values, then they are outside the inputr field.
Finally I found a solution by adding this css style options :
.ant-select-selection--multiple
{
white-space: nowrap;
height: 30px;
overflow: auto
}
Thus the div is looking like an input text field and when the content ground a scroll appear at the right side of the div field.
You can specify maxTagCount
<Select
mode="multiple"
maxTagCount={1}
>
// here is rendering of the Opitons
</Select>
I need to make the cs-cart home page full width and I'm not able to sort out how to do that.
I can change the "maximal widht" parameter but it affect the whole website.
Any suggestions ?
Thanks !
You can use hook index:content to add all content into a new div that can have different class for homepage and base on that you can change the css only for hompage
For doing that you can use My Changes add-on:
Please add files:
1.
design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/content.pre.tpl
with content
{if $runtime.controller=='index'}<div class="homepage">{/if}
2.
design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/content.post.tpl
with content
{if $runtime.controller=='index'}</div>{/if}
Please add custom CSS:
please add css and save
.homepage .container-fluid{ max-width: 100%; }
The custom modification is for CS-Cart 4.2.x / 4.3.x on Responsive theme and also require My Changes add-on to be active.
There is a lot of information on how to use ng-class and ng-style on elements. But I was wondering if there is a way to use angular to change the "settings" of a class.
So for example, say that you had a css class that looked as follows:
.testclass {
color: red;
background-color: blue;
}
I want to use angular to change the color:red to color:black, without attaching angular to the HTML DOM object, but via the class instead.
OK, this isn't a very useful example. What I was really planning to use it for was to hide part of ck-editor (class cle_top) and I want to set the whole class to hidden when someone clicks a button (and visible if the click it again).
======== To make it clearer, this is the bit of HTML I want to hide =======
<span id="cke_1_top" class="cke_top cke_reset_all" role="presentation" style="height: auto; -webkit-user-select: none;"><span id="cke_8" class="cke_voice_label">
Editor toolbars</span><span id="cke_1_toolbox" class="cke_toolbox" role="group" aria-labelledby="cke_8" onmousedown="return false;">
<span id="cke_11" class="cke_toolbar" aria-labelledby="cke_11_label" role="toolbar"><span id="cke_11_label" class="cke_voice_label">
But I need to do it without being able to add angular hooks in the HTML code (like adding ng-class to the span, which would have been a simple solution)
Attached is a JSfiddle that shows my problem, and as you can see, the toolbar button does nothing.
http://jsfiddle.net/vrghost/uqvo3ceh/
Which kind of works now, it adds the class invisible to the span, however, it does not hide the span that it is looking at.
Use the same process on a test text and it works...
Don't know of anything that will edit the class itself, but that probably isn't want you want to do. Other options are:
1) Create a second class, that comes after the first one in your CSS file that adds / changes the properties you want. Ex:
.testclass {
color: red;
background-color: blue;
}
.newclass {
color: green; // change property in first CSS class
display: none; // or hide
}
Then apply the second class conditionally:
<div class="text-class" ng-class="{newclass: hideScopeFlag}">blah</div>
2) Simply use ng-if, ng-hide, or ng-show if all you are doing is hiding something. Ex:
<div class="text-class" ng-hide="hideScopeFlag">blah</div>
or
<div class="text-class" ng-show="!hideScopeFlag">blah</div>
Why not simply toggle the class off/on for that element when the user clicks the button? (Edit: You said you want to "set the whole class to hidden" - I am assuming you mean to remove the class?)
To answer your question though, you can do this with JavaScript using document.styleSheets.
See this Stack Overflow question and the blog post it references. It mentions that there may be some browser compatibility issues. I have not investigated this.
EDIT: This implementation of 'ng-toggle' will allow you to hide or show an element with a single button.
The simplest solution without messing with the stylesheets is to add a new rule like
.visibleOff .testclass {
color: black;
}
and then you just need to toggle the "visibleOff" class on a parent element (the wrapper or the body element) of the editor.
To hide certain elements in the DOM you can also use a $scope variable that acts as a boolean. You can set it to false by default and on button click toggle it to true and back.
$scope.hidden = false;
$scope.toggleHide = function(){
$scope.hidden = !$scope.hidden;
}
In your dom you can then wrap your element with an ng-hide="hidden" attribute like so:
<div ng-hide="hidden">...</div>
<button ng-click="toggleHide()">togglehide</button>
A plunker example can be found here: http://plnkr.co/edit/?p=preview
If anyone wanted to know how to do this, potentially this could be useful for other things as well.
Created a function that uses document.querySelector to find the element, then just do a toggle to turn on or of, and that, as they say, is it folks.
$scope.toolBarVisible = function(){
console.log("Changing visibility");
var element = document.querySelector( '.cke_top' );
console.log("Just to do some debugging we check " + element);
var myEl = angular.element( element );
myEl.toggle();
element = document.querySelector( '.cke_bottom' );
myEl = angular.element( element );
myEl.toggle();
var myEl2 = angular.element( document.querySelector( '.test' ) );
myEl2.toggleClass("invisible")
}
And for those that are looking closely, yes, it hides the bottom as well, and all without changing ckeditor or the code.
Hope someone finds it helpful.
I need the badge to come on the top-right of where the text ends, right now it's not like that -
Here is the screenshot of the default implementation :
<ion-tab title="Business" badge="homeBadgeCount" badge-style="badge-assertive" href="#/tab/home">
I have made following changes to make it work :
Created a new CSS class to be used that positions the badge properly:
.business-badge {
right: 32px !important;
}
And used that class inside the html:
Hope it will be useful for someone who is not much familiar with css like me ;)
I'm still using 4.1 and I'm trying to center a form content on screen.
When I add a new form it stays on the "left" of the screen.
I've tried to change form.html (temmplates/shared) adding a div with a style like this:
margin-left : 10%; margin-right : 10%;
up next to the form tag and closing it at the bottom.
The form goes to the right but not centered at all.
Anyone has any clue to help with this ?
Here is a screenshot of a simple Form (it's not basec on models)
thanks
Alejandro
Ok - i've gone to a default of atk4.2 to demonstrate.
If you add a new page with defaults as follows
<?php
class page_test extends Page {
function init() {
parent::init();
$p=$this;
$f=$p->add('MVCForm')->setModel('Customer');
}
}
?>
I get the following and the fields extend across the whole width of the page.
This is because the default page template takes the whole width and is expected.
In order to adjust the form, you can use view functionality so create a view under the /lib/View directory called Centre.php and put the following code in it
<?php
class View_Centre extends View {
function init(){
parent::init();
}
function defaultTemplate() {
return array('view/centre');
}
}
?>
Then create a new template for the view in yoursite/templates/default/view called centre.html and insert the following html code
<div style='width:50%; margin: auto;'>
<?$Content?>
</div>
and then in the page, we add the view first and the form into the view rather than straight into the page.
<?php
class page_test extends Page {
function init() {
parent::init();
$p=$this;
$v=$p->add('View_Centre');
$f=$v->add('MVCForm')->setModel('Customer');
}
}
?>
and this results in the following web page
The base ATK4 form is itself a view which means you can style the form however you want so if you get for example use a different style of form such as the one described here you can do this by copying yoursite/atk4/atk4/templates/shared/form.html to yoursite/atk4/templates/shared.form.html and changing the second line from
<?form?>
<div id="<?$_name?>" class="atk-form <?$class?>" style="<?$style?>">
<?$hint?>
<form class="<?$form_internal_class?>" id="<?$form_name?>" name="<?$form_name?>" action="<?$form_action?>" method="POST" <?$enctype?>>
<fieldset class="<?$fieldset?>">
to
<?form?>
<div id="stylized>" class="myform <?$class?>" style="<?$style?>">
<?$hint?>
<form class="<?$form_internal_class?>" id="<?$form_name?>" name="<?$form_name?>" action="<?$form_action?>" method="POST" <?$enctype?>>
<fieldset class="<?$fieldset?>">
Create a new form.css file in yoursite/templates/default/css which contains the styling
Copy yoursite/atk4/templates/shared/shared.html to yoursite/templates/shared/shared.html and add an extra tag
<?$css_include?>
just above the existing
<?$js_include?>
and in Frontend.php, let every page find the new css file.
$this->addLocation('templates',array(
'css'=>array(
'default/css',
),
));
$this->template->appendHTML('css_include','<link type="text/css" href="'.$this->api->locateURL('css','form.css').'" rel="stylesheet">');
which results in a styled form like this
There are some examples of different form layouts here that you can use to adjust the form layout itself. Not sure from your question if you want to center the form in the page or centre the fields.
If you just want to centre the Form within the webpage, you want to use margin: auto for centering css rather than setting a percentage on each side as shown here
Also note, if you amend files from the atk4 directory, you should make a copy into yoursite/templates/shared and amend it there so you can upgrade by overwriting the atk4 directory later without losing anything.
If i use the default form template (in this case in a CRUD), i get the following
If i make your change to the atk4/templates/form.html by adding
<div style="width: 50%; margin: 0 auto;">
as the second line in form.html and adding the corresponding
</div>
one line from the bottom, it shifts everything slightly to the right as follows
What is unclear in your question is what you are trying to achieve - do you want to move the fields within the form or do you want to centre the whole form on the page ?
I think the reason for the shifting is because of setting the width to 50% but I dont know what layout you are trying to obtain - do you just want to right align the labels to the fields maybe ? Please post screenshots in the original question of what you are getting and try to describe what you want to achieve.