The Bootstrap col-md class causes the label text to be truncated

Question

The Bootstrap col-md class causes the label text to be truncated

I am encountering an issue where a label extends beyond a certain length and ends up being placed under other elements.

Check out the image for reference: form input

I would like the entire label text to be visible. I believe the col-md-1 class from bootstrap is causing this problem. While this size works well for most entries and displays text on multiple lines when there are spaces, it fails to handle long single words, causing the text to spill over under the input field.

Below is the code snippet:

<div class="form-group filaCertificado">
    <form:label class="control-label col-md-1 nameCertificate" for="certs" path="certs">Cert Name</form:label>
    <div class="col-md-4">
        <input id="file" name="file" class="form-control inputCert" readonly="readonly" />
    </div>
    <label for="upload${status.count}" class="btnCert">
        <span class="btn btn-primary btnCert" aria-hidden="true">upload</s:message></span>
        <input type="file" id="upload" name="upload" style="display:none">
    </label>
    <button type="button" id="btnRepo" class="btn btn-primary btnCert">Repository</button>
</div>

In this scenario, how can I ensure that the entire label text is visible? Should I consider using JavaScript to dynamically check the size and adjust the CSS accordingly?

Thank you!

html css spring twitter-bootstrap jsp

Answer 1

Answer №1

To break the label text, you can implement word wrap

.nameCertificate{
  word-wrap: break-word;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="form-group filaCertificado">
    <form:label class="control-label col-xs-1 col-md-1 col-sm-1 nameCertificate" for="certs" path="certs">CertNameisverylong</form:label>
    <div class="col-md -4 col-xs-4 col-sm-4">
      <input id="file" name="file" class="form-control inputCert" readonly="readonly" />
    </div>

    <label for="upload${status.count}" class="btnCert">
      <span class="btn btn-primary btnCert" aria-hidden="true">upload</span>
      <input type="file" id="upload" name="upload" style="display:none">
    </label>
    <button type="button" id="btnRepo" class="btn btn-primary btnCert">
      Repository
    </button>
  </div>

</body>

</html>

Alternatively, you can use an ellipsis to display a portion of the label text with a tooltip for the full name

.nameCertificate{
white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 40px;

}

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>

    <body>

      <div class="form-group filaCertificado">
        <form:label class="control-label col-xs-1 col-md-1 col-sm-1 nameCertificate" for="certs" path="certs" data-toggle="tooltip" title="CertNameisagoodcertname">CertNameisverylong</form:label>
        <div class="col-md -4 col-xs-4 col-sm-4">
          <input id="file" name="file" class="form-control inputCert" readonly="readonly" />
        </div>

        <label for="upload${status.count}" class="btnCert">
          <span class="btn btn-primary btnCert" aria-hidden="true">upload</span>
          <input type="file" id="upload" name="upload" style="display:none">
        </label>
        <button type="button" id="btnRepo" class="btn btn-primary btnCert">
          Repository
        </button>
      </div>

    </body>

    </html>

Answer 2

To break the label text, you can implement word wrap

.nameCertificate{
  word-wrap: break-word;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="form-group filaCertificado">
    <form:label class="control-label col-xs-1 col-md-1 col-sm-1 nameCertificate" for="certs" path="certs">CertNameisverylong</form:label>
    <div class="col-md -4 col-xs-4 col-sm-4">
      <input id="file" name="file" class="form-control inputCert" readonly="readonly" />
    </div>

    <label for="upload${status.count}" class="btnCert">
      <span class="btn btn-primary btnCert" aria-hidden="true">upload</span>
      <input type="file" id="upload" name="upload" style="display:none">
    </label>
    <button type="button" id="btnRepo" class="btn btn-primary btnCert">
      Repository
    </button>
  </div>

</body>

</html>

Alternatively, you can use an ellipsis to display a portion of the label text with a tooltip for the full name

.nameCertificate{
white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 40px;

}

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>

    <body>

      <div class="form-group filaCertificado">
        <form:label class="control-label col-xs-1 col-md-1 col-sm-1 nameCertificate" for="certs" path="certs" data-toggle="tooltip" title="CertNameisagoodcertname">CertNameisverylong</form:label>
        <div class="col-md -4 col-xs-4 col-sm-4">
          <input id="file" name="file" class="form-control inputCert" readonly="readonly" />
        </div>

        <label for="upload${status.count}" class="btnCert">
          <span class="btn btn-primary btnCert" aria-hidden="true">upload</span>
          <input type="file" id="upload" name="upload" style="display:none">
        </label>
        <button type="button" id="btnRepo" class="btn btn-primary btnCert">
          Repository
        </button>
      </div>

    </body>

    </html>

The Bootstrap col-md class causes the label text to be truncated

Answer №1

Similar questions

Exploring ways to transfer a function variable between files in React

Tips for aligning a pseudoElement in the center below a bootstrap navigation link

New alternative for form-control-feedback in Bootstrap 4

Adjusting the height of a card in Reactstrap

Utilizing aria-expanded="true" for modifying a CSS attribute: A simple guide

Executing several Javascript functions when the page is loaded

Aligning the title vertically in Ionic on Android device

Is it possible to execute our webpack (UI) build directly in a web browser without the need for a server?

Troubleshooting: jQuery addClass() function not functioning properly in conjunction with attr("href", something)

What steps can be taken to strip HTML tags from an RSS feed using a shell script and then export the cleaned data as a

Information sent from TypeScript frontend to Java backend is converted into a LinkedHashMap

Is your webpage slow to respond after a page-refresh? (Delayed HTML rendering causing lag)

How to prevent the animation from triggering when changing the theme

Is there a way to send emails with subject lines containing special characters?

Is there a way to retrieve the value of a dropped file in a file input using jQuery?

Enhance the appearance of the popover by incorporating an arrow-like element for dismissing the

Utilizing jQuery's .clone() function to duplicate HTML forms with radio buttons will maintain the radio events specific to each cloned element

AngularJS function orderBy reverses the array instead of sorting it

Struggling to align the login button accurately within the navbar

How can I prevent tinymce from stripping out my <link> tag?