search

letrunghieu / laravel-dashboard

A starting template for Laravel 5 dashboards
https://laravel-dashboard.hieule.info/
MIT License
31 stars 8 forks source link

Can't edit the sytles of the sidebar #8

Open mntfr opened 7 years ago

mntfr commented 7 years ago

I am trying to make the sidebar larger because one of the submenus name is too large so I am editing AdminLTE.css but the changes are not recognized

letrunghieu commented 7 years ago

Hi @mntfr , how is it going?

Can you post your CSS here. I'm sure that we can change the height of the sidebar menu items by changing the line height and vertical padding values of the anchor element.

mntfr commented 7 years ago

Hi thanks for answering I am editing the AdminLTE.css, I am trying to do that because some of the elements of my Sidebarmenu have names that are too long so they display oustide of the side ba so my css3 would look like this `@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic); /*!

letrunghieu commented 7 years ago

Did you try to increase the width of the sidebar?

mntfr commented 7 years ago

Yes from 230 to 280px

letrunghieu commented 7 years ago

Hmm, I use this code to increase the width of the sidebar to 280px and it works as expected.

.main-sidebar, .left-side {
  width: 280px;
}
.content-wrapper, .right-side, .main-footer {
  margin-left: 280px;
}
.main-header > .navbar {
  margin-left: 280px;
}
.main-header .logo {
  width: 280px;
}
mntfr commented 7 years ago

Thank you so much that worked perfectly however in a separeta issue when I try to make the li elements have a bigger heigth the list is not longer displayed

letrunghieu commented 7 years ago

Can you post a screenshot of your issue here?

mntfr commented 7 years ago

p1 I have that issue and when i try to make the li elements taller this happens p2

letrunghieu commented 7 years ago

I couldn't apply your posted CSS code to see where is the problem. However, to change the height of the menu item, just change the top and bottom padding of the .sidebar-menu li > a selector, the default values are set to 12px.

For example, 

.sidebar-menu li > a {
  padding-top: 20px;
  padding-bottom: 20px;
}
mntfr commented 7 years ago

Sorry for not answering I am trying to make the span tags of the menuitem item class break line if the number of words exceeds a certain width To do that I am editing the css3 with 

.menuitem.item > a > span {
  display:block !important; 
  width: 150px !important;
  word-break: break-all !important;
}

and acording to this test https://jsfiddle.net/t62ncqge/ it should work however it does not