Long institute names get cut off in the footer

[damithc]

[arvind-kalyan]

Hello, Can I try this? :)

[LowWeiLin]

Sure, this one might not be so simple, but you can give it a try.

[arvind-kalyan]

I'm thinking this involves correcting the properties of classes involved in the footer, right?

[LowWeiLin]

That class is from bootstrap, so i think you can't modify it. I'm not sure exactly what properties to add off my head. Try to explore what can be done! =)

[arvind-kalyan]

Why can't we modify the bootstrap.min.css file?

[LowWeiLin]

The same class is used in other places, changing the properties may lead to unintended changes elsewhere. Either way, we should not change a dependency/library directly.

[arvind-kalyan]

Okay.. I'll work on this.

[arvind-kalyan]

Two approaches:

1. Move [TEAMMATES V4.18] and [Send Feedback], more to left and right respectively, making space for longer names. We have imposed a restriction of 64 chars for name, so this will take care of that. But then, this requires changing bootstrap css file (or overriding / defining new classes for this)
2. Add a hover text. When we hover on it, it shows the full Institute name. (For example : National University of Sing... on hover shows National University of Singapore)

What do you think?

[damithc]

Ideally, institute name should simply take up the empty space currently available on its left and right, without moving the other two elements. Look into how to adjust spacing/placement in bootstrap. Other other two elements have fixed lengths, we can give the remaining space to the middle element. Let's do that first. We can do the hover over solution on top of that, as a separate issue, for names that cannot be shown even in the new space-adjusted footer.

[damithc]

Actually, there is room for the other two elements to move to either side (without moving out of the page width we use) and that gives more space for the middle element to widen further.

[arvind-kalyan]

@damithc Sir, Yes, this was what I was suggesting. The two elements can be shifted more to both sides. Since the character limit of Institute name is 64, this would then display the full name without problems. If we are to extend the limit to more than 64 in the future, we could use something like hover text (after displaying till 64 chars). This can be done but requires modifying the bootstrap css file, which LowWeiLin was telling not to. He has a point. Directly changing container class might cause problems elsewhere, like he mentioned. What we could do is, make a separate container class (say, container_footer), and then copy the existing properties and also add the new properties to it and use that for the footer (in footer.jsp).

[LowWeiLin]

If you need to override certain properties, you can consider adding a new class and add it in teammatesCommon.css, where we place all our custom css classes.

[damithc]

First, make sure there is no way to adjust the spacing using bootstrap facilities provided. I don't know for sure if it can be done, but it's odd if bootstrap cannot do a simple thing like that. This is a chance for you to gain some expertise in bootstrap. Take your time. :-)

[arvind-kalyan]

@damithc Sir, It would definitely be possible in bootstrap. @LowWeiLin was just saying that those changes should not be made in the main bootstrap.min.css file.. Since these classes are used in other places also, changing it for this may lead to unintentional changes in other places. So it would be safe to make a different class (in teammatesCommon.css), and use it just for this. I'll work on this.

[damithc]

When I said 'using bootstrap', I don't mean modifying bootstrap css file. That's definitely out of the question. If we must, we can override their classes. What I meant was by applying the mechanisms they provide, such as their grid system.